※当サイトの一部記事には広告を含みます。
その他

FF14 エオルゼアデータベース公式ツールチップをサイトやブログに表示する方法 WordPress「Cocoon」

FF14ファンサイトを作っているなら是非

うさちゃん
うさちゃん

ファイナルファンタジー14のファンサイトやウェブログに、ぜひ導入をおすすめしたいのが「エオルゼアデータベース」に掲載されているコンテンツを、埋め込んで利用することができる「公式ツールチップ」✨
わざわざ、ロードストーンへと飛ばなくても詳細な情報が見られる上に、導入も簡単😁
今回は、こちらの導入方法をメモとして残しておきたいと思います。

ツールチップって?
ねこちゃん
ねこちゃん

「うさねこ散歩」も先日から導入させていただきました。めちゃくちゃ便利ですなあ。

外部サイトにツールチップを表示する方法

まずは、Javascriptファイルを設定

うさちゃん
うさちゃん

<body></body>タグの間に下記のJavascriptファイルを読み込みます。

<html>
  <head>
  …
  </head>
  <body>
  <script src=”https://img.finalfantasyxiv.com/lds/pc/global/js/eorzeadb/loader.js?v2″></script>
  …
  </body>
</html>

引用:https://jp.finalfantasyxiv.com/lodestone/special/fankit/tooltip/

WordPress テーマ「Cocoon」での設定例

うさちゃん
うさちゃん

WordPressメニューから。

👉外観

👉テーマファイルエディタ

👉編集するテーマ「Cocoon Child  Cocoon」「body-top-insert.php 」に追加します。

src=”https://img.finalfantasyxiv.com/lds/pc/global/js/eorzeadb/loader.js?v2″></script>

設定を間違えると、最悪サイトが表示できなくなるなどの影響が出ます。
必ずバックアップをとるなどして、修正前に戻せる対策を取ってから実施しましょう。

記事内に「ツールチップ」コードを取得して設定

うさちゃん
うさちゃん

サイトやブログに表示させたい”ファンキット「ツールチップ」コード表示” に書かれている内容を埋め込むことでエオルゼアデータベースの公式ツールチップが表示できるようになります✨

  1. エオルゼアデータベースの利用したいファンキット「ツールチップ」コード表示をコピーする。
  2. コピーしたファンキット「ツールチップ」コード表示を、自サイトの利用する部分へと埋め込みます。
  3. リンクにマウスを持っていくと「ツールチップ」が表示されます。
ファンキット「ツールチップ」コード
ツールチップ表示例

「ツールチップ」表示例

当サイトの設定上モバイル端末では「ツールチップ」は表示されません。

アイテム

 表示例 バハムートブレードFF14アイコン

クエスト

 表示例 究極幻想アルテマウェポンFF14アイコン

コンテンツ

 表示例 天然要害 サスタシャ浸食洞FF14アイコン

NPC

 表示例 ミンフィリアFF14アイコン

製作手帳

 表示例 メープル材FF14アイコン

採集手帳

 表示例 ファイアシャードFF14アイコン

アチーブメント

 表示例 勝利の栄光:ランク1FF14アイコン

テキストコマンド

 表示例 /sayFF14アイコン

※リンクの最後のアイコンは当サイトのカスタマイズです。
※ご利用のサイトによってツールチップの表示が崩れたり、表示がされない場合があります。

広告
Amazonのセール情報をチェック

使用上の注意点

うさちゃん
うさちゃん

FFXIV ファンキットを利用する場合は、「ファイナルファンタジーXIV 著作物利用許諾条件」を読んだうえで利用しましょう。
また、サイトによってツールチップの表示が崩れたり表示がされない場合があります。

Lodestone日記などの専用のコード

うさちゃん
うさちゃん

エオルゼアデータベース内での投稿やリッチモード日記、イベントなどの投稿時にペーストして利用しましょう。

おまけ:WordPress「Cocoon」+エックスサーバー

うさちゃん
うさちゃん

うさねこ散歩は『エックスサーバー』で「WordPress」を使ってサイトを作っています?

ねこちゃん
ねこちゃん

安定してるし、使いやすいですよ。

うさちゃん
うさちゃん

そして、たくさんあるWordPressテーマの中で、当サイトは「Cocoon」を利用させていただいています。
こちらを選択した理由は「SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ」という点。
当然、利用されている方々も多く、カスタマイズのサンプルがネット上に多いのも「Cocoon」の特徴ですね?

現在「WordPress」+「Cocoon」は無料で利用可能です。
もしも、レンタルサーバーはどこにしよう? と検討されているのであれば、このテーマ「Cocoon」を簡単に利用できる「エックスサーバー」がオススメ。
エックスサーバー」は、WordPressテーマインストール機能も提供しており、導入も簡単です?

このたびエックスサーバー株式会社では、無料WordPressテーマ「Cocoon」の開発事業を譲り受けるとともに、同テーマの開発者わいひら氏と業務提携契約を締結しました。

これにともない、レンタルサーバー『エックスサーバー』において、「Cocoon」を簡単に利用できる「WordPressテーマインストール」機能の提供を開始します。

弊社は技術提供・ノウハウ提供などを通じて「Cocoon」の開発・運営を全面的にサポートし、「Cocoon」の価値のさらなる向上を目指すとともに、圧倒的なシェアを誇る「Cocoon」を育て上げたわいひら氏を弊社グループの仲間として迎え入れ、国内シェアNo.1(※)を誇る弊社レンタルサーバー『エックスサーバー』との融合によるシナジーの最大化、WordPressインフラサービスとしての利便性の拡大を目指してまいります。

引用:https://www.xserver.ne.jp/

高速・多機能・高安定レンタルサーバー『エックスサーバー』

広告
ガレリア ゲーミングノートPC 【 RTX 3050 / Core i7-13620H / 16GB / 500GB 】 GALLERIA RL7C-R35-5N Windows 11 Home 15.6インチ 165Hz 動画編集 ゲーム実況 15968-3544
ガレリア ゲーミングノートPC 【 RTX 3050 / Core i7-13620H / 16GB / 500GB 】 GALLERIA RL7C-R35-5N Windows 11 Home 15.6インチ 165Hz 動画編集 ゲーム実況 15968-3544
GALLERIA RL7C-R35-5N 『Minecraft: Java & Bedrock Edition for PC、PC Game Pass同梱版』 【Core i7-13620H / RTX 3050 / メモリ 16GB / 500GB SSD 】ガレリアゲーミングノートパソコン
■CPU:インテル Core i7-13620H■グラフィック機能:NVIDIA GeForce RTX 3050 6GB GDDR6 Laptop GPU + インテル UHD グラフィックス■メモリ:16GB (DDR5-4800 SO-DIMM)■ストレージ:500GB (M.2 NVMe Gen4)■ディスプレイ:15.6インチ 非光沢フルHD液晶 (1920×1080ドット表示)/ リフレッシュレート 165Hz
■OS:Windows 11 Home 64ビット■オフィスソフト:Office なし■Minecraftライセンス:Minecraft: Java & Bedrock Edition for PC■PC Game Pass:PC Game Pass同梱版
■LAN:1Gb Ethernet対応LANポート x1■無線LAN:インテル Wi-Fi 6E AX211NGW (IEEE802.11 ax/ac/a/b/g/n 2x2 Max2.4Gbps)■Bluetooth:Bluetooth 5.3■サウンド:内蔵ステレオスピーカー / HDサウンド■WEBカメラ:HD画質WEBカメラ
■電源:ACアダプター (180W)■稼働時間:計測中■入出力ポート:USB 2.0 Type A × 1<br>USB 3.2 (Gen1) Type A × 2<br>USB 3.2(Gen2)Type C × 1(データのみ)<br>映像出力端子:HDMI 2.1 Type A × 1、Mini DisplayPort (DP1.4a) × 1 <br>サウンド端子:マイク入力 × 1 (3.5mmジャック)、音声入出力 × 1 (3.5mmジャック CTIA■サイズ:約 360(幅) x 244(奥行) x24(高さ)mm■重量:約2.1kg

※本記事はファイナルファンタジーの非公式ファンコンテンツです。

※内容は執筆時点の情報をもとにまとめています。実装後に仕様変更や差分が見つかった場合は、気づいたタイミングで内容を見直すことがあります。

© SQUARE ENIX
FF11公式はこちら
FF14公式はこちら

※本文中に記載の会社名・製品名・サービス名・ゲームタイトル名等は、各社の商標または登録商標であり、権利は各社に帰属します。

※当サイトでは一部の記事において、アイキャッチ画像にAI生成を使用しています。