せいかつブログ

カーソルを合わせると説明が表示される機能(ツールチップ)の使い方

この記事は約9分で読めます。

こんにちは、まちゃりさです。

今回は、文字や画像にマウスカーソルを合わせると説明が表示される機能のつけ方について解説していきます。

この機能は「ツールチップ」というそうです。

※PC表示のみの機能です。

 

表示イメージはこのような感じです。

▼表示イメージ(PCのみ表示されます)

ここにカーソルを合わせてみてください

※上記文字にカーソルを合わせると、「これは説明です」という説明書きが表示されます。

 

専門用語が多い記事では、リンクをたくさん貼ると読みづらい記事になってしまいます。

しかし、この機能を使えば文字数を減らしてスッキリさせることができ、重宝しそうです。

 

今回ご紹介するやり方を覚えれば、簡単に作成できるので、ぜひ活用してみてください。

それでは、どうぞ!!

スポンサーリンク

カーソルを合わせると説明文が表示できる

専門用語が並ぶ記事内で1つずつハイパーリンクや注釈をつけていくと、かえって記事が読みづらくなってしまうことがあります。

文字や画像にカーソルを合わせると、説明がすぐに表示される機能は重宝します。

 

今回は、カーソルを合わせると説明文が表示される方法について、以下のそれぞれを順番に解説していきます。

  • 文字にカーソルを合わせて説明文を表示
  • 画像にカーソルを合わせて説明文を表示

 

文字にカーソルを合わせて説明文を表示させる方法

まず、文字にカーソルを合わせて説明文を表示させる方法です。

 

▼やり方

ワードプレスのブロックエディタを使用している場合は、ブロックの追加>カスタムHTMLを選択します。

ブロックの追加>カスタムHTML
ブロックの追加>カスタムHTML

 

表示される枠に、次のコードを記入します。

<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つの点のマークをクリックします。

右上の3つの点のマークをクリック
右上の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点を変更します。

  1. 「alt=””」を「alt=”link”」に変更する
  2. 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=”リンク”」の「リンク」の文言は、説明書きとして表示したい文字に置き換えます※バイキンマンの例では、「悪役」と書いています。

 

最後に「ビジュアルエディタ」に戻し、プレビューで確認します。

画像にカーソルを合わせると、説明文が表示されるようになります。

 

まとめ

 

いかがでしたか?

今回は、文字や画像にカーソルを合わせると、説明文字を表示される方法をご紹介しました。

 

この機能を、つい最近知りましたが、専門用語が多い記事において、重宝しそうです。

ぜひ、活用してみてください。

 

それでは、今回はこの辺で終わります。

最後までお読みいただき、ありがとうございました!

おわり。

 

コメント

タイトルとURLをコピーしました