Minimal Green

はてなブログテーマ『Minimal Green』のデモブログ。はてなブログカスタマイズや、HTML、CSSなどについて書いています。

はてなブログテーマ「Minimal Green」のブログタイトル、エントリータイトルの:hoverの色を変えました

細かい変更なんですが、テーマCSSのブログタイトル、エントリータイトルのオンマウス時(ホバーエフェクト)の色を変えました。
f:id:syofuso:20161029163405j:plain
具体的には以下のコードを追加しました。

#title a:hover {
  color: #666;
  opacity: 0.7;
}
.entry-title a:hover {
  color: #666;
  opacity: 0.7;
}

colorで文字色を少し薄く、opacityプロパティで透明度を変更しています。
テーマをインストールして下さっている方はご自分のブログのブログタイトルと記事タイトルにカーソルのせると文字色が変わるようになりました。
デザインにあまり影響はないと思いますが、リンクはリンクだと判った方がユーザーに優しいと思い、変更しました。
何故今まで設定していなかったのか・・・:hoverの設定しているつもりだったのか、忘れてたのか、詰めが甘くてすみません。


どうしても変えたくない方は↑のスタイルを変更してデザインCSSで上書きして下さい。

ついでなのでちょっと覚書。

:hover 擬似クラス

セレクタ:hover { }

:hoverはマウスカーソルをその要素に乗せたときのスタイルを設定します。
よくあるのがリンクテキストや画像の色やスタイルを変える装飾です。

「Minimal Green」ではテーマCSSに以下のようにスタイルを指定してますので

a:hover {
  color: #95C7A4;
  text-decoration: underline;
}

リンクテキストにカーソルのせると色が#95C7A4に変わります。

リンクテキスト