Luxeritas記事一覧ホバー時のカスタマイズ【影をつけて浮き上がらせる・記事を読むリンク色】

2021年10月10日

Luxeritasの記事一覧（タイルスタイル）のホバー時（マウスオーバー時）のスタイルをカスタマイズしたのでメモ代わりに紹介しておきます。

こんなやつです。

事前の条件設定

テーマカスタマイザーでのグリッドレイアウト設定

ダッシュボード　外観＞カスタマイズ＞グリッドレイアウト　で次のように設定しておきます。

３列のタイル型にして、記事を読むリンクには何もつけません。次のようになります。

記事を読むリンクのスタイルを変更

このままだと”記事を読む”リンクは単なるテキストなので、ボタンに変更しておきます。

次のCSSを子テーマのstyle.cssに記述します。

/* 記事一覧の記事を読むリンクの装飾 */
a.read-more-link {
    display: inline-block;
    padding: 0.4em;
    border-radius: 0.4em;
    color: #2B2C42;
    background-color: #eee;
    text-decoration: none;
    transition: all 0.2s ease-out;
}
a.read-more-link:after {
    display: inline-block;
    font-family: "Material Icons";
    content: "\ea50";
    vertical-align: middle;
}
@media screen and (max-width:575px){
	a.read-more-link {
		font-size: 1.4rem;
	}	
}

最後の@media screen～の記述は、デフォルトだとデバイス幅575px以下でフォントサイズが12pxと小さくなりすぎるので14pxとしました。ボタンが小さくなりすぎてスマホでのユーザービリティが悪いと判断されるのを防ぐためです。もっと大きくしてもよいかもしれません。

このCSS適用後の見映えです。

ホバー時に着色するので、ボタン色は薄めのグレーにしてあまり目立たないようにしています。

記事を読むの後ろにつけている装飾文字は、Googleマテリアルアイコンを使用しています。Font Awesomeを使用している場合は、CSS記述の変更が必要です。

ホバー時のスタイルを変える

以上の準備ができたら、次のCSSを子テーマのstyle.cssに追記します。

/* 一覧 タイルのホバー */
div[id^=tile-] .toc {
    transition: all 0.2s ease-out;
}
div[id^=tile-] .toc:hover {
    box-shadow: 0 0 10px #333;
}
div[id^=tile-] .toc:hover a.read-more-link {
    background-color: #91C4C7;
	color: #2B2C42;
}
div[id^=tile-] .toc a.read-more-link:hover {
    background-color: #2B2C42;
	color: #EE4257;
}

記事一覧をタイル型でなくカード型を使用している場合は、セレクターのdiv[]id~=tile-]の部分をdiv[id^=card-]に変えればよいでしょう。

これでホバー時（マウスオーバー時）にタイルが浮き上がり、記事を読むリンクボタンも着色されます。

まとめ

今回は本サイトでも採用しているタイル型で実践しましたが、通常スタイルやカード型でもセレクターを適正に選べば同様なスタイルにすることができます。ご参考になれば幸いです。