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

この記事のURLとタイトルをコピーする

Image

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

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

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

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

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

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

Image

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

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

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

a.tip:hover span{

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

display: inline; を display: block;

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

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

これで表示すると、

Image

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

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

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

Image

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

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

Image

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

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

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

シェアする

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

フォローする

この記事のURLとタイトルをコピーする
スポンサーリンク
スポンサー広告
トップへ戻る

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

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

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

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