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