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

アイキャッチ画像 THE THOR(ザ・トール)
スポンサーリンク

WordPressテーマ THE THOR(ザ・トール)

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

ZMASAa.blog│購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③
購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③

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

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

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

【THE THOR】エントリー記事カードホバー時のタイトルのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)のインデックスについては先日にもカスタマイズを行ってきました。今回そのエントリー記事カードをホバーしたときのタイトルに対して新たなカスタマイズを行ってみました。
【THE THOR】エントリー記事カードのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)の「エントリー記事カード」のカスタマイズについてまとめてみました。今回のカスタマイズではタイトルに背景を設定して、その他にアイキャッチ画像の位置調整などを行ってみました。

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

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

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

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

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

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

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

WordPressテーマ THE THOR(ザ・トール) アイキャッチホバーエフェクトの設定手順
【基本設定[THE]】ー【アイキャッチ画像の設定】ー【アイキャッチホバーエフェクトの設定】
「■アイキャッチホバーのエフェクトを選択」

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

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です。

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

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

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

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

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

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

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

最後に

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

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

コメント