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

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

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

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

ZMASAa.blog│masaaの物欲心や愛車トヨタノア80系など日常の事について語るWordPressブログサイト③
購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③

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

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

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

それにあわせて

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

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

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

「基本設定[THE]」ー「アイキャッチ画像の設定」ー「アイキャッチホバーエフェクトの設定」

で行うことができます。

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

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

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

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

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

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

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

上記のスタイルを見て頂けると分かるように、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アイキャッチ画像のスタイルは次の様になりました。

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

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

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

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

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

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

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

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

の2点を行いました。

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

最後に

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

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

コメント


スポンサーリンク
BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセールBTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール