【THE THOR】Prev/Nextアイキャッチ画像 ホバーのカスタマイズ

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

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

ZMASAa.blog │ PC･ガジェット･デジモノ･車好きのmasaaの情報発信サイト

PC･ガジェット･デジモノ･車好きのmasaaが情報を発信するサイト

wp.masaa.net

今回は、WordPressテーマ THE THOR（ザ・トール）での「Prev/Nextアイキャッチ画像 ホバー」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR（ザ・トール） Prev/Nextアイキャッチ画像のホバー時

今回、アイキャッチホバー時のエフェクトの選択設定を【ズーム(default)】から【マスクズーム】に変更しました。

それにあわせて

• マスクカラーの設定：【#000000】
• マスク系エフェクト利用時のマスク上テキスト：【Click here to read more !】

にそれぞれ設定しました。

これらアイキャッチホバーエフェクトの設定手順は、

で行うことができます。

アイキャッチホバー時のエフェクトの選択設定を【マスクズーム】にしたことで、「Prev/Nextアイキャッチ画像 ホバー」に問題が発生しました。

ホバーされていないPrev/Nextアイキャッチ画像のスタイルは次の通りです。

Nextアイキャッチ画像にホバーしたときのスタイルです。

次にPrevアイキャッチ画像にホバーしたときのスタイルです。

上記のスタイルを見て頂けると分かるように、Prev/Nextアイキャッチ画像にホバーした際、Prev/Nextアイキャッチ画像上に元々表示される日付＆タイトルと、マスク系エフェクト利用時のマスク上テキスト【Click here to read more !】が重なってしまい見難くなることがあります。

これはWordPressテーマ THE THOR（ザ・トール）の仕様で仕方が無いのですが、この問題を改善するためのカスタマイズを行います。

Prev/Nextアイキャッチ画像 ホバーのカスタマイズ

「Prev/Nextアイキャッチ画像 ホバー」のカスタマイズを行います。

カスタマイズ内容

「Prev/Nextアイキャッチ画像 ホバー」のカスタマイズは、下記の通りです。

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

以前、Prev/Nextのアイキャッチ画像のカスタマイズを行っている場合は、その箇所に上書きします。

/************************************
** ■Prev/Next アイキャッチ画像カスタマイズ
************************************/
.prevNext .eyecatch { /*アイキャッチ画像*/
	border-radius: 4px; /*角丸コーナー*/
	box-shadow: 6px 6px 3px rgba(0,0,0,0.3); /*シャドー（影）*/
}
.prevNext .eyecatch .eyecatch__link img { /*アイキャッチ画像*/
	object-fit: none!important; /*置換コンテンツの拡大縮小解除*/
	transform: none!important; /*変形解除*/
}
.prevNext .eyecatch .icon-clock{ /*投稿年月日*/
	color: #fff; /*文字色*/
}
.prevNext .prevNext__title { /*タイトル*/
	bottom: 0px; /*下からの配置距離を0固定*/
}
.prevNext .eyecatch .eyecatch__link:hover .icon-clock { /*ホバー時の投稿年月日*/
	opacity: 0.6; /*不透明度*/
}
.prevNext .eyecatch .eyecatch__link .heading-secondary { /*タイトル*/
	transition-duration: 0.8s!important; /*アニメーション*/
}
.prevNext .eyecatch .eyecatch__link:hover .heading-secondary { /*ホバー時のタイトル*/
	font-size:12px!important; /*フォント縮小*/
	opacity: 0.6!important; /*不透明度*/
	transition-duration: 0.8s!important; /*アニメーション*/
}

カスタマイズ後のPrev/Nextアイキャッチ画像

今回のカスタマイズによって、Prev/Nextアイキャッチ画像のスタイルは次の様になりました。

Nextアイキャッチ画像にホバーしたときのスタイルです。

Prevアイキャッチ画像にホバーしたときのスタイルです。

今回のカスタマイズでは、ついでにPrev/Nextアイキャッチ画像上の日付のカラーを分かりやすく濃い白に変更してみました。

本題のPrev/Nextアイキャッチ画像にホバーされた場合には、

1. タイトルのフォントの濃さを薄くする
2. フォントサイズの縮小する

の2点を行いました。

これにより「Prev/Nextアイキャッチ画像 ホバー」で、日付＆タイトルとマスク系エフェクト利用時のマスク上テキスト【Click here to read more !】が重ならないようになりました。

最後に

今回のカスタマイズで、Prev/Nextアイキャッチ画像がかなり見やすくなったと思います。

アイキャッチホバー時のエフェクトの選択を【マスクズーム】に設定している場合には、このカスタマイズをお勧めです。