WordPressテーマ THE THOR（ザ・トール）
別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、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アイキャッチ画像にホバーされた場合には、
- タイトルのフォントの濃さを薄くする
- フォントサイズの縮小する
の2点を行いました。
これにより「Prev/Nextアイキャッチ画像 ホバー」で、日付＆タイトルとマスク系エフェクト利用時のマスク上テキスト【Click here to read more !】が重ならないようになりました。
最後に
今回のカスタマイズで、Prev/Nextアイキャッチ画像がかなり見やすくなったと思います。
アイキャッチホバー時のエフェクトの選択を【マスクズーム】に設定している場合には、このカスタマイズをお勧めです。
コメント