切り詰めたタイトルの上にマウスを置いたら、タイトル全部を表示する

Image

このblogのトップページはタイトルを2行で表示させるためある程度の長さ以上は切り詰めて表示しています。あまり切り詰まっちゃうと自分で見ても今ひとつ意味がわからないタイトルになってしまうこともあります(^_^;。そこで、切り詰めたタイトルの上にマウスを置いたら、タイトル全部を表示できるようにしてみました。

今現在のトップページを確認する

修正前のRYUSblogのトップページはこんな感じです。

Image

8個中6個の記事のタイトルが切り詰められています。

マウスを置いたらタイトル全部を表示したい

マウスを置いたらポップアップさせる、という方法をググってみてこちらのページを見つけました。

CSSのみでツールチップを表示

CSSのみでとあるので簡単そうかなとこちらを参考にさせてもらいました。

使っている子テーマのstyle.cssにこちらのサイトで紹介されているCSSをコピーして、tipという名称をtitletipに変更しました。

そして、タイル状に表示するために子テーマに追加したhome.phpを修正します。

ポイントは切り詰めが発生しないときは今までのままで、発生するときはポップアップ用の タイトル全部 をセットすることです。

具体的には、 // タイトル切り詰めをするときのタイトル部分 で指定しているところの、

ここがポップアップするために指定してある部分です。その他、aタグに先ほど追加したtitletipクラスを指定しています。

ポップアップされたかどうかを見てみる

この状態でトップページを見ます。

Image

このように切り詰められたタイトルの上にマウスを置くとタイトル全部が表示されるのが分かります。

Image

切り詰められていないタイトルの上にマウスを置いても特に何も起こらないことも確認できました。

ちょっと修正してみる

Image

一番右側にあるタイトルの上にマウスを置いたときタイトル全部が表示されるのですが右が切れてしまいました。

タイトル全部がちょっと右下に出ているので、右側に行っても大丈夫なようにタイトルの上に表示するように変更してみたいと思います。それとともに背景色と文字色も変えてみます。

子テーマのstyle.cssを置き換えました。

これで表示してみると、

Image

このように右端のタイトルも切れずに、色も現在のテーマにあったものになりました(^^)/

兎本美佳

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

シェアする

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

フォローする

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

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

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

トップへ戻る