WordPressにツールチップを追加する方法｜脚注との使い分けとJSON配布

用語に短い補足を添えるならツールチップ、長い説明や出典なら脚注・本文リンクを使い分けます。この記事では、既存環境向けのツールチップ実装例と、スマホで読むための確認点を紹介します。

この配布JSONは、Lazy BlocksのStyles & Scripts（Pro）からCSSとJavaScriptを出力する既存環境向けです。無料版のソース確認では、この欄の値を保存してもページへ出力する処理は確認できませんでした。以前の「無料版だけで再現できる」という案内を訂正します。

無料版へ移す場合は、CSSとJavaScriptの読み込みを別途実装します。短い補足なら本文の括弧書きや脚注でも表せます。この配布物は既存の対応環境向けの実装例です。

これからLazy Blocksを試す方はLazy Blocks使い方完全ガイドにインストール手順をまとめています。

注釈のたびにショートコードを書くと、後から対象語や説明文を探し直す手間がかかります。専用の入力欄に分けて管理したい方向けの実装です。

本文とは別に、説明を付けるキーワードと補足文を入力します。修正時も、該当する欄を探して直せます。

ただし、購入条件や操作に必須の注意点までツールチップへ隠すのは避けましょう。読まないと困る情報は本文にも残します。

専用フィールドで対象語と説明文を指定し、本文中の補足として表示します。まず下のデモで開閉の動きを確認し、自分の文章に必要か判断してください。

ショートコードの手入力は減らせますが、ブロックの表示にはLazy Blocksとブロック定義が必要です。将来プラグインを外す場合は、注釈を本文へ戻す作業も見込んでおきます。

---

【実際のツールチップを使ったサンプル文章】

---

1. ショートコード不要！リピーター機能で直感的に複数追加

Repeaterは、対象キーワードと補足説明の組を追加するために使います。Repeater自体と、配布JSONが必要とするProのCSS・JS出力機能は別に考えてください。

「対象キーワード」とマウスオーバーで表示される「補足説明」を入力し、表示位置を選択するだけで、1つの段落にいくつでも直感的にツールチップを設置できます。

2. 見えないマウスオーバー範囲でツールチップの消失を防ぐ

このブロック最大の技術的ハイライトが、マウス操作に配慮したUX設計です。
通常、ホバーで現れたツールチップ内のテキストやリンクへマウスを移動させようとすると、アイコンから判定が外れた瞬間にツールチップが消えてしまことが多々あります。

実際にホバーすると、こんな吹き出しが開きます。

今回の設計では、CSSの疑似要素::beforeを使って、アイコンの周囲15pxぶんだけ透明な当たり判定を広げています。

.lzb-tooltip-icon-wrap::before {
  content: "";
  position: absolute;
  top: -15px; right: -15px; bottom: -15px; left: -15px;
}

当たり判定を広げることで、マウスで吹き出しへ移動しやすくしています。タッチやキーボードの操作は別なので、公開前にそれぞれの端末で開閉を確かめてください。

もう1つ気づいたのが、吹き出しの開く向きです。
CSSにopen-right・open-leftという2種類のクラスが用意されていて、画面の右半分にあるキーワードなら左向きに、左半分にあるキーワードなら右向きに開くよう、JavaScript側で判定を切り替えています。
これがないと、画面の端に近いキーワードで吹き出しが画面外にはみ出してしまいます。

3. 詳細リンクで伝えきれないを克服

ツールチップの吹き出し内には、詳細ページへのリンクを設置することが可能です。
短い補足文だけでは解説しきれない専門用語や複雑な概念も、詳細な解説記事や参考ウェブページへ誘導することで、読者の理解をスムーズに補完できます。

別タブで開くリンクも、元の記事へ必ず戻ってもらえるわけではありません。リンク文言には行き先が分かる説明を付け、補足が必要な場所だけに設置します。

スマホで吹き出しが画面外へ出ないか、リンクが押せるか、閉じる操作が分かるかを確認してから公開します。

「既存プラグイン」との差別化

既存のツールチップ製品も、入力方法やCSS・JavaScriptの読み込み方はそれぞれ異なります。利用中の機能で足りる場合は、作り直す必要はありません。

この実装が向くのは、注釈の入力欄とデザインを自分で管理し、複数記事で使い回したい場合です。まず一つの段落で試すと、編集の手間と読みやすさを比べられます。

CSSとJSはこのブロックを使ったページにだけ出力されるので、使っていない記事にまで余計なコードを読み込ませることもありません。

ツールチップ・脚注・既存機能を使い分ける

目的	選び方
短い専門用語の補足	読みながら任意に開くツールチップ。開かなくても本文が理解できる情報に絞る。
出典や長めの説明	脚注・本文の補足・詳細記事へのリンク。マウスを乗せる操作を必須にしない。
メニュー項目の説明	現在のテーマやメニュー向け機能を確認。この段落用ブロックと同じ実装とは限らない。

WordPressの脚注機能なら、本文の参照位置と補足欄を結び付ける方法もあります。数語の説明のために大きな外部ライブラリを追加する前に、標準機能で足りるか比べてください。

独自のHTML・CSS・JavaScriptを配置する方式では、表示用と編集画面用のスタイルを区別します。親テーマのファイルへ直接書き足すより、更新後も保守できる管理場所を決めることが先です。この配布物は既存環境向けの実装例で、別製品のツールチップと設定方法が共通ではありません。

公開前には、キーボードで対象へ移動できるか、タップで開いて閉じられるか、画面端や拡大表示ではみ出さないかを確認します。説明内にリンクを入れる場合は、リンクへ移動する途中で消えないかも点検してください。

配布用JSONファイルダウンロード

下のJSONを保存し、検証用ページへ読み込んでみてください。対象語を一つ、補足文を一つ入れ、PC・スマホで表示とリンクを確認してから本番記事へ展開します。

入力欄やJSONの扱いが分からない場合は、ブロックの設定・インポート手順を参照してください。既存の環境に合うか、検証用ページで確かめてから使用します。

配布データの動作条件と読み込み手順

この記事のJSONは、記載した環境向けのブロック定義です。プラグイン本体のZIPとは別のファイルです。動作条件を確認し、バックアップを取ったうえで検証用ページへ読み込んでください。

CSS・JavaScriptをStyles & Scriptsで管理している配布物は、その出力機能が必要です。入力コントロールが無料版に含まれていても、同じ見た目や動作が再現できるとは限りません。条件が合わない場合は、標準ブロックや無料版向けの配布データを確認できます。

• 配布ページからJSONを保存し、ブロック管理画面のExport / Importで読み込む。
• 一覧に追加された定義を確認し、テスト記事へ一つ配置する。
• 見出し・本文・画像・URLを自分の内容へ置き換える。
• PC・スマホで長文、空欄、クリック、開閉などの動作を確認する。
• 問題がある場合は重ねてインポートせず、読み込み状態とCSS・JavaScriptの出力を確認する。

設定方法はブロック設定の技術ガイドにまとめています。配布物についての連絡はお問い合わせページをご利用ください。