« デイヴィッド・E・ホフマン「死神の報復 レーガンとゴルバチョフの軍拡競争 上・下」白水社 平賀秀明訳 4 | トップページ | ジョン・クラカワー「信仰が人を殺すとき」河出書房新社 佐宗鈴夫訳 »

2018年5月 7日 (月)

ココログ:カスタムCSSでタイトルバナーがリンクと判るようにする

T0  このブログの左上、タイトルバナー(右図の赤い丸の所)は、トップページへのリンクになっている。

 ここをクリックすると、トップページに飛ぶ。トップページには、最近の記事5件の全文が載っている。

 今までのデザインだと、リンクになっている事が伝わりにくい。文字の色が地の文と同じ黒なので、見分けがつかない。マウスカーソルを重ねれば、アイコンが指の形になるけど、文字の色が変わらないので、見逃しかねない。

 なんとか「タイトルバナーはリンクだ」と判るようにしたい。そこで、タイトルバナーの色を本文中のリンクと同じ色にする。また、マウスカーソルが来た時の挙動も、本文中のリンクと同じにする。つまり、カーソルを指の形にして、文字の色も緑色にする。

 タイトルバナーの色を変えるだけなら、標準の「デザイン」→「現在のテンプレートを編集」で出来る。が、マウスカーソルが重なった時に色を変える方法は見つからない。そこで、カスタムCSSを使った。

 と言っても、以下の4行を付け足すだけ。

#banner a:link    { color: #0044ff; } /* 未訪は青 */
#banner a:visited { color: #660099; } /* 既訪は紫 */
#banner a:hover   { color: #336600; } /* マウスカーソルが来たら緑 */
#banner a:active  { color: #cc0000; } /* クリックしたら赤 */

 以下が結果だ。既にトップページに来ているなら、タイトルバナーが紫色になる。

T1

 マウスカーソルを重ねると、文字が緑色になってマウスカーソルが指の形になる。

T2

 これで多少は「リンクである」由が伝わればいいんだが。

|

« デイヴィッド・E・ホフマン「死神の報復 レーガンとゴルバチョフの軍拡競争 上・下」白水社 平賀秀明訳 4 | トップページ | ジョン・クラカワー「信仰が人を殺すとき」河出書房新社 佐宗鈴夫訳 »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: ココログ:カスタムCSSでタイトルバナーがリンクと判るようにする:

« デイヴィッド・E・ホフマン「死神の報復 レーガンとゴルバチョフの軍拡競争 上・下」白水社 平賀秀明訳 4 | トップページ | ジョン・クラカワー「信仰が人を殺すとき」河出書房新社 佐宗鈴夫訳 »