WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

特定の文字列をマウスオーバーしたときに説明を吹き出しで表示するプラグイン「Text Hover」

公開日:2019(平成31)年1月18日/最終更新日:

WordPressのプラグイン情報



投稿や固定ページの本文の中に難しい用語があった場合どうしてますか??

その単語の下に長々と説明を表示する、用語集を別に作って手動でリンクを表示するなどいろいろと工夫が必要ですね。

今回紹介する【Text Hover】はあらかじめ対象となる単語と説明文を設定しておくだけで、自動的に対象となる単語をマウスオーバー(マウスカーソルを重ねる)したときに吹き出しで説明が表示される便利なプラグインです。

この類のプラグインはいろいろありますが、日本語のようなマルチバイト文字列に対応していないものがほとんど。

【Text Hover】は日本語の対象単語でもきちんと対応しているので安心して使えます。

【Text Hover】プラグインの基本的な機能・できること

  1. 「対象文字列」と「ホーバー時に表示されるツールチップ(吹き出し)」を設定するだけの簡単操作
  2. 同じ単語が複数ある場合は、すべてにツールチップを表示する/最初に出てきた単語だけ対象にするのいずれかが設定可能
  3. 日本語のワードもきちんとツールチップ表示される(テストでの動作ですので環境によってはうまくいかないかもしれません)

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール(CMS)で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

  • テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
    ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
    ※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
  • プラグインに無料版と有料版(Pro版)がある場合、特に記載がなければ無料版の情報のみを紹介しています
  • このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
  • プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください(ここでは質問にお答えすることはできません)

【Text Hover】プラグインの設定画面や表示の日本語化と翻訳

【Text Hover】プラグインは言語の変更に未対応ですので表示のまま設定することになりますが、設定項目が少ないので問題ないかと思います。

【Text Hover】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください(プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください)。

WordPressを使い始めて間もない方(初心者の方)は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール&追加方法とエラー対処の方法も併せてご覧ください。

【Text Hover】プラグインの基本的な使い方

設定は管理画面から「設定」→「Text Hover」で行います

表示される設定画面はこんな感じです。

特定の文字列をマウスオーバーしたときに説明を吹き出しで表示するプラグイン「Text Hover」|Knowledge Base

窓の中に「wp => WordPress」という例がある通り、「wp」という文字列が投稿や固定ページの本文にある場合、マウスオーバーすると「WordPress」という吹き出しが表示されるという動作をしますので、1単語1行になるようにしてどんどん追加していきます。

たったこれだけでマウスオーバー時の吹き出し表示が可能になります

※数単語のみでテストをしたため、数多くの単語を登録した場合表示速度に影響が出たり、うまく動作しない可能性もありますのでご注意ください。

この入力窓の下にいろいろな設定項目がありますので必要に応じて設定してください

Enable text hover in comments?

コメントに対象となる単語があった場合ツールチップ表示するか?

Only text hover once per term per post?

1つの投稿に複数の対象単語がある場合、すべてにツールチップを設定するか?1つめの単語にのみ設定するか?

Should the matching of terms/abbreviations be case sensitive?

対象単語の大文字・小文字を区別するか?

Should better looking hover tooltips be shown?

デザインはテーマ標準のものを使うか?このプラグインのものを使うか?(チェック入の場合はプラグインのデザイン)

【Text Hover】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

デザイン変更の仕方

デザインに関しては直接CSSを記述または変更する必要があります。

プラグインのCSSを直接編集する場合

管理画面から「プラグイン」→「プラグイン編集」をクリックし、右上の一覧から「Text Hover」を選択します

右のファイル一覧の中から「/assets/text-hover.css」を選択します。

デザイン要素自体は凄く少ないのでここで直接お好みのデザインへ変更します。

※プラグインの更新をした場合にカスタマイズ内容が元に戻ることがありますので、次項のテーマファイルへの追記をおすすめします。

テーマのCSSへ追記する場合

以下がこのプラグインのCSSすべてですので、これをテーマのCSS末尾へコピペして修正します。

/***** ホーバー時に表示されるツールチップの文字サイズと隙間 *****/
.text-hover-qtip {
padding: 4px 6px;
 
}

/***** ツールチップ表示に該当する文字列の装飾 *****/
abbr.c2c-text-hover {
text-decoration: none;
border-bottom: 1px dotted #000;
}

/***** ホーバー時に表示されるツールチップのデザイン *****/
.qtip {
font-family: Helvetica, Arial, sans-serif;
color: #fff;
background: rgba(0,0,0,.72);
box-shadow: 0 1px 1px rgba(0,0,0,.12);
border-radius: 3px;
border-color: #000;
line-height: 1.4em;
}

※うまく適用できない場合には項目の末尾に!importantを入れるといいでしょう

プラグインのテスト環境&個人的評価

最後に【Text Hover】を動作確認した際の環境と個人的な評価を書いておきます。導入の検討や参考になれば幸いです。

テストした環境

  • テストサーバー:ColorfulBoxカラフルボックス
  • WordPressのバージョン:5.0.3
  • PHPのバージョン:7.0
  • テーマ:Simplicity2 バージョン2.6.0.9
  • プラグインのバージョン:本記事で紹介しているバージョン 3.8/最新バージョン 4.2
  • 公式サイト(wordpress.org上):https://wordpress.org/plugins/text-hover/
  • 公式サイト(作者サイト):

個人的な評価・感想ほか

  1. 設定のしやすさ:★★★★★
  2. 使いやすさ:★★★★★
  3. おすすめ度:★★★★★

日本語にも反応してくれますし、設定も簡単なのでおすすめです。

著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 読み手:星野 邦敏, 読み手:吉田 裕介
¥2,889 (2024/02/08 17:07時点 | Amazon調べ)