更新 2021.2.3 13:55

●画像系Tips● tooltip-images フォルダに画像を保存

tooltip (ツールチップ)とは、特定の文言にカーソルを当てると画像が表示される機能です。 紀永で使う場合は、 /contents/カテゴリ名/記事名/tooltip-images/  に画像を保存し、 /contents/カテゴリ名/記事名/index.html に下記の記述を入れます。 <span id="画像名">テキスト</span> tooltip-images フォルダに入れた画像はこのように表示されます

おすすめの使い方


上級者向け解説

この機能は、tooltip-images フォルダに入れた画像名をCSSのid名に変換することで表示される仕組みです。 従って、ブロック要素、インライン要素の両方で使えますが、以下のようにテキスト部分にアンダーラインが出ますので、ブロック要素で用いる場合は必要に応じてCSSを修正して下さい。

ブロック要素の場合

<div id="画像名">テキスト</div>
ブロック要素でのtooltip-images の表示

インライン要素の場合

<span id="画像名">テキストA</span><span id="画像名">テキストB</span><span id="画像名">テキストC</span> 表示A   表示B   表示C