せいかつブログ

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

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

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

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

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

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

 

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

▼表示イメージ

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

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

 

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

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

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

それでは、どうぞ!!

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

<span title="説明書きの表示">ここにカーソルを合わせてください</span>
上のコードを貼り付ける
上のコードを貼り付ける

一度、「下書き保存」して、「プレビュー」で確認すると文字にカーソルを合わせると説明書きが表示されます。

「下書き保存」して、「プレビュー」確認
「下書き保存」して、「プレビュー」確認

次に実際に、文言を変更してみましょう。

<span title="説明書きの表示">ここにカーソルを合わせてください</span>
  • 説明書きの表示」の文言は、表示させたい説明文に書き換えます。
  • ここにカーソルを合わせてください」の文言は、説明を表示させたい文字に書き換えます。

➡今回は例として、「アンパンマン」という言葉に「主人公」という説明をつけてみます。

▼変更前

変更前
変更前

コード⇩

<span title="説明書きの表示">ここにカーソルを合わせてください</span>

▼変更後

変更後
変更後

コード⇩

<span title="主人公">アンパンマン</span>

※文字にはわかりやすいように色をつけていますが、実際の色は黒で表示されます。

 

変更後の表示イメージはこのようになります。

▼表示イメージ

※「アンパンマン」にカーソルを合わせると、「主人公」が表示されます。

アンパンマン
表示イメージ
表示イメージ

 

説明書き表示部分の「色」を変えたい場合

説明書きを表示させたい言葉に色をつけたい場合もあるかと思います。

今回は例として、赤字文字部分にカーソルを合わせると説明書きが表示されるようにしてみました。

▼表示イメージ

※「赤色」にカーソルを合わせると、「説明書き」が表示されます。

この部分が赤色で表示されます。

表示イメージ(赤色)
表示イメージ(赤色)

上記を表示する場合のコードはこんな感じです。

<p>この部分が<span style="color:#e60033" title="説明書き">赤色</span>で表示されます。</p>

 

今回も例として、アンパンマンを例に文言を変更してみましょう。

「ああ アンパンマン 優しい君は」という一文の中の「アンパンマン」(赤字)に「主人公」という説明書きを表示してみます。

 

▼表示イメージ

※「アンパンマン」にカーソルを合わせると、「主人公」が表示されます。

ああ アンパンマン 優しい君は

表示イメージ(赤色)/アンパンマン
表示イメージ(赤色)/アンパンマン

上記を表示する場合のコードはこんな感じです。

<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をコピーしました