前回は、「Confirm Plus Contact Form 7」を導入し、お問い合わせフォームへ送信前の確認画面を追加しました。
今回は、「CM Tooltip Glossary」というプラグインを導入し、記事に登場する専門用語へ簡単な説明を表示できるようにします。
のんびり研究所では、パソコンやWordPress、Blender、Unityなど、さまざまな分野の記事を書く予定です。
専門用語を知らない人でも途中で迷子にならないように、記事を読みながら用語の意味を確認できる仕組みを作ります。
- このシリーズについて
- CM Tooltip Glossaryとは？
- 用語集を導入する理由
- CM Tooltip Glossaryをインストールする
- セットアップウィザードが表示される
- Step 1：用語集の一覧ページと表示対象を設定する
- Step 2：用語の表示方法を設定する
- 今回の設定内容
- Step 3：互換性と読み込み方法を設定する
- Step 4：最初の用語を登録する方法を確認する
- Step 5：用語集の管理画面を確認する
- Step 6：用語集一覧ページへのリンクを確認する
- セットアップウィザード完了
- 用語を追加する画面を開く
- 最初の用語として「プラグイン」を登録する
- ツールチップ用の説明は短めにする
- 用語を公開する
- 公開済みの記事で確認する
- 用語の表示が変わっているか確認する
- 日本語の用語が一部しか反応しない問題が発生
- CM Tooltip Glossaryの設定画面を確認する
- 設定のチェックを外す
- すべての「プラグイン」が反応するようになった
- スマートフォンでツールチップの動作を確認する
- おまけ：原因が分かって興奮したノンが罰ゲーム
このシリーズについて
- 第1回：Cocoonのインストールと公開名の設定
- 第2回：パーマリンクと画像サイズを確認
- 第3回：Contact Form 7でお問い合わせフォームを作る
- 第4回：Confirm Plus Contact Form 7で確認画面を追加
- 第5回：CM Tooltip Glossaryで用語集を作る
- 第6回：カテゴリを作って、日記と神社の記事を公開する
- 第7回：Cocoonの吹き出しを作る
- 第8回：同期パターンを使って、シリーズ案内を一括管理する
- 第9回：メニューとサイドバーを設定して記事を探しやすくする
- 第10回：Google Analytics 4を設定する
- 第11回：Google Search Consoleを設定する
- 第12回：Glossary Tooltipを試したら、日本語の文章内で反応しなかった（失敗）
- 第13回は未定です。
※実際の作業量によって、記事数や各回の内容を変更する場合があります。
CM Tooltip Glossaryとは？
CM Tooltip Glossaryは、WordPressへ用語集を追加できるプラグインです。
あらかじめ用語と説明を登録しておくと、投稿や固定ページに同じ言葉が登場したとき、その言葉を自動的に見つけて表示を変えてくれます。
パソコンでは、対象となる用語へマウスポインターを重ねることで、簡単な説明を表示できます。
用語をクリックすると、その用語について詳しく説明した個別ページを開ける場合もあります。
Tooltip（ツールチップ）とは？
ツールチップとは、文字やボタンなどへマウスポインターを重ねたときに表示される、小さな説明のことです。
画面を移動せず、その場所で簡単な補足を確認できるのが特徴です。
用語集を導入する理由
専門的な記事では、説明の途中に知らない言葉が登場することがあります。
例えば、「プラグイン」という言葉を知らない人がWordPressの記事を読んだ場合、その言葉が出るたびに別のサイトで意味を調べなければならないかもしれません。
しかし、記事の中ですべての専門用語を毎回詳しく説明すると、本文が長くなり、すでに意味を知っている人には読みにくくなることがあります。
そこで、本文では通常どおり「プラグイン」と書き、意味を知りたい人だけがツールチップや用語ページを確認できる仕組みにします。
のんびり研究所の用語集方針
最初から、すべての用語を登録する必要はありません。
記事を書きながら、「初めて読む人には分かりにくいかもしれない」と感じた言葉を、少しずつ追加していきます。
まずは知識の「点」を増やし、別の記事を読んだときに点と点がつながる用語集を目指します。
CM Tooltip Glossaryをインストールする
WordPress管理画面から、次の順番で進みます。
検索欄へ、次のプラグイン名を入力します。
CM Tooltip Glossary
検索結果に表示されたプラグインの名前と作者「CreativeMindsSolutions」を確認し、「今すぐインストール」をクリックします。
インストールが完了したら、そのまま「有効化」をクリックします。
プラグインの基本的な追加方法
プラグインの検索、インストール、有効化については、第3回のContact Form 7の記事で詳しく説明しています。
操作方法が分からない場合は、第3回の記事も参考にしてください。
セットアップウィザードが表示される
プラグインを有効化すると、「Welcome to the Glossary Setup Wizard」という画面が表示されました。
この画面では、初期設定を順番に案内してくれます。
画面下には、次の2つのボタンがあります。
- Start
- Skip the setup wizard
今回は、実際にどのような設定があるのか確認するため、「Start」をクリックして進めます。
Step 1：用語集の一覧ページと表示対象を設定する
「Start」をクリックすると、セットアップウィザードのStep 1が表示されました。
この画面では、主に次の3つを設定します。
- 用語集の一覧ページを作成するか
- 用語を一覧ページでどのように表示するか
- どの種類のページで用語を自動検出するか
今回は、基本的に初期設定のまま進めます。
用語集の一覧ページを作成する
最初の項目は、次の設定です。
Create an Index Glossary Page?
これは、登録した用語をまとめて表示する「用語集の一覧ページ」を自動で作成するかどうかを決める設定です。
今回は、スイッチをONのままにします。
一覧ページがあると、サイト内にどのような用語が登録されているのかを、読者がまとめて確認できます。
例えば、将来的には次のような用語を一覧から探せるようになります。
のんびり研究所ではONにします
のんびり研究所では、用語集を単なる補足機能ではなく、初心者が知識の「点」を集めるための場所として使いたいと考えています。
そのため、登録した用語をまとめて確認できる一覧ページを作成します。
一覧ページの表示方法を選ぶ
次の項目は、用語集の一覧ページで、登録した用語をどのように表示するかを選ぶ設定です。
How should terms be displayed on the index page?
次の2つから選択できます。
- List
- Tiles
List
Listは、登録した用語を一覧形式で縦に並べて表示する方法です。
用語数が増えても探しやすく、辞書や索引に近い見た目になります。
Tiles
Tilesは、用語をタイル状の枠に分けて表示する方法です。
見た目に変化を付けやすい一方で、用語数が多くなると一覧が縦に長くなる場合があります。
今回は、シンプルで用語を探しやすい「List」を選択したまま進めます。
一覧ページの見た目は後から変更できるため、最初から迷いすぎる必要はありません。
用語を自動検出するページを選ぶ
続いて、用語集へ登録した言葉を、どの種類のページで自動検出するかを設定します。
Select the post types where you want to highlight glossary terms.
今回の画面には、次の項目が表示されました。
- 投稿
- 固定ページ
- メディア
- Glossary Item
投稿
「投稿」は、通常のブログ記事や解説記事です。
ここにチェックを入れると、公開した記事の本文に登録済みの用語が登場した場合、その用語が自動的に検出されます。
のんびり研究所では、WordPress、Blender、Unity、パソコン関連の記事の中で用語を表示したいため、チェックを入れたままにします。
固定ページ
「固定ページ」は、お問い合わせ、プロフィール、プライバシーポリシーなど、独立したページを作るときに使用します。
固定ページの中でも専門用語を使用する可能性があるため、今回はチェックを入れたままにします。
メディア
「メディア」は、WordPressへアップロードした画像などに作成される添付ファイルページを指します。
通常のサイト運営では、メディアページの本文で用語集を使用する機会は少ないと思われます。
今回はチェックを外したままにします。
Glossary Item
「Glossary Item」は、このプラグインで登録する用語そのものを管理するための専用ページです。
CM Tooltip Glossaryでは、通常の記事とは別に、用語集専用の投稿形式が追加されます。
用語の説明文の中に別の登録用語が登場した場合、その言葉にも説明を付けられる可能性があります。
例えば、「プラグイン」の説明の中に「WordPress」という登録済み用語が登場した場合、「WordPress」にも用語の説明を表示できるようになります。
知識同士をつなげる使い方ができるため、今回はチェックを入れたままにします。
Glossary Itemは用語集専用の投稿形式
WordPressでは、通常の「投稿」や「固定ページ」とは別に、プラグインが専用の投稿形式を追加することがあります。
CM Tooltip Glossaryでは、それが「Glossary Item」です。
通常の記事と用語集を分けて管理できるため、記事一覧の中に用語ページが混ざりにくくなります。
今回の設定内容
Step 1では、次の状態にしました。
- 用語集の一覧ページを作成：ON
- 一覧ページの表示形式：List
- 投稿：チェックあり
- 固定ページ：チェックあり
- メディア：チェックなし
- Glossary Item：チェックあり
設定内容を確認したら、画面右下の「Next」をクリックします。
この画面で選んだ内容は、セットアップ完了後に設定画面から変更できます。最初から完璧な表示方法を決める必要はありません。まずは初期設定に近い状態で動作を確認し、実際に使いながら必要な部分だけ調整します。
Step 2：用語の表示方法を設定する
続いて、Step 2「Terms Settings」が表示されました。
この画面では、記事の中で見つけた用語を、どのように表示するかを設定します。
今回は、初期設定のまま進めます。
Add links to highlighted terms
Add links to highlighted terms?
この項目をONにすると、記事内で見つけた用語へリンクが付きます。
読者が用語をクリックすると、その用語の詳しい説明ページを開けるようになります。
今回はONのまま使用します。
のんびり研究所ではONにします
短い説明だけでは理解しきれない場合でも、クリックして詳しい解説ページを読めるためです。
Show tooltips
Show tooltips?
この項目をONにすると、パソコンでは用語へマウスポインターを重ねたとき、簡単な説明（ツールチップ）が表示されます。
今回の用語集で一番使いたかった機能なので、このままONにします。
Tooltip（ツールチップ）とは？
文字へマウスポインターを重ねたときに表示される、小さな説明欄です。
記事を読む流れを止めず、その場で意味を確認できます。
Should terms be case-sensitive?
Should terms be case-sensitive?
これは、大文字・小文字を区別するかどうかを決める設定です。
例えば、
- WordPress
- wordpress
- WORDPRESS
これらを同じ言葉として扱うかどうかを設定できます。
今回は初期設定どおりOFFのまま進めます。
OFFがおすすめな理由
英単語は、大文字・小文字の違いだけで同じ意味になることが多いためです。
OFFなら、多少表記が違っても同じ用語として見つけてくれます。
今回の設定内容
- 用語へリンクを付ける：ON
- ツールチップを表示する：ON
- 大文字・小文字を区別する：OFF
確認したら、「Next」をクリックして次へ進みます。
Step 3：互換性と読み込み方法を設定する
続いて、Step 3「Compatibility」が表示されました。
この画面では、ツールチップの内容やプログラムを、ページのどこで読み込むかを設定します。
少し専門的な項目ですが、通常は初期設定のままで問題ありません。
今回は、画面に表示された初期設定を変更せずに進めます。
Move tooltip contents to footer?
最初の項目は、次の設定です。
Move tooltip contents to footer?
これは、ツールチップとして表示する説明内容を、ページ下部のフッター側へ移動して出力するかを決める設定です。
通常は、用語がある場所の近くにツールチップ用の情報が出力されます。
この設定をONにすると、ツールチップ用の内容をページ下部へまとめて出力します。
ページ作成プラグインや、特殊なテーマを使用している場合に、ツールチップがレイアウトを崩す問題を改善できることがあります。
今回は初期設定どおり、OFFのまま進めます。
問題が起きたときに試す設定
この項目は、最初から必ずONにする設定ではありません。
用語を登録した後に、次のような問題が発生した場合に変更を検討します。
問題がなければ、OFFのままで大丈夫です。
Load the scripts in footer?
次の項目は、次の設定です。
Load the scripts in footer?
これは、ツールチップを動かすためのJavaScriptやCSSを、ページ下部のフッター側で読み込むかを決める設定です。
JavaScriptは、Webページに動きや操作機能を追加するために使われる仕組みです。
CSSは、文字の色、大きさ、配置など、ページの見た目を調整するために使われます。
これらをページ下部で読み込むことで、記事本文などの表示を先に進めやすくなり、最初の表示速度が改善する場合があります。
今回は初期設定どおり、ONのまま進めます。
フッターとは？
フッターは、Webページの一番下にある部分です。
著作権表示、サイト内リンク、運営者情報などが配置されることがあります。
この設定でいう「フッターで読み込む」は、画面上に何かを表示するというより、プログラムをページの後半で読み込むという意味です。
ツールチップが動かない場合
ページ下部でプログラムを読み込む設定は、表示速度の面では有利な場合があります。
ただし、使用しているテーマや別のプラグインとの組み合わせによっては、次のような問題が発生することがあります。
- 用語には下線が付くが、説明が表示されない
- ツールチップのデザインが崩れる
- ブラウザーの開発者画面にエラーが表示される
その場合は、この項目をOFFにして動作を確認します。
Show tooltips on AMP pages?
最後の項目は、次の設定です。
Show tooltips on AMP pages?
これは、AMP形式のページでもツールチップを表示するかを決める設定です。
AMPは、主にスマートフォンでWebページを高速に表示するために作られたページ形式です。
通常のWordPressページとは一部の仕組みが異なるため、プラグインの機能がそのまま動作しない場合があります。
のんびり研究所では、現時点でAMPページを使用していません。
そのため、初期設定どおりOFFのまま進めます。
AMPを使っていなければOFFで大丈夫です
AMP対応のプラグインを導入しておらず、AMP用ページを作成していない場合、この設定は使用しません。
将来AMPを導入した場合は、その時点でツールチップが正常に表示されるかを確認してから設定します。
今回の設定内容
Step 3では、次の状態にしました。
設定を確認したら、画面右下の「Next」をクリックします。
基本は初期設定のままで進めます
Step 3の項目は、テーマや別のプラグインとの互換性に関する設定です。
最初から変更するのではなく、まず初期設定で用語集を動かします。
ツールチップが表示されない、レイアウトが崩れるなどの問題が起きた場合に、この記事を見ながら設定を見直します。
スマートフォンではどう表示される？
パソコンでは、用語へマウスポインターを重ねることでツールチップを表示できます。
しかし、スマートフォンやタブレットにはマウスポインターがありません。
CM Tooltip Glossaryはタッチ操作のある端末を判定し、スマートフォンでは用語をタップしてツールチップを表示する仕組みに対応しています。
ただし、無料版と有料版では利用できるモバイル設定が異なるほか、プラグインのバージョンや設定によって、タップしたときの動作が異なる可能性があります。
用語を登録した後に、実際のスマートフォンで次の項目を確認します。
- 用語をタップすると説明が表示されるか
- 説明を閉じることができるか
- 用語の詳しいページへ移動できるか
- 画面の外にはみ出さずに表示されるか
- 記事をスクロールするときに邪魔にならないか
パソコンで正しく表示されても、スマートフォンでは操作感が異なります。
そのため、用語集の設定が完了したら、必ず両方の端末で確認します。
Step 4：最初の用語を登録する方法を確認する
続いて、Step 4「Add First Term」が表示されました。
この画面では、用語集へ新しい用語を登録する基本的な手順が案内されています。
Step 4の画面上で直接用語を入力するのではなく、セットアップウィザードの完了後に、WordPress管理画面から用語を追加します。
画面には、次の手順が表示されています。
- プラグインのメニューから「Add New」を開く
- 用語の名前を入力する
- 用語の説明を入力する
- 必要に応じてアイキャッチ画像を設定する
- 「公開」をクリックする
「Add New」から用語を追加する
セットアップが完了すると、WordPress管理画面の左側に、CM Tooltip Glossaryのメニューが追加されます。
その中にある「Add New」をクリックすると、新しい用語を登録できます。
日本語で表示される環境では、「新規追加」などの名前になっている場合があります。
画面名が英語の場合があります
CM Tooltip Glossaryの管理画面は、一部が日本語へ翻訳されず、英語のまま表示されることがあります。
「Add New」は、「新しく追加する」という意味です。
用語の名前を入力する
用語の追加画面を開いたら、タイトル欄へ登録したい言葉を入力します。
今回は、最初の動作確認として次の言葉を登録する予定です。
ここで入力したタイトルと同じ文字が投稿や固定ページに登場すると、CM Tooltip Glossaryが用語として検出します。
記事内の表記と一致させます
例えば、用語集へ「プラグイン」と登録した場合、記事内の「プラグイン」という文字が対象になります。
英語の「Plugin」や、別の表記である「追加機能」などは、同じ言葉として自動的に認識されない場合があります。
別の表記も対象にしたい場合は、同義語や別名に関する設定が必要になることがあります。
用語の説明を入力する
本文の入力欄には、その用語の意味や使い方を入力します。
今回は、「プラグイン」の説明として、次の文章を使用する予定です。
WordPressなどのソフトウェアへ、新しい機能を追加するための部品です。お問い合わせフォーム、セキュリティー対策、用語集など、さまざまな機能を追加できます。
この説明は、用語の個別ページに表示されます。
また、設定によっては、文章の一部または全文がツールチップにも表示されます。
最初の文章だけでも意味が分かるようにしたい
ツールチップは小さな説明欄として表示されるため、説明が長すぎると読みにくくなる場合があります。
最初の1文で簡単な意味を伝え、その後に使用例や詳しい説明を追加すると、ツールチップと個別ページの両方で使いやすくなります。
アイキャッチ画像は必要に応じて設定する
Step 4の説明では、必要に応じてアイキャッチ画像を設定できることも案内されています。
アイキャッチ画像は、記事や用語ページを代表する画像です。
用語ごとに画像を用意すると、個別ページを見たときに内容をイメージしやすくなる場合があります。
ただし、すべての用語へ画像を用意すると、画像作成や管理の作業が増えます。
今回は、まず用語集の動作を確認することが目的なので、最初の「プラグイン」にはアイキャッチ画像を設定せずに進めます。
画像は後から追加できます
用語を公開した後でも、編集画面からアイキャッチ画像を追加できます。
最初からすべてを完成させようとせず、必要になった用語から画像を追加していきます。
最後に「公開」をクリックする
用語名と説明を入力したら、「公開」をクリックします。
用語が下書きのままでは、投稿や固定ページの中から検出されない場合があります。
記事内でツールチップを表示するためには、用語が公開済みになっていることを確認します。
通常の記事とは別に管理される
CM Tooltip Glossaryで登録した用語は、通常の「投稿」とは別の用語集専用画面で管理されます。
そのため、ブログ記事の一覧に「プラグイン」「拡張子」「パーマリンク」などの用語ページが混ざりにくくなっています。
通常の記事と用語集を分けて管理できるため、用語が増えても整理しやすい仕組みです。
用語集を少しずつ育てます
最初から大量の用語を登録する必要はありません。
記事を書いている途中で、「この言葉は初めての人には分かりにくいかもしれない」と感じたときに、1つずつ追加していきます。
記事と用語集を一緒に増やすことで、過去の記事にも少しずつ説明が追加されていきます。
今回の画面では設定変更を行わない
Step 4は、用語の登録方法を説明する案内画面です。
この画面には設定を変更するスイッチや入力欄はありません。
内容を確認したら、画面右下の「Next」をクリックします。
実際の用語登録は、セットアップウィザードが終了した後に行います。
Step 5：用語集の管理画面を確認する
続いて、Step 5「Glossary Dashboard」が表示されました。
この画面では、登録した用語を一覧で管理できる場所が案内されています。
セットアップが完了すると、WordPress管理画面の左側に追加されたCM Tooltip Glossaryのメニューから、用語一覧を開けるようになります。
画面上では、次のメニューが示されています。
CM Tooltip Glossary → Glossary
日本語化の状態によっては、「Glossary」が「用語集」などと表示される場合があります。
登録した用語を一覧で確認できる
Glossaryの管理画面には、これまでに登録した用語が一覧で表示されます。
通常の投稿一覧と同じように、用語名、公開状態、公開日などを確認できます。
用語が増えた場合でも、この一覧から目的の用語を探して編集できます。
通常の記事とは別の一覧です
CM Tooltip Glossaryで登録した用語は、通常の「投稿」一覧には表示されません。
用語集専用の「Glossary」画面で管理します。
そのため、通常の記事と用語の説明ページが混ざらず、整理しやすくなっています。
用語名をクリックして編集する
一覧に表示された用語名をクリックすると、その用語の編集画面を開けます。
説明を詳しくしたい場合や、誤字を修正したい場合は、ここから編集します。
例えば、最初は短い説明だけを登録し、後から次の内容を追加することもできます。
- より詳しい説明
- 具体的な使用例
- 関連する用語
- 関連記事へのリンク
- 説明用の画像
用語を公開した後でも、通常の記事と同じように内容を修正できます。
新しい用語を追加する
新しい用語を追加する場合は、CM Tooltip Glossaryのメニューにある「Add New」をクリックします。
管理画面上部にある「Add Glossary Item」などのボタンから追加できる場合もあります。
日本語表示では、「新規追加」と表示されることがあります。
用語を追加するときは、次の流れで進めます。
- 用語名を入力する
- 用語の説明を入力する
- 必要に応じて画像などを追加する
- 公開する
検索や絞り込みを利用できる
登録する用語が増えると、一覧から目的の用語を探すのが大変になることがあります。
Glossaryの管理画面では、検索欄や公開状態による絞り込みを利用できます。
例えば、「プラグイン」という用語を探したい場合は、検索欄へ用語名を入力して検索できます。
また、下書きの用語だけを表示したり、公開済みの用語だけを確認したりできる場合があります。
用語が増えても一か所で管理できます
今後、WordPress、Blender、Unity、パソコンなどの用語が増えても、Glossaryの管理画面からまとめて確認できます。
記事ごとに説明を書き直す必要はなく、用語ページの説明を修正すれば、ツールチップや個別ページへ反映されます。
用語の削除には注意する
不要になった用語は、一覧からゴミ箱へ移動できます。
ただし、その用語を削除すると、投稿や固定ページ内で表示されていたツールチップやリンクも表示されなくなります。
一時的に公開を止めたい場合は、すぐに削除せず、下書きへ戻す方法もあります。
削除前に使用状況を確認します
用語を削除する前に、その言葉を使用している記事がないか確認した方が安全です。
説明内容を変更したいだけであれば、削除せずに編集します。
用語集は記事と一緒に成長させる
用語集は、最初にすべて完成させるものではありません。
記事を書きながら、説明が必要だと感じた言葉を少しずつ登録します。
登録後に説明を追加したり、関連記事へのリンクを増やしたりすることで、用語ページを徐々に充実させられます。
のんびり研究所では、用語の意味を短く知るだけでなく、関連する記事や別の用語へ進める場所として育てていく予定です。
用語ページを知識の中継地点にする
例えば、「プラグイン」の用語ページから、Contact Form 7やCM Tooltip Glossaryの記事へ進めるようにします。
さらに、「WordPress」「テーマ」「セキュリティー」などの関連用語へつなげることで、知識の点と点を結ぶ場所として使えます。
今回の画面では設定変更を行わない
Step 5は、用語集の管理画面を紹介する案内です。
この画面で変更する設定はありません。
内容を確認したら、画面右下の「Next」をクリックします。
次のStep 6では、作成した用語集の一覧ページへ移動するためのリンクについて確認します。
Step 6：用語集一覧ページへのリンクを確認する
最後に、Step 6「Glossary Index Link」が表示されました。
この画面では、用語集一覧ページへのリンクをどこで確認できるかが案内されています。
セットアップが完了した後でも、CM Tooltip Glossaryの設定画面から、現在の用語集ページのURLを確認できます。
画面では、次の場所が示されています。
CM Tooltip Glossary → Settings
設定画面を開くと、現在のGlossaryページへのリンクが表示されます。
このURLを開くことで、登録した用語を一覧表示できます。
URLは後から確認できます
セットアップ中にメモを取らなくても大丈夫です。
用語集ページへのリンクは、後から設定画面でいつでも確認できます。
用語集ページは記事とは別に存在する
Glossaryページは、通常の投稿一覧とは別に作成されます。
ここでは、登録した用語だけを一覧表示できます。
読者は、記事を読んでいる途中だけでなく、用語集ページから知りたい言葉を探すこともできます。
のんびり研究所では辞書として育てます
このページは、記事のおまけではありません。
WordPress、Blender、Unity、パソコンなど、サイト全体で使用する専門用語をまとめた辞書として育てていく予定です。
記事を読む前に調べることも、記事を読んだ後に復習することもできます。
セットアップウィザード完了
ここまでで、CM Tooltip Glossaryのセットアップウィザードは終了です。
「Finish」をクリックしてセットアップを完了します。
まだ用語集は完成していません
セットアップが終わっただけでは、記事の中へ説明は表示されません。
次は実際に「プラグイン」という用語を登録し、投稿や固定ページでツールチップが表示されるか確認します。
用語を追加する画面を開く
WordPress管理画面の左側に追加された、用語集のメニューを確認します。
メニュー名は、プラグインのバージョンや日本語訳によって異なる場合があります。
「CM Tooltip Glossary」「Glossary」「用語集」などと表示されている項目を開きます。
続いて、新しい用語を追加する項目をクリックします。
最初の用語として「プラグイン」を登録する
今回は、最初の用語として次の言葉を登録します。
用語の新規追加画面を開き、タイトル欄へ「プラグイン」と入力します。
本文には、その用語についての説明を入力します。
今回は、次のような説明を入力します。
WordPressなどのソフトウェアへ、新しい機能を追加するための部品です。お問い合わせフォーム、セキュリティー対策、用語集など、さまざまな機能を追加できます。
ツールチップ用の説明は短めにする
用語の説明は、長く書くこともできます。
ただし、マウスポインターを重ねたときに表示する説明が長すぎると、ツールチップが画面の大部分を覆ってしまう可能性があります。
最初の1段落だけでも、おおよその意味が分かる文章にしておくと読みやすくなります。
用語説明の基本構成
- 最初の1文：簡単な意味
- 次の文章：使用例や補足
- 必要な場合：詳しい説明や関連記事へのリンク
将来、より詳しい用語ページを作る場合は、本文の続きを追加していきます。
用語を公開する
タイトルと説明を入力したら、画面右上にある「公開」をクリックします。
確認画面が表示された場合は、もう一度「公開」をクリックします。
「プラグイン」という用語が公開されたら、用語の登録は完了です。
公開済みの記事で確認する
用語を登録したら、すでに「プラグイン」という言葉を使用している記事を開きます。
今回は、次の記事で確認できます。
- 第3回：Contact Form 7でお問い合わせフォームを作る
- 第4回：Confirm Plus Contact Form 7で確認画面を追加
WordPressへログインした状態で記事を表示している場合は、一度ページを再読み込みします。
用語の表示が変わっているか確認する
記事本文にある「プラグイン」という文字を確認します。
CM Tooltip Glossaryが正しく動作している場合、通常の文字とは異なる表示になります。
下線、点線、文字色、リンクなど、実際の表示方法は設定やデザインによって異なります。
同じ記事内に「プラグイン」が複数回登場する場合、すべての箇所へ反映されるとは限りません。
初期設定や無料版の制限によって、最初に登場した用語だけが対象になる場合があります。
日本語の用語が一部しか反応しない問題が発生
「プラグイン」という用語を登録し、過去の記事でツールチップが表示されるか確認しました。
第3回の記事には、「プラグイン」という文字が約40回登場します。
ところが、実際に用語として反応したのは3か所だけでした。最初は、無料版では表示回数に制限があるのか、太字や文章の構造によって反応しないのかと考えました。
しかし、反応した場所には規則性がなく、記事の途中にある「プラグイン」だけが用語として表示されていました。
今回の症状
- 記事内に「プラグイン」が約40回ある
- 用語として反応したのは3か所だけ
- 太字だから反応する、という規則ではなかった
- 文章の最初にある用語だけが反応するわけでもなかった
CM Tooltip Glossaryの設定画面を確認する
原因を調べるため、CM Tooltip Glossaryの設定画面を開きました。
WordPress管理画面から、次の順番で進みます。
CM Tooltip Glossary → Settings → General Settings
(Settingsの画面で登録画面が出る場合がありますが、SKIPで次に進めます)
設定画面の「Term highlighting」という項目の中に、次の設定がありました。
Highlight only space separated terms?
初期状態では、この項目にチェックが入っていました。
Highlight only space separated termsとは？
直訳すると、「スペースで区切られた用語だけを強調する」という意味です。英語では、単語と単語の間にスペースがあります。
例えば、次の文章では「plugin」という単語の前後がスペースで区切られています。
Install the plugin now.
しかし、日本語では単語の間に通常スペースを入れません。例えば、記事内では次のように使われます。
「プラグイン」の直後に助詞や句読点が続くため、英語のようにスペースで区切られていません。
この設定がONになっていたことで、日本語の用語が正しく検出されず、一部だけ反応していた可能性があります。
日本語サイトでは注意が必要な設定です
英語向けには便利な設定でも、日本語では単語の間にスペースがないため、用語が正しく検出されない場合があります。
設定のチェックを外す
「Highlight only space separated terms?」のチェックを外しました。
設定を変更したら、画面下部の「Save Changes」をクリックします。
保存後、第3回の記事を再読み込みしました。
すべての「プラグイン」が反応するようになった
記事を再確認したところ、これまで反応していなかった「プラグイン」にも、ツールチップ用の表示が付きました。約40回登場していた「プラグイン」が、正常に用語として検出されるようになりました。
原因はこの設定でした
今回の原因は、「Highlight only space separated terms?」がONになっていたことでした。
日本語の用語を登録する場合は、この項目をOFFにすることで改善しました。
今回変更した設定
- Highlight only space separated terms?：OFF
ほかの設定は変更していません。
複数の設定を同時に変更すると、どの設定が原因だったのか分からなくなるため、今回は1項目ずつ確認しました。
設定は1つずつ変更します
不具合を確認するときは、複数の設定をまとめて変更せず、1つ変更するたびに動作を確認した方が原因を特定しやすくなります。
スマートフォンでツールチップの動作を確認する
パソコンでの動作確認が終わったので、スマートフォンでも用語集の表示を確認しました。
スマートフォンにはマウスポインターがないため、パソコンのように用語へマウスポインターを重ねることはできません。
実際に「プラグイン」という用語をタップしたところ、ツールチップが表示されました。
ツールチップには「×」ボタンがあり、タップすると説明を閉じることができました。
また、ツールチップを閉じずに画面を下へスクロールし、別の「プラグイン」をタップした場合も、その場所に新しいツールチップが表示されました。
今回確認した範囲では、ツールチップが画面の外にはみ出したり、記事のレイアウトが崩れたりする問題はありませんでした。
スマートフォンから用語ページを開く
スマートフォンでは、用語を通常どおりタップするとツールチップが表示されました。
用語の詳しいページへ移動する場合は、用語を長押ししてリンクを開きます。
パソコンとスマートフォンでは操作方法が異なるため、用語集を導入した後は両方の端末で確認した方が安心です。
スマートフォンで確認できたこと
- 用語をタップするとツールチップが表示される
- 「×」ボタンでツールチップを閉じられる
- ツールチップを表示したまま記事をスクロールできる
- 別の用語をタップすると、その用語のツールチップが表示される
- 長押しで用語の詳しいページを開ける
- 画面のはみ出しやレイアウト崩れは確認されなかった
おまけ：原因が分かって興奮したノンが罰ゲーム
今回の原因が「Highlight only space separated terms?」だと分かったとき、ノンが興奮しすぎて、一人称を何度も「俺」と言ってしまいました。
のんびり研究所では、ノンの一人称は「私」と決めています。
そのため、研究所内ルールにより罰ゲームとなりました。
本人は反省しているようです。
たぶん。
今回の教訓
設定の原因が分かっても、興奮しすぎず、一人称と変更前の設定を確認しましょう。
次回は、作成したカテゴリをサイドバーやメニューへ表示し、読者が記事を探しやすいサイトに整えていきます。
