ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

記事一覧タイルのホバー時のスタイル

・タイルに影がついて浮き上がるように見える
・”記事を読む”リンクボタンに着色する

こんなやつです。

記事一覧タイルのホバー時のスタイル

事前の条件設定

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

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

グリッドレイアウトの設定

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

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

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

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

次の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-]に変えればよいでしょう。

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

まとめ

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

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる