WordPressテーマ Cocoon
このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。
今回は、WordPressテーマ Cocoonでの「記事一覧のインデックスホバー時の背景色」に関するカスタマイズについてまとめてみました。
WordPressテーマ Cocoon 記事一覧のインデックスホバー時
これまで【記事一覧のインデックス】にホバーした際の処理を色々とカスタマイズしてきました。
過去に掲載してきた「記事一覧のインデックスに関するカスタマイズ」については、“Cocoon インデックス”で検索して下さい。
現在の【記事一覧のインデックス】のスタイルは次の様になっています。
【記事一覧のインデックス】にマウスカーソルをホバーしたときのスタイルは次の様になっています。
今回は、記事一覧のインデックスホバー時のカスタマイズとして背景色（バックカラー）の設定を行いたいと思います。
記事一覧のインデックスホバー時の背景色カスタマイズ
WordPressテーマ Cocoonでの「記事一覧のインデックスホバー時の背景色」に関するカスタマイズを行います。
カスタマイズ内容
「記事一覧のインデックスホバー時の背景色」に関するカスタマイズ内容は、下記の通りです。
「スタイルシート(style.css)」を開き、これまで行ったカスタマイズ部分を下記のカスタマイズ内容に変更します。
なお、変更箇所は background-color の1行のみで、この部分を任意の背景色（バックカラー）に設定します。
.entry-card-wrap:hover{ /*エントリーカード ホバー時設定*/
box-shadow: 0px 0px 8px 3px rgba(254,97,154,1);
text-decoration: none!important;
background-color: #fff6fb; /*背景色 ←変更箇所*/
}
.entry-card-wrap.a-wrap:hover{ /*エントリーカード ホバー時設定*/
background-color: #fff6fb; /*背景色 ←変更箇所*/
-webkit-transform: translateY(-6px); /*浮かす*/
-ms-transform: translateY(-6px); /*浮かす*/
transform: translateY(-6px); /*浮かす*/
}
.entry-card:hover{ /*エントリーカード ホバー時設定*/
background-color: white;
}
カスタマイズ後の記事一覧のインデックスホバー時の背景色
今回のカスタマイズによって、【記事一覧のインデックス】上にマウスカーソルをホバーしたときのスタイルは次の様になりました。
今回のカスタマイズでは、【記事一覧のインデックス】にホバーしたときの背景色（バックカラー）を設定しました。
最後に
今回はそこまでハッキリした背景色（バックカラー）に設定しませんでしたが、それでもホバーした際の記事一覧のインデックスがこれまでよりも認識し易くなりました。
コメント