こんにちは、ゆんつです。
以前「エントリーカード全体をリンク化」しました。
これによりトップ画面の各記事にマウスを乗せるとうっすら灰色のエフェクトが付くようになりました。
この灰色もシンプルでいいんですが、もう少し明るい色も試してみたいです。
そこで今日はこの色を自分の好みの色に変えてみたいと思います。
作業を行うにあたりSimplycityのホームページに掲載されていた「エントリーカード全体にホバー色をつけたい」という質問に対する回答を参考にさせていただきました。
エントリーカード全体にホバー色をつける
まずは質問ページに載っていたコードの一部をそのままコピペさせもらいます。
#list .hover-card:hover .entry {
background-color: rgba(255,0,0,.5);
}
更新してブログを確認してみるとこんな感じになりました。
カード全体に色が付いたのは希望通りなんですが、記事を公開した日付の部分に色がついていません。
なのでこの部分も色が付くように少し追加します。
#list .post-meta {
background-color: transparent;
}ブログを確認します。
このコードを追加することで灰色だった日付部分の背景が透明になり、マウスを乗せた時には他の部分と同様に色がつくようになりました。
最後に色を自分好みに変えます。
rgbaを自分のブログのカラーに合うように変更します。
rgbaを(255,0,0,.5)から(255,175,0,.1)に変更し、最終的にこのようなコードとなりました。
/* エントリーカードにホバー色をつける */
#list .hover-card:hover .entry {
background-color: rgba(255,175,0,.1);
}
/* 投稿日時の背景を透明化する */
#list .post-meta {
background-color: transparent;
}
その結果ブログはこのような感じになりました。
エントリーカードにマウスを乗せるとカードがうっすらとオレンジ色になります。
自分の理想通りです。
やった！やった！
備考
今回の作業をしていたときに僕はある疑問を持ちました。
それは、このコードです。
#list .hover-card:hover .entry {
background-color: rgba(255,175,0,.1);
}
rgbaの最初の3つの数値は色を決めるもので最後の1つの数値（.1）は透明度なのですが、確かopacityというのも透明度だったはずです。
なので
#list .hover-card:hover .entry {
background-color: rgb(255,175,0);
opacity : .1
}
とすれば同じ結果になるのかと思っていました。
でも実際にやってみると、こんな結果になりました。
調べてみるとrgbaはそのプロパティのみ透明になり、opacityはセレクタ内全体が透明になるようです。
つまりrgbaならマウスを乗せた時の背景色だけに影響を与えアイキャッチ画像や文字の色はそのままです。
しかしopacityにしてしまうとエントリーカード全体に影響を与え、マウスを乗せた時にアイキャッチ画像や文字までも透明化して色が薄くなってしまいます。
なので背景色だけ透明化させて、アイキャッチ画像や文字ははっきり見せたい今回の場合はrgbaを使うということなんですね。
勉強になりました。
まとめ
今回はエントリーカードにマウスポインタを置いたときのホバー色を自分の好きな色に変えてみました。
このやり方は関連記事など様々な部分に応用がききそうな気がします。
またrgbaとopacityの違いも少しだけ理解できました。
限定して透明化したい場合はrgba、全部ひっくるめて透明化したい場合はopacityと覚えておきたいと思います。
あとは直ぐ忘れないことを祈るだけです。
これからもカタツムリのようにのろのろとブログをカスタマイズしていきます。
それでは、またですー。
コメント