[Blogger] JetThemeサムネイル画像ホバー動作追加方法

JetThemeのサムネ画像はホバー動作がなく、マウスポインターが変化するだけです。

スマホで見る分には影響ありませんが、パソコンで見ると少し分かりにくい感じがします。

本記事ではマウスホバー（マウスオーバー）でサムネ画像を変化させる方法を解説します！

CSSの追加方法

左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。

そこから【詳細設定】の【CSSを追加】を選択します。

【カスタムCSSを追加】にCSSを入力できます。

後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。

ホバー時にサムネ画像を半透明に（明るく）するCSSとサムネ画像を拡大するCSSをご紹介します。

このCSSでは記事一覧だけでなく関連記事や人気の投稿ガジェットなどのサムネ画像も反映されます。

通常

ホバー時半透明

ホバー時にサムネ画像を半透明化させるCSSは以下の通りです。


/*サムネホバー半透明CSS*/
.item-thumbnail{
	transition: .2s ease-in-out;
}
.item-thumbnail:hover{
	opacity: .6;
}

ホバー動作時間を変更したい場合は.2sの数値を変更してください。

明るさの調整はopacity: .6の数値を変更してください。

通常

ホバー時拡大

ホバー時にサムネ画像を拡大化させるCSSは以下の通りです。


/*サムネホバー拡大CSS*/
.item-thumbnail{
	transition: .3s ease-in-out;
}
.item-thumbnail:hover{
	transform: scale(1.1);
}

ホバー動作時間を変更したい場合は.3sの数値を変更してください。

拡大の倍率はscale(1.1)の数値を変更してください。

ちょっとした変更ですが、サムネ画像がクリックできるのが視覚的に分かりやすくなります。

パソコンからの閲覧の多いブログでは、是非取り入れてみましょう！