専門用語などを文章の外に、もう少し詳しく解説したい。もしくは、グローバルメニューなどに簡単な説明を吹き出し表示させたい。
そんなときはツールチップを表示して、簡単な説明文を表示してみてはいかがでしょうか。
ツールチップとは、対象にカーソルを合わせると表示される枠内の補足説明のこと。
HTMLタグでもツールチップを表示することはできますが（title属性で設定）、プラグインを使えばちょっとオシャレなツールチップにすることができます。
【Simple Tooltips】は、ツールチップを吹き出し表示するプラグイン。
カーソルを合わせるとツールチップ内に、注釈文が表示されるようになります。
- 専門用語などに補足情報を表示したい
- グローバルメニューに簡単な説明を表示したい
- 記事内の用語を、マウスオーバー時に注釈文を吹き出し表示させる
- グローバルメニューにカーソルを合わせたときに、ツールチップを表示する
使用イメージ
下はツールチップ内に画像を表示した場合。
インストール方法
- ダッシュボードから プラグイン > 新規追加 とクリックする
- “Simple Tooltips”で検索する
- “今すぐインストール”をクリック。インストール後、有効化する
または、配布サイトからダウンロードして、インストール。
Simple Tooltips – WordPress プラグイン | WordPress.org
手動でインストールする方法はコチラ
ツールチップの表示方法
ビジュアルエディタの場合、投稿画面に『Add a Tooltip』のボタンが表示されるので、クリックしてください。
ボタンクリック後、もしくはテキストエディタの場合、以下のショートコードの書き換えを行ってください。
[simple_tooltip content='ツールチップに表示する説明文を記述する']ツールチップを表示させたい語句[/simple_tooltip]設定
プラグインを有効化すると、管理画面 > 設定 に『Simple Tooltips』が表示されるので、そこから設定を行ってください。
| Background Color | ツールチップの背景色の選択 |
|---|---|
| Text Color | テキストの色を選択 |
| Max Width | ツールチップの最大幅 |
| Opacity | ツールチップの透明度 |
| Position | ツールチップを表示する位置を選択 Center：中央 left：左 right：右 |
| Disable On Mobile | モバイル端末でツールチップを非表示にするかの選択 |
| Menu Selectors (Advanced) | メニューにツールチップを表示する場合、メニューのクラスまたはIDを記述する （下記のツールチップを表示する方法を参照） |
メニューにツールチップを表示する方法
グローバルメニューにツールチップを表示するには、いくつか手順が必要ですので順を追って説明します。
『Menu Selectors (Advanced)』にクラス・ID名を記述する
使用しているテーマのメニューが表示されている箇所の、クラスまたはID名を確認し、設定内の『Menu Selectors (Advanced)』に記述します。
これは各自使用しているテーマによって異なります。
例：テーマ『Jin』では『#drawernav3』
メニューを編集する
外観 > メニューに移動し、『タイトル属性』と『CSS class』を編集します。
『タイトル属性』にツールチップに表示する説明文、『CSS class』に『tooltips』と記述してください。
『タイトル属性』と『CSS class』が表示されていない場合は、表示オプション内の『タイトル属性』・『CSSクラス』にチェックを入れてください。
使用イメージ
上記の手順を踏むと、メニュー項目のマウスオーバー時に、ツールチップが表示されるようになります。
動作確認環境
バージョン 2.1.3
WordPress 5.2.1
このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。
まとめ
- 【Simple Tooltips】はツールチップを使って、注釈・説明文を表示するプラグイン。
- 専門用語などに簡単な説明文を吹き出し表示させることができます。
ランキング参加中です。
クリックしていただけると、ブログ更新の励みになります。