記事中にツールチップを表示するCSSを追加する

Image

前回のblogでは「切り詰めたタイトルの上にマウスを置いたら、タイトル全部を表示する」ということについて書きました。

ポップアップを出すCSSについて書き方が分かったので、投稿や固定ページの中でもポップアップが出せるようなCSSを追加してみました。

前回コピーさせてもらったCSSで表示してみる

記事は、投稿や固定ページの テキストタブ で

のように書いておきます。

前回参考サイトからコピーさせてもらったCSSをそのまま使って本文中に表示してみます。

Image

これでも良いような感じがするのですが、やはり色を合わせたり表示位置をもうちょっと左側にしてみたいと思います。タイトルとは違って、上より下に出た方がいいかと思いますので位置は下のままにしておきます。

ツールチップのCSSを修正してみる

コピーさせてもらったCSSをちょっとだけ修正しました。

a.tip:hover span{

のところだけを修正しました。

display: inline; を display: block;

にすることで右下ではなく、真下に出るようにしました。

また、背景色と文字色を昨日のblogでタイトルのCSSに指定した色と同じものにしました。

これで表示すると、

Image

こういう感じでテーマに合った色になり、ちょうど真下にツールチップが表示されるようになりました。

マウスを置く前の色とか下線とかを変えてみる

これでOK~と思いましたが、よく考えるとトップページのタイトルはリンクですがツールチップを表示したいのはリンクではありません。マウスを置く前の状態は、

Image

このように、リンクと同じように見えてしまうのでちょっと変えたいです。下線を取って、文字の色は紫にしてみます。先ほどのCSSに、

を追加しました。この状態で表示すると、

Image

このように下線が取れて文字が紫色になりました(^^)/

今後これを使って(括弧の中の文字)<このように括弧の中で説明していた部分を書いたりするととても便利だと思いますだ、と思うんですよ…だ、といいなぁぁ。上手く使えますように(>_<)

*裏技として本音みたいなのも書ける気がします…

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る