前々から気がついてはいたものの、まぁいいかと放置してたのです。
このはてなブログ、記事のタイトルがリンク仕様になっててマウスオーバーすると下線でるのがあんま好かんです(；´Д｀) 記事のタイトルがそこまでリンクアピールする必要があるかしらん。
ってことで、CSS改修します。
もとの状態はこんな感じ。
この記事を読んでいただいているということは、すでにCSS改修が完了してしまっているというわけで、どんな状態だったかは画像で失礼します。
通常こんな感じで
で、マウスオーバーすると下線がつく
ベースの色味が青が気にいらねーのと、訪問済みだと色が微妙にかわってしまい気持ち悪いです…(；´Д｀)色も変えちゃいましょう。
早速、デザインCSSの改修作業
てことで、記事タイトルのそもそも文字色を変更し、マウスオーバーしても下線が出ないようにし、訪問済みだろうが色が変化しないようにします。文字色は本文と同じように真っ黒ではなく、ちょいとグレー気味にします。
はてなブログの管理画面のメニューからデザインを選びます。
スパナマークを選んで
一番下デザインCSSを開きます
すると、CSS飛び出るので、この一番下にCSSを追加していきます。
CSSいじくるので、このデザインCSSだけでも必ず現状をバックアップとりましょう。私の場合CSS全体をコピーして、テキストエディタにペースト、日付つけて保存しておきます。
テキストエディタにペーストして保存しておきます。
ブログ全体のリンクとなるところはすべてひとくくりに、マウスオーバーや訪問済みの場合の色変更の設定がされているようなので、記事タイトルのみに変更をぶっこみます|дﾟ)ﾉ⌒●
まず色の変更。記事本文と同じ色#454545をentry-titleに設定します。
.entry-title a{
color:#454545
}
さらに、リンクをマウスオーバーしたときに何も変更されないようにします
.entry-title a:hover{
text-decoration:none;
}
すごく余談ですが、このCSS属性text-decoration好きです。デコレーションてのがケーキみたいで(o o);
そして、訪問済みの場合もデフォルトと同じ色を設定しておきます。
.entry-title a:visited{
color:#454545;
}
以上3点をデザインCSSの一番下にこんな感じでぶっこみます|дﾟ)ﾉ⌒●
CSSの中に全角スペースなど余計なものが入るとトラブルの原因になるので、入らないように注意しながらそーっと作業します(；´Д｀)
完成後こんな感じです。
うんうん、色がしまっていい感じです。
もしかして、テーマによってCSSクラス名の.entry-titleってとこが違うかもしれんです。改修自体は大袈裟なものではないですが、何が起こるかわかりませんので改修自体は自己責任でお願いします。
前述したとおり、テキストエディタなどにコピペして、自分のパソコンとかクラウド上とかにバックアップとっておきましょう。
トラブったときにすぐ戻せるように( ･∀･)ﾉ
