- 「難しい言葉」を使う時に、分かりやすい説明を付けたい！
- 欄外や別ページではなく、その場ですぐ説明を表示させたい！
- 解釈がいくつかある言葉の意味を明確にしたい！
「漢字」がたくさんあるwebページ、「長いカタカナ」がたくさんあるwebページは読みにくいですよね。
また、「専門的な言葉」がたくさんあるwebページも読みにくいです。
ぱっと見で難しそうに感じてしまい、理解できない単語や文がいくつかあると、もっと分かりやすいwebサイトを探しに行ってしまいます。
たくさんの人に読んでもらうためには、なるべく分かりやすい言葉（平易な言葉）を使うことが大切です。このインターネットビジネスラボでも１番に心がけていることです。
ただ、専門的な内容の記事を書く時は、どうしても「言い換えのできない言葉」が出てきます。
記事の途中で言葉の説明を入れても良いのですが、文章の流れが中断されたり、読むリズムが乱されたり、なにより意味の分かる人には邪魔になるだけです。
そんな時に、知りたい人にだけ知りたい情報を届けることができるのが、「ツールチップ」です。意味を説明したい単語にツールチップを設定すると、その言葉にカーソルを合わせた時だけ、その言葉の説明が画面に表示される機能です。
今回は、この「ツールチップ」と「用語集」をWordPressで簡単に使うことができるプラグイン「CM Tooltip Glossary」の導入方法や使い方、メリットなどについて徹底解説します！
言葉の意味は「共通認識」が大事
一般的な言葉でも、文章の内容や解釈によって意味が変わることがあります。専門的な分野の記事を書くなら言葉の意味を読者と共有し、共通認識を持つことが大切です。
ツールチップは、分かりにくい言葉にマウスを重ねると、言葉の意味が表示される機能のことです。知りたい方にのみ、言葉の意味を明確に共有できるので、似たような言葉で読者が混乱することがなくなります。
また、
- 言葉の意味で迷うことがなくなる
- 前提となる知識がなくても、記事が読めるようになる
- 言葉の意味が分かる人には邪魔にならない
など、良い事がたくさんある機能です。
用語集をWordPressで使えるようにするには下記の2つの方法があります。
- J-Queryと呼ばれるJavaScriptライブラリをwebサイトに導入する方法
- プラグインを使う方法
本記事では、『 2.プラグインを使う方法 』について解説します！
「CM Tooltip Glossary」のメリット
「CM Tooltip Glossary」は使い方が分かりやすく、自動で目次ページを作成してくれる点において優れています。あらかじめ登録した「言葉」が記事に出てくると、自動的にツールチップが設定されるのも嬉しい機能です。
簡単な設定と簡単な実装・運用。日本語化はされていませんが、それを考えても導入するメリットがありますね！
日本語化されていませんが、このwebページで詳しく解説しています。参考になさってください！
「CM Tooltip Glossary」の導入方法
「CM Tooltip Glossary」はWordPress公式プラグインなので、「WordPress管理画面>プラグイン>新規追加」 から簡単にインストールできます。
右側のキーワード検索テキストボックスで「CM Tooltip Glossary」と検索すると1番目にヒットしますので、「今すぐインストール」をクリックし、有効化します。
インストール済みプラグイン一覧に「CM Tooltip Glossary」 が表示されていればインストール完了です。
「CM Tooltip Glossary」のインストールが完了すると、下記のような画面が表示されますが、「使用状況などの情報をプラグインから収集すること」の同意を得るのが目的です。
同意すると有料バージョンを購入するときに利用できる割引をもらえますが、無料バージョンのみの利用を考えている方は「Skip」で問題ありません。
「CM Tooltip Glossary」プラグインの設定方法・使い方
「CM Tooltip Glossary」の設定方法や操作方法、注意点について徹底解説します！
「CM Tooltip Glossary」プラグインの設定方法
このプラグインの設定は初期設定のままでも機能しますので、すぐに使ってみたい方は「操作方法」に進んでいただいてもかまいません。
「CM Tooltip Glossary」の設定画面の解説
「CM Tooltip Glossary」の設定は、「WordPress管理画面 > CM Tooltip Glossary > Settings 」から行います。
- Settings… 「CM Tooltip Glossary」の設定画面に移動
- Installation Guide … 「CM Tooltip Glossary」の使い方説明
- General Settings …「CM Tooltip Glossary」の一般的な設定
- Glossary Index Page …インデックスページ（用語集の索引）の設定
- Glossary Term … リンクの設定
- Tooltip … ツールチップ設定
- Upgrade … アップグレードの案内
- 変更を保存 … クリックしないと変更が反映されません
②から⑥までは下記で詳しく説明します。
設定項目を変更して画面の一番下にある「変更を保存」ボタンをクリックすると、設定が反映されます。
Installation Guide （使い方ガイド）
Installation Guideでは「CM Tooltip Glossary」の使い方の説明が詳しく書かれていて、動画での解説までついています。
ただ、英語のみですので、読まずに以下の設定方法を見ていただければOKです。
General Settings （一般的な設定）
General Settingsでは「CM Tooltip Glossary」の全体的な内容を設定します。
①Glossary Index Page ID
インデックスページに指定する固定ページを選択します。そのままでOKです。
②Glossary Terms Permalink
パーマリンクを設定します。このままでOKです。
③Highlight terms on posts?
記事に出てくる用語を強調表示するかどうかを設定します。どちらでもお好みでOKです。
④Highlight first term occurance only?
記事に出てくる最初の用語のみを強調表示するかどうかを設定します。何回も同じ言葉が出てくる記事では、その回数と同じだけツールチップが表示されたり、リンクが張られたりするのは読みにくいですよね。
⑤Only show terms on single posts/pages (not Homepage, authors etc.)?
記事以外は用語集へのリンクを禁止するかどうかを設定します。
⑥Highlight terms on pages?
チェックすることでツールチップが機能します。
⑦Terms case-sensitive?
大文字と小文字を区別するかどうかを設定します。チェックすると区別します。
Glossary Index Page（インデックスページ）
Glossary Index Pageでは、用語集インデックスページの見た目を設定します。
①Style glossary index page differently?
チェックすると、CSSクラス「glossaryLinkMain」を使ってCSSを追記することで、スタイルを変更することができます。CSSでカスタマイズしないならチェック無しでOKです。
②Tile width
インデックスページをタイル表示にした場合タイルの幅を指定します。
③Show glossary index page as tiles
インデックスページが一覧表示からタイル表示に変更します。
Glossary Term (リンクの設定）
記事の中に登録された用語が含まれている場合は用語集へのリンクが表示されますが、Glossary Termではリンクの動作の詳細を設定します。
①Remove link to the glossary term page?
用語ページへのリンクを削除し、ツールチップのみ使う場合にチェックします。
②Show HTML “title” attribute for glossary links
登録した用語の「タイトル」がツールチップとは別に表示されます。チェック無しでOKです。
③Open glossary term page in a new windows/tab?
クリックした時に、新しいウィンドウ（タブ）で用語ページを開きます。お好みで設定してください。
④Show back link on the bottom
個別の用語を説明するページから、インデックスページ（目次ページ）へ戻るリンクを表示します。
Tooltip（ツールチップの表示）
設定画面の「Tooltip」ではツールチップ（記事の本文から浮き上がるように表示される言葉の説明）の動作を設定できます。
①Show tooltip when the user hovers over the term?
ツールチップで説明を表示するかどうか設定します。
②Use term excerpt for hover?
表示される説明を、用語の「本文」として登録した言葉か、「抜粋」として登録した言葉が選択します。
ツールチップで長文が表示されると、それはそれで見にくいんですね。なので、用語解説の本文は詳しく、抜粋に概要を入力しておくと、ユーザの使い勝手や見やすさが向上します。
③Limit tooltip length?
ツールチップの長さを決めることができます。
④Clean tooltip text?
すみません、この設定項目はよくわかりません。チェックを外すと不思議な改行が入ったりしたので、チェックしておいてください。
⑤Avoid parsing protected tags?
チェックすると、Script、A、 H1、 H2、 H3、 PREなどのタグに、用語集に登録した単語が出てきた場合もハイライト表示をしません。
「CM Tooltip Glossary」プラグインの操作方法
「CM Tooltip Glossary」の操作方法は下記の通り、とてもシンプルで簡単です。
用語集を登録する
用語集を登録するには 「WordPress管理画面 > CM Tooltip Glossary > Add New」から作業します。
- Add Newから用語登録の画面へ移動
- 題名に登録したい用語を記述
- 本文の用語に対する説明文を記述
- 「下書き保存」をクリックしてパーマリンクを仮登録
- パーマリンクが日本語の場合は、適当な英語に書き換えて登録
- 「公開」ボタンをクリックして用語登録が完了
用語の説明にはクラシックエディタを使えるので、長い文章の記述や画像の挿入が簡単です。
日本語をパーマリンクとして登録すると表示に問題が起こる場合があるので、必ず英語に書き換えましょう。
用語集の確認
用語集を登録すると、プラグインのインストールと同時に作られる固定ページに一覧で表示されます。
固定ページの名前は変更できますが、初期値のままなら「Glossary」として登録されているので、「WordPress管理画面 > e固定ページの一覧」から探せば見つかるはずです。
一覧にはそれぞれリンクが張られているので、クリックすると登録された言葉の説明に移動します。
固定ページの上部に、登録された言葉を整理するインデックスがありますが、英語の語句（A – Z)には対応されているものの日本語の語句（あ – ん）には対応されていません。
用語の編集と削除
登録された言葉の編集や削除をするには、「WordPress管理画面 > CM Tooltip Glossary > Glossary」から行います。
WordPress管理画面の「投稿一覧」と同じ使い方で言葉の編集や削除ができますが、編集をクリックするとブロックエディタではなく、言葉の登録と同じクラシックエディタが起動します。
用語集を記事にリンクさせるには？
用語集に登録された言葉が記事に含まれている場合、その前後に半角スペースを入れると用語集に文字がリンクされ、リンクにカーソルを合わせると説明が浮き出して表示される「ツールチップ」が現れます。
「CM Tooltip Glossary」プラグインの注意事項
用語集や「CM Tooltip Glossary」プラグインの使い方についての注意点は下記のとおりです。
- ツールチップは長文にならないように注意
- ツールチップの使い過ぎに注意
説明が浮き出て表示されるツールチップは、長くなると記事を読む邪魔になるので、長い解説には「抜粋」を設定するか、「文字制限」をかけて簡潔にまとめましょう。
また、記事の中に同じ言葉が繰り返し出てくる場合には、全部にツールチップを設定するとかえって読みにくくなりますので、ツールチップはある程度間隔を空けて配置しましょう。
まとめ
せっかく記事を書いても読んでもらえなければ意味がありません。
「CM Tooltip Glossary」を使ってツールチップや用語集を準備すると、読者に優しいwebサイトとして認識され、読者からの評価が上がります。読者からの評価が上がれば、webサイトとしての評価も上がります。
たくさんの人に読んでもらうためにはなるべくわかりやすい言葉を使うことが大切ですが、専門的な知識を書くようなwebサイトを運用するときは、「CM Tooltip Glossary」を使ってユーザビリティ（使いやすさ・使い勝手）を向上させましょう！