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

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

Image

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

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

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

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

<a class="tip" href="#">最初から表示している文字<span>マウスを載せたら表示したい文字</span></a>

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

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

Image

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

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

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

/* tipを表示するstart */
a.tip:hover {
     background: #ffffff;     /* IE6以下で必要 */
     text-decoration: none;
}
a.tip span {
     display: none;
     padding: 8px;
     font-size: 12px;
     margin-left: 8px;
     line-height: 1.6;
}
a.tip:hover span{
     display: block;
     position: absolute;
     background-color: #5e4390;
     border: 1px solid #cccccc;
     color: #ffffff;
     width: 200px;     /* a.tip spanに指定すると、IE6以下でspanの領域でマウスが反応してしまう */
}
  
/* IE6以下にのみ適用 */
a.tip:hover span{
     width: 216px;
}
/* tipを表示するend */

a.tip:hover span{

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

display: inline;を display: block;

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

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

これで表示すると、

Image

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

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

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

Image

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

a.tip {
    text-decoration: none;
    color: #5e4390;
}

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

Image

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

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

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

兎本美佳

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

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress 全般
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。