WordPressで、漢字の読みを上部に表示する方法を以下でご説明しました。
この方法は、rubyタグを使っており、常時ルビが表示されます。
ボタンを使うことで、表示・非表示を切り替えることもできます。
ですが、ID要素を使っているため、ボタンは1か所にしか配置することができず、
記事が長い場合、ボタンを押すためにスクロールをさせる必要が出てきます。
今回は、スクロールをさせずに意味を表示する方法（ツールチップ）をご紹介したいと思います。
ツールチップとは
設定された文字や画像等にマウスやカーソルを合わせると、その文字の周辺に説明やヒントを表示するものです。
例えば、以下例の文字の上で、マウスを合わせてみてください。
例
豚 河豚 海豚
下記のように表示されたと思います。
動作結果
ツールチップ実装方法
実装方法はいくつかありますが、
今回は、HTMLだけを使って実装する方法をご紹介したいと思います。
上記例のHTMLコードは以下です。
<span title="ぶた">豚</span> <span title="ふぐ">河豚</span> <span title="イルカ">海豚</span>
タグにtitle属性を入れるだけで、とても簡単ですね。
クイックタグに追加しよう
繰返し使うことが想定されるため、
テキスト編集画面で表示されるクイックタグに追加したいと思います。
ここでは、AddQuicktagなどの有名なプラグインは利用せず、
function.phpに追記したいと思います。
function.php編集手順
①外観＞テーマエディターを開く。
②テーマのための関数 (functions.php)を開く。
③以下を追記し、保存する。
function add_button_quicktag() {
QTags.addButton('tooltip','ツールチップ','<span title="ふりがな">','</span>');
}
add_action(‘admin_print_footer_scripts’, ‘add_button_quicktag’);
これで、テキストエディタ画面にツールチップのボタンができ、
1回クリックすると、<span title=”ふりがな”>が表示され、
もう一度クリックすると、</span>が表示されるようになりました。
まとめ
ツールチップを多用すると、
逆に見づらくなる可能性もあります。
作成後は、邪魔になっていないかも確認するといいですね。
コメント