第12回のんびり研究所構築日記｜Glossary Tooltipを試したら、日本語の文章内で反応しなかった（失敗）

このシリーズについて

第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回は未定です。

※実際の作業量によって、記事数や各回の内容を変更する場合があります。

第5回の記事では、「CM Tooltip Glossary」というプラグインを使って、専門用語へツールチップを表示できるようにしました。

ツールチップを設定しておくと、記事内に分かりにくい専門用語が登場したとき、マウスを重ねたり、スマートフォンでタップしたりすることで、用語の簡単な説明を確認できます。

実際に使ってみると便利だったのですが、無料版では利用できない機能もありました。

そこで今回は、現在登録している用語を一度退避させてから、別の無料ツールチッププラグインを試してみます。

新しいプラグインが使いやすければ、そのまま用語を移行します。

使いにくかった場合は、以前のプラグインへ戻せるように、いきなり削除せず、安全に比較しながら進めます。

きょろぽん

新しいプラグインへ乗り換えるなら、今のプラグインを削除してから入れればいいのかな？

ノン

いきなり削除するのは危険だよ。新しいプラグインが合わなかったときに戻せるよう、最初は無効化だけにしておこう。

この記事は、以前使用していたツールチッププラグインから、別の無料プラグインへの移行を試した記録です。

CM Tooltip Glossaryを使ってツールチップを作成する方法は、「第5回：CM Tooltip Glossaryで用語集を作る」をご覧ください。

今回行うこと

現在登録している用語と説明文を確認する
登録内容をメモ帳などへ退避する
現在のツールチッププラグインを無効化する
新しいツールチッププラグインをインストールする
テスト用として「プリミティブ」を1件だけ登録する
記事内のツールチップ表示を確認する
用語集一覧ページを確認する
パソコンとスマートフォンで動作を確認する
問題がなければ残りの用語を移行する

この記事を作成した時点のWordPress、テーマ、プラグインのバージョンを使用しています。

バージョンによって、画面の表示、設定項目、ボタンの位置などが異なる場合があります。

現在使用しているツールチップを確認する

現在、のんびり研究所では「CM Tooltip Glossary」を使って、記事内の専門用語へツールチップを表示しています。

登録している用語は、WordPressの管理画面から確認できます。

WordPressの管理画面を開きます。

左側のメニューから、現在使用しているツールチッププラグインの用語一覧を開きます。

今回は、次の用語が登録されています。

登録済みの用語を退避する

新しいプラグインを試す前に、現在登録している用語と説明文を別の場所へ保存しておきます。

CM Tooltip Glossaryの無料版では、登録した用語をまとめて書き出すエクスポート機能を利用できません。

そのため、今回は用語と説明文を一つずつコピーします。

きょろぽん

全部手作業でコピーするの？

ノン

今回はまだ12件だから、今のうちに退避しておこう。100件登録してから気付いたら大変だよ。

メモ帳を開く

今回はWindowsのメモ帳を使います。

ExcelやWordなどへ保存しても構いません。

用語と説明文の対応が分かる形で保存できれば、使用するアプリは自由です。

用語と説明文をコピーする

ツールチップの用語一覧から、最初の用語を開きます。

用語名と説明文を選択し、コピーします。

キーボードでコピーする場合は、コピーしたい文字を選択してから、Ctrl＋Cを押します。

コピーした内容をメモ帳へ貼り付けます。

貼り付ける場合は、メモ帳をクリックしてから、Ctrl＋Vを押します。

次のように、用語と説明文が分かる形で保存しておきます。

用語：プリミティブ

説明：
立方体、球、円柱など、Blenderで最初から用意されている基本的な形状です。

--------------------

用語：モデリング

説明：
3D空間で、立体的な形を作る作業です。

スラッグや補足情報も必要な場合は、用語と説明文と一緒に保存しておきます。

同じ方法で、現在登録されている用語をすべてコピーします。

メモ帳のファイルを保存する

すべての用語をコピーしたら、メモ帳のファイルを保存します。

メニューから「ファイル」をクリックし、「名前を付けて保存」をクリックします。

保存場所を選択し、分かりやすいファイル名を付けます。

今回は、次のような名前で保存しました。

CM-Tooltip-Glossary登録内容.txt

新しいプラグインへの移行が完了するまで、退避したファイルは削除しないでください。

現在のツールチップ プラグインを無効化する

登録内容の退避が終わったら、現在使用しているツールチッププラグインを無効化します。

今回は、すぐに元へ戻せるように、プラグインの削除は行いません。

WordPress管理画面の左側メニューから、「プラグイン」をクリックします。

続けて、「インストール済みプラグイン」をクリックします。

プラグイン一覧から「CM Tooltip Glossary」を探します。

「無効化」をクリックします。

ウインドウが出てきますが、これはフィードバックはありませんか？と言われてるもので、特になければフィードバック欄のチェックを外し、「Deactivate」をクリックします。

プラグイン名の下に「有効化」と表示されれば、無効化は完了です。

無効化しただけでは、通常はプラグイン本体や登録データは削除されません。

新しいプラグインが合わなかった場合は、CM Tooltip Glossaryを再び有効化して元へ戻します。

新しいツールチップ プラグインをインストールする

現在のプラグインを無効化したら、新しいツールチッププラグインをインストールします。

WordPress管理画面の左側メニューから、「プラグイン」をクリックします。

続けて、「新規プラグインを追加」をクリックします。

画面右上の検索欄へ、次のプラグイン名を入力します。

Glossary Tooltip

検索結果が表示されたら、プラグイン名と作者を確認します。

似た名前のプラグインが表示される場合があります。

インストールする前に、プラグイン名、作者、説明、最終更新日、対応しているWordPressのバージョンなどを確認してください。

目的のプラグインに表示されている「今すぐインストール」をクリックし、有効化まで終わらせてください。

新しいプラグインの基本設定を確認する

プラグインを有効化すると、WordPress管理画面の左側メニューや「設定」の中に、新しい項目が追加されます。

追加されたメニューをクリックし、設定画面（General Settings）を開きます。

設定項目は多いため、今回はツールチップと用語集を使ううえで、特に確認しておきたい項目へ絞って紹介します。

初期設定のまま使用する項目や、高度な調整項目は省略します。

設定項目の名称や初期値は、プラグインやバージョンによって異なる場合があります。

Posts to highlight

ツールチップを表示する投稿タイプを選択します。

設定画面では、次の項目を選択できます。

投稿
固定ページ
メディア
Glossary Term

今回は、通常の記事内で専門用語を説明するため、「投稿」だけを選択しました。

固定ページ、メディア、Glossary Termでは、ツールチップを表示しない設定にします。

固定ページでもツールチップを使いたい場合は、「固定ページ」も選択できます。

今回は、プロフィールやお問い合わせページなどで意図しない用語へ反応するのを避けるため、投稿だけにしました。

Repeated highlighting

同じページ内に同じ用語が複数回登場した場合、ツールチップを何回表示するか設定します。

次のような表示方法を選択できます。

最初に登場した1か所だけ表示する
指定した回数まで表示する
指定した間隔で表示する
登場するすべての箇所へ表示する

今回は、同じ用語へ何度もツールチップが表示されて記事が読みにくくなるのを避けるため、「最初に登場した1か所だけ表示する」を選択しました。

同じ用語が長い記事の前半と後半に登場する場合は、表示回数を増やす方法もあります。

まずは1か所だけで使用し、実際の記事を見ながら必要に応じて変更します。

Highlight only on single posts & pages

ツールチップの表示を、投稿や固定ページの個別ページだけに限定する設定です。

有効にすると、トップページ、カテゴリ一覧、タグ一覧、アーカイブページなどではツールチップが表示されなくなります。

今回は、記事一覧やトップページで意図しない反応が起きるのを避けるため、この項目を有効にしました。

Highlight only space-separated terms

空白や記号で区切られた用語だけを、ツールチップの対象にする設定です。

英語では単語と単語の間に空白が入るため便利な場合がありますが、日本語の文章では通常、単語の間に空白を入れません。

この設定を有効にすると、日本語の文章内にある「プリミティブ」や「モデリング」などの用語が反応しない可能性があります。

今回は、日本語の記事内でも用語を認識できるよう、この項目は無効のままにしました。

日本語の用語が登録されているのにツールチップが表示されない場合は、この設定が有効になっていないか確認してください。

Match case-sensitive terms

登録した用語の大文字と小文字を区別する設定です。

有効にすると、例えば「SEO」と「seo」は別の文字として扱われます。

今回は、英字の大文字と小文字が異なっても反応できるよう、この項目は無効のままにしました。

Ignore headings

見出し内にある用語を、ツールチップの対象から除外する設定です。

見出しは記事の内容を整理する大切な部分です。

見出し内の文字へツールチップが付くと、見出しが読みにくくなったり、デザインが崩れたりする可能性があります。

今回は、本文内の用語だけにツールチップを表示するため、この項目を有効にしました。

Ignore links（<a> tags）

すでにリンクが設定されている文字を、ツールチップの対象から除外します。

リンク文字へさらにツールチップが重なると、クリックやタップの動作が分かりにくくなる可能性があります。

今回は、既存のリンクとツールチップが重ならないよう、この項目を有効にしました。

Only highlight on main WP query

ツールチップを、記事のメイン本文だけに表示する設定です。

有効にすると、関連記事、ウィジェット、スライダーなど、本文以外の場所でツールチップが反応するのを防ぎやすくなります。

今回は、記事本文以外で意図しないツールチップが表示されるのを避けるため、この項目を有効にしました。

そのほかのGeneral設定

Generalには、スラッグ、検索結果、キャッシュ、JavaScriptやCSSの読み込み方法など、ほかにも多くの設定があります。

今回は、ツールチップの基本動作へ直接関係する項目だけを変更し、そのほかは初期設定のまま使用します。

実際にサイトを運用して、表示速度や動作に問題が見つかった場合は、必要な項目を改めて確認します。

設定が終わったら、画面下の「変更を保存」をクリックします。

きょろぽん

せっかく退避したから、全部まとめて登録しちゃえば早くない？

ノン

全部登録してから使いにくいと分かったら、その作業が無駄になっちゃうよ。
最初は1件だけで試そう。

以前の用語がそのまま表示された

テスト用の用語を登録しようとして、新しいプラグインの用語一覧を開きました。

すると、以前のプラグインで登録していた用語が、すでに一覧へ表示されていました。

表示されていたのは、以前CM Tooltip Glossaryで登録した次の用語です。

きょろぽん

あれ？全部いるんだけど（笑）

ノン

どうやら、両方のプラグインが同じGlossary用のデータを利用しているみたいだね。

登録済みの用語を手作業で移すつもりでしたが、新しいプラグインを有効化すると、以前登録した用語がそのまま表示されました。

どうやら両方のプラグインが、同じGlossary用のデータを利用していたようです。

今回は以前の用語がそのまま表示されましたが、プラグインの組み合わせやバージョンによって、同じ結果になるとは限りません。

プラグインを乗り換える前に、登録内容を別の場所へ退避しておくと安心です。

このあと、Glossary Tooltipへ用語を1件登録して動作を確認します。

ただし、今回確認した環境では、日本語の文章内にある用語が正常に反応しない場合があり、最終的にこのプラグインの使用を見送りました。

同じプラグインを試したい方や、原因をさらに確認したい方は、このまま読み進めてください。

今後のバージョンアップによって、今回確認した問題が改善される可能性もあります。

原因や解決方法をご存じの方がいれば、お問い合わせページから教えていただけると助かります。

新しい用語を1件登録する

以前の用語はすでに表示されていましたが、この記事を見ながら初めて設定する人もいるため、新しい用語を1件登録してみます。

今回は、テスト用として「クリック」を登録します。

WordPress管理画面の左側メニューから、「Glossary」をクリックします。

続けて、「Add Glossary Term」をクリックします。

新しい用語の登録画面が表示されます。

タイトルへ、次の文字を入力します。

クリック

説明欄へ、用語の説明を入力します。

今回は、次のように入力しました。

マウスの左ボタンを、押してすぐに離す操作です。

スラッグには、半角英数字で次の文字を入力しました。

click

入力が終わったら、「公開」をクリックします。

用語一覧を開き、「クリック」が追加されたことを確認します。

記事内でツールチップを確認する

用語を登録したら、記事内でツールチップが表示されるか確認します。

最初に、以前登録していた「モデリング」を確認しました。

パソコンで用語へマウスポインターを重ねると、説明が吹き出しで表示されました。

用語をクリックすると、Glossaryの個別ページへ移動しました。

スマートフォンでは、用語を1回タップすると説明の吹き出しが表示されました。

もう一度タップすると、パソコンと同じように個別用語ページへ移動します。

この時点では、パソコンとスマートフォンの両方で正常に動作しているように見えました。

一部の用語が反応しない

ほかの用語も確認していると、登録済みなのにツールチップが表示されない用語がありました。

例えば、同じ文章内に「モデリング」「マテリアル」「レンダリング」が並んでいても、すべての用語へツールチップが表示されるわけではありませんでした。

最初は、同じ用語を1ページ内で何回表示するかを決める設定が原因だと思いました。

General設定の「Repeated highlighting」を確認し、すべての出現箇所へ表示する設定へ変更しました。

設定を保存し、Glossary Tooltipのキャッシュも削除しました。

しかし、一部の用語は反応しないままでした。

日本語の文章内で動作を確認する

原因を確認するため、新しいテスト用の記事を作成しました。

最初に、登録した用語を1行ずつ単独で記載しました。

クリック

モデリング

マテリアル

この状態では、用語へ正常にツールチップが表示されました。

次に、用語の前後へ日本語を続けて入力しました。

これはクリックです。

クリックすると説明が表示されます。

前クリック後

すると、単独で記載した場合には反応した「クリック」が、日本語の文章内では反応しませんでした。

さらに、括弧や句読点を付けて確認しました。

「クリック」

クリック、

クリック。

前後に括弧や句読点がある場合は、ツールチップが表示されました。

確認結果を整理すると、次のようになりました。

記載方法	動作結果
クリック	反応した
「クリック」	反応した
クリック、	反応した
クリック。	反応した
これはクリックです。	反応しなかった
クリックすると説明が表示されます。	反応しなかった
前クリック後	反応しなかった