FF14 ツールチップの使い方と、ポップアップしない時の対策　WordPress Cocoon

パッチ7.1

FF14ツールチップをサイトに設置する方法です。HTMLの知識は不要です。
また、不具合があった場合の方法も記載しています。

公式サイトには「ご利用のサイトによってツールチップの表示が崩れたり、表示がされない場合があります」と注意書きがあり、ブラウザの仕様により不具合が出るのは仕方ない事のようです。

＊ツールチップ使用前に「ファイナルファンタジーXIV 著作物利用許諾条件」をよくお読みください。

FF14 ツールチップとは

「FF14ツールチップ」は、オンラインRGBゲーム ファイナルファンタジー14（以下FF14）の公式ツールです。FF14のファンサイトの運営に無料で配布されています。

「FF14ツールチップ」を導入すると、自サイトの記事に設置した「ツールチップ」の上にマウスオーバーをすると公式サイトの情報ページがポップアップするようになります。

↓マウスオーバーしてみてください。

でぶチョコボヘッド
装備ページ

チョコボパジャマ・シャツ アイテム情報ページ	マイチョコボ育成の秘訣 クエストの説明ページ
チョコボパジャマ・ボトム 製作レシピページ	チョコボ訓練士 アチーブメントページ

FF14 ツールチップ公式の埋め込み方

1・HTMLコード設置する
2・記事にツールチップを貼る

以上の2つの作業を行います。

筆者は公式サイトで紹介されている設置方法でうまく作動しなかったので、別の方法で設置しました。
他に困っている人がいるかもしれないので情報共有したく、その方法もあわせて掲載しています。

HTMLコードを設置する

公式方法・HTMLコード設置する

HTMLコードをテーマファイルエディター body-top-insert.php に貼ります。


ワードプレス管理画面を開いてください。

1・画面左の「外観」を右クリック
2・「テーマファイルエディター」をクリック

テーマファイルエディターが開きます。

1・右上の”編集するテーマ”の入力ボックスを「Cocoon child」にしてください。

2・右欄の「tmp-top-insert.php」を押すと下にツリーが開きます。「body-top-insert.php」を押してください。

4・コード記述エリアに　<?php//全ての訪問者をカウントする場合は以下に挿入 ?>　と記述してあります。
それより下ならどこでもよいので、以下のコードをコピー＆ペーストしてください。
コードは「FF14　ファンキットページ」からコピーしてもOKです。

<script src="https://lds-img.finalfantasyxiv.com/pc/global/js/eorzeadb/loader.js?v3"></script>

5・画面下の「ファイルを更新」ボタンを押してください。

コードをペーストする以外は何も触らないように注意して作業してください。記述してあるコードを1文字でも消してしまうと、サイトが正常に動かなくなる可能性があります。
その場合は子テーマをいったん削除してインストールし直してください。

コードの貼り付けはこれで完了です。
「公式・記事にツールチップを貼るに進んでください。

別の方法・HTMLコード設置する

公式の方法でうまくいかなかった方はこちらをお試しください。
HTMLコードを貼る場所が footer-insert.php に変わるだけです。

ワードプレス管理画面で 外観→テーマファイルエディタを開いてください。

1・右上の ”編集するテーマを選択” 入力ボックスを「Cocoon child」にしてください。

2・右欄の「tmp-top-insert.php」を押すと下にツリーが開きます。「footer-insert.php」を押してください。
テーマ編集画面が開きます。

4・コード記述エリアに　<?php//全ての訪問者をカウントする場合は以下に挿入 ?>　と記述してあります。
それより下ならどこでもよいので、以下のコードをコピー＆ペーストしてください。
コードは「FF14　ファンキットページ」からコピーしてもOKです。

<script src="https://lds-img.finalfantasyxiv.com/pc/global/js/eorzeadb/loader.js?v3"></script>

5・画面下の「ファイルを更新」ボタンを押してください。

HTMLコードの設置はこれで完了です。
下の記事に進んで、記事にツールチップを貼り付けてください。

記事にツールチップを貼る

HTMLコードが設置できたら、サイトの記事にツールチップを張り付けます。

公式方法・記事にツールチップを貼る

ツールチップを公式サイトからコピーします。

FF14公式プレイヤーズサイト「FF14ロードスト―ン」のホームページを開き、メニューバーの「プレイガイド」をクリックしてください。プルダウンが出ます。

プルダウンの「エオルゼアデータベース」をクリックしてください。

データベースのトップ画面が出ます。
検索ボックスに記事に記入したいアイテム名やコンテンツなどを入力して検索してください。

情報ページが開きます。今回は ”でぶチョコボヘッド” にしました。
画面下部の　「ファンキット「ツールチップ」コード表」　をクリックしてください。

ツールチップのコードが表示されるので、「コードをクリップボードにコピー」ボタンをクリックしてください。
クリップボードにツールチップのコードがコピーされます。

ワードプレスの記事作成画面を立ち上げてください。

コピーしたツールチップコードを、記事中の貼り付けたい場所にペースト（カーソルを置いて 右クリック→貼り付け 又は Ctrl＋Vキーを押す）すると、アイテム名が張り付きます。

保存してから、ご自分のサイトを立ち上げて記事ページを開いてください。
念のためにキャッシュをクリアしてから、記事に表示されているアイテム名をマウスオーバーしてください。
情報画面がポップアップすれば成功です。

別の方法・記事にツールチップを貼る

ツールチップを貼る時、HTML編集モードにする方法です。

HTMLコードの設置場所は前述の 公式方法・HTMLコードを貼る または 別の方法・HTMLコードをに貼る のどちらか不具合の出ない方を試してみてください。

ツールチップの貼り付け方

1・ワードプレスの記事作成画面を開き、ツールチップを挿入したいところに●を記入してください。
文字は●でなくても何か目立つ文字なら何でもOKです。

2・●を記入した行にカーソルを置き、画面上段のオプションマーク（縦に点3つマーク）を右クリック。

3・プルダウンの「HTMLとして編集」をクリックしてください。

表示が四角に囲まれたHTMLコードと●印に変わります。

FF14データベースからツールチップのデーターをコピーしてください。コピー方法は「公式方法・ツールチップの貼り付け」の時と同じです。

コピーしたデーターを●と置き換えてください。
●をマウスドラッグで選択し、 右クリック→貼り付け または Ctrl＋Vキー で置き換えられます。

置き換えると、●が消えて四角い枠の中にHTMLコードが表示されます。

1・HTMLコードのどこかにカーソルを置いてください。
2・画面上部の「ビジュアル編集」をクリックして表示を元に戻してください。

●のあったところにリンク付きのアイテム名（ツールチップ）が表示されます。

ワードプレスの記事作成画面を立ち上げてください。

コピーしたツールチップコードを、記事中の貼り付けたい場所にペースト（カーソルを置いてCtrl＋Vキーを押す）すると、アイテム名が張り付きます。

保存してから、ご自分のサイトを立ち上げて記事ページを開いてください。
念のためにキャッシュをクリアしてから、記事に表示されているアイテム名をマウスオーバーしてください。
情報画面がポップアップすれば成功です。

余談

余談ですが、
・ツールチップを●と置き換えた場合
・記事に直接貼り付けた場合
の違いは　class=”eeorzeadb link”　の有無です。

HTMLコードに詳しい方はどうしてこうなるのかコメント欄からでもご教授頂けると嬉しいです。
筆者も頑張ってみましたが・・・正直お手上げです・・・。