【注意】このMASAa.netはWordPressテーマ Cocoonを使用しており、THE THORはZMASAa.blogで使用中です。クリックするとZMASAa.blogを開きます。
WordPressTHE THOR

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

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約5分で読めます。
スポンサーリンク

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

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

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

今回は、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アイキャッチ画像がかなり見やすくなったと思います。

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

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
MU:アークエンジェル
Cave Shooter
イース6オンライン
ザ・アンツ
リネージュ2M
クッキーランキングダム
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
ブレイドエクスロード

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント