【THE THOR】エントリー記事カードのアイキャッチ画像のカスタマイズ

WordPressテーマ THE THOR（ザ・トール）

別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

wp.masaa.net

今回は、WordPressテーマ THE THOR（ザ・トール）での「エントリー記事カードのアイキャッチ画像」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR（ザ・トール） エントリー記事カードのアイキャッチ画像

前回と前々回のエントリー記事は、アーカイブページのエントリー記事カードに関するカスタマイズについて掲載しました。

【THE THOR】エントリー記事カードホバー時のタイトルのカスタマイズ

WordPressテーマ THE THOR（ザ・トール）のインデックスについては先日にもカスタマイズを行ってきました。今回そのエントリー記事カードをホバーしたときのタイトルに対して新たなカスタマイズを行ってみました。

masaa.net

2020.01.05

【THE THOR】エントリー記事カードのカスタマイズ

WordPressテーマ THE THOR（ザ・トール）の「エントリー記事カード」のカスタマイズについてまとめてみました。今回のカスタマイズではタイトルに背景を設定して、その他にアイキャッチ画像の位置調整などを行ってみました。

masaa.net

2020.01.03

今回は、「エントリー記事カードのアイキャッチ画像」のカスタマイズを行ってみました。

現在の「エントリー記事カードのアイキャッチ画像」デザインは下記の通りです。

マウスカーソルをアイキャッチ画像にホバーすると、画像がズームされます。

このアイキャッチのエフェクト処理に関しては、WordPressテーマ THE THOR（ザ・トール）の設定で幾つかのパターンから選ぶことができます。

自分の場合は、デフォルトの「ズーム(default)」に設定しています。

エントリー記事カードのアイキャッチ画像のカスタマイズ

WordPressテーマ THE THOR（ザ・トール）で「エントリー記事カードのアイキャッチ画像」のカスタマイズを行います。

カスタマイズ内容

「エントリー記事カードのアイキャッチ画像」のカスタマイズ内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ●アーカイブページのアイキャッチのカスタマイズ
************************************/
.archive__item .eyecatch {
	border-radius: 5px; /*角丸コーナー*/
	margin-top: 23px; /*アイキャッチ画像位置調整*/
	box-shadow: 3px 3px 2px rgba(0,0,0,0.3); /*シャドー（影）*/
}
.archive__item .eyecatch:hover {
	opacity: 0.6; /*不透明度*/
	transition: all 0.8s ease; /*アニメーション*/
}

なお、以前カスタマイズした

/************************************
** ●アーカイブページのアイキャッチのカスタマイズ
************************************/
.archive__item .eyecatch {
border-radius: 5px; /*角丸コーナー*/
margin-top: 23px; /*アイキャッチ画像位置調整*/
}

のソース部分が有れば上書きしてください。

あまりお勧めはしませんが、もし分からなければ一番下に今回のカスタマイズ内容を追記する形でもOKです。

カスタマイズ後のエントリー記事カードのアイキャッチ画像

今回のカスタマイズによって、「エントリー記事カードのアイキャッチ画像」のデザインは次のようになりました。

「エントリー記事カードのアイキャッチ画像」に対して、シャドー（影）を付けて立体感を出してみました。

次にマススカーソルをアイキャッチ画像にホバーすると、次のようになりました。

これまで「エントリー記事カードのアイキャッチ画像」にマウスカーソルをホバーすると、設定のズームだけの処理でしたが、それに加えて不透明度の設定と遷移処理を追加してみました。

最後に

今までアイキャッチ画像の背景が白だとバックカラーと一体化して今一歩アイキャッチが見づらい状態でしたが、アイキャッチ画像を立体化することでアイキャッチ画像らしさが出たと思います。

また、基本的に全てのブログサイトでアイキャッチ画像にマウスカーソルをホバーすると、不透明度の設定と遷移処理を行っているので、WordPressテーマ THE THOR（ザ・トール）に対しても実現できて共通化を計ることができました。