こんにちは、まちゃりさです。
今回は、文字や画像にマウスカーソルを合わせると説明が表示される機能のつけ方について解説していきます。
この機能は「ツールチップ」というそうです。
※PC表示のみの機能です。
表示イメージはこのような感じです。
▼表示イメージ（PCのみ表示されます）
※上記文字にカーソルを合わせると、「これは説明です」という説明書きが表示されます。
専門用語が多い記事では、リンクをたくさん貼ると読みづらい記事になってしまいます。
しかし、この機能を使えば文字数を減らしてスッキリさせることができ、重宝しそうです。
今回ご紹介するやり方を覚えれば、簡単に作成できるので、ぜひ活用してみてください。
それでは、どうぞ！！
カーソルを合わせると説明文が表示できる
専門用語が並ぶ記事内で１つずつハイパーリンクや注釈をつけていくと、かえって記事が読みづらくなってしまうことがあります。
文字や画像にカーソルを合わせると、説明がすぐに表示される機能は重宝します。
今回は、カーソルを合わせると説明文が表示される方法について、以下のそれぞれを順番に解説していきます。
- 文字にカーソルを合わせて説明文を表示
- 画像にカーソルを合わせて説明文を表示
文字にカーソルを合わせて説明文を表示させる方法
まず、文字にカーソルを合わせて説明文を表示させる方法です。
▼やり方
ワードプレスのブロックエディタを使用している場合は、ブロックの追加＞カスタムＨＴＭＬを選択します。
表示される枠に、次のコードを記入します。
<span title="説明書きの表示">ここにカーソルを合わせてください</span>
一度、「下書き保存」して（①）、「プレビュー」で確認します（②）。
文字にカーソルを合わせると、説明書きが表示されます。
次に実際に、文言を変更してみます。
<span title="説明書きの表示">ここにカーソルを合わせてください</span>- 上記の「説明書きの表示」の文言は、表示させたい説明文に書き換えます。
- 上記の「ここにカーソルを合わせてください」の文言は、説明を表示させたい文字に書き換えます。
➡今回は例として、「アンパンマン」という言葉に「主人公」という説明をつけてみます。
▼変更前のコード
▼実際のコード
<span title="説明書きの表示">ここにカーソルを合わせてください</span>
▼変更後のコード（アンパンマン）
▼実際のコード（変更後：アンパンマン）
<span title="主人公">アンパンマン</span>※文字にはわかりやすいように色をつけていますが、実際の色は黒で表示されます。
変更後の表示イメージは、このようになります。
▼表示イメージ
※「アンパンマン」にカーソルを合わせると、「主人公」が表示されます。
説明書き表示部分の「色」を変えたい場合
説明書きを表示させたい言葉に色をつけたい場合もあるかと思います。
今回は例として、赤字文字部分にカーソルを合わせると説明書きが表示されるようにしてみました。
この部分が赤色で表示されます。
※「赤色」にカーソルを合わせると、「説明書き」が表示されます。
PCの場合は、上記の説明書きにマウスポインタをかざしてみてください。
PCでは次のように表示されるはずです。
上記を表示する場合のコードです。
<p>この部分が<span style="color:#e60033" title="説明書き">赤色</span>で表示されます。</p>
今回も、上記のコードを元に文言を変更してみます。
「ああ アンパンマン 優しい君は」という一文の中の「アンパンマン」（赤字）にカーソルを合わせると「主人公」という説明書きが表示されるように設定します。
ああ アンパンマン 優しい君は
※「アンパンマン」にカーソルを合わせると、「主人公」が表示されます。
PCの場合は、上記の説明書きにマウスポインタをかざしてみてください。
PCでは次のように表示されるはずです。
上記を表示する場合のコードです。
<p>ああ <span style="color:#e60033" title="説明書き">アンパンマン </span>優しい君は</p>
次に「アンパンマン」の文字色を赤から黄緑色に変更してみます。
カラーコードを変更します。
▼赤色から、黄緑色に変更する手順
下記サイトにアクセスし、好きな色を選びます。
黄緑色を探すと、#から始まるカラーコードは、「#b8d200」です。
「color:xxxxx」のxxxxx部分を、「#b8d200」に書き換えます。
<p>ああ <span style="color:#b8d200" title="ここに説明書きが表示されます">アンパンマン </span>優しい君は</p>上記の赤表示の部分が、変更箇所（カラーコード部分）です。
カラーコードを変更すれば、好きな色に変更することが可能です。
ああ アンパンマン 優しい君は
※「アンパンマン」にカーソルを合わせると、「主人公」が表示されます。
画像にカーソルを合わせて説明文を表示させる方法
続いて、画像にカーソルを合わせて、文字（説明）を表示させる方法です。
バイキンマンの画像にカーソルを合わせると、「悪役」と表示させるように設定してみました。
▼やり方
ワードプレスのブロックエディタを使用している場合は、ブロックの追加＞画像を選択します。
説明文を表示させたい画像を選びます。
ここで、「コードエディタ」をクリックします。
投稿画面右上の3つの点のマークをクリックします。
「エディター」の「コードエディター」をクリックします。
すると、画像がコードに書き換わり、表示されます。
これが実際に表示されたコードです。
<!-- wp:image {"id":20182,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://macharisa.com/wp-content/uploads/2021/04/wordpress-tooltips12.jpg" alt="" class="wp-image-20182"/></figure>
<!-- /wp:image -->
ここで、次の2点を変更します。
- 「alt=””」を「alt=”link”」に変更する
- 「title=”(表示したい説明文)”」を追加
書き換え後は、このような感じになります。
ごちゃごちゃしますが、黄色の2箇所だけ見てください。
<!-- wp:image {"id":20182,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://macharisa.com/wp-content/uploads/2021/04/wordpress-tooltips12.jpg" alt="link" class="wp-image-20182" title="リンク"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":20182,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://macharisa.com/wp-content/uploads/2021/04/wordpress-tooltips12.jpg" alt="" class="wp-image-20182"/></figure>
<!-- /wp:image -->
上（変更後）と下（変更前）で見比べつつ、赤色の部分を追加していきます。
「title=”リンク”」の「リンク」の文言は、説明書きとして表示したい文字に置き換えます。※バイキンマンの例では、「悪役」と書いています。
最後に「ビジュアルエディタ」に戻し、プレビューで確認します。
画像にカーソルを合わせると、説明文が表示されるようになります。
まとめ
いかがでしたか？
今回は、文字や画像にカーソルを合わせると、説明文字を表示される方法をご紹介しました。
この機能を、つい最近知りましたが、専門用語が多い記事において、重宝しそうです。
ぜひ、活用してみてください。
それでは、今回はこの辺で終わります。
最後までお読みいただき、ありがとうございました！
おわり。
コメント