【THE THOR】Prev/Nextのアイキャッチホバーエフェクトの無効

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

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

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

ZMASAa.blog│masaaの物欲心や愛車トヨタノア80系など日常の事について語るWordPressブログサイト③
masaaの物欲心や愛車トヨタノア80系など日常の事について語るWordPressブログサイト③

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

WordPressテーマ THE THOR(ザ・トール) アイキャッチホバーエフェクト

WordPressテーマ THE THOR(ザ・トール)の場合、アイキャッチホバーエフェクトの設定を行うことができます。

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

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

で行うことができます。

一つ注意する点としては、この「アイキャッチホバーエフェクトの設定」を設定すると全てのアイキャッチ画像に対してこの設定が有効となってしまうことです。

ZMASAa.blogでの記事ページ先頭のアイキャッチ画像については、ホバーエフェクトを無効にするカスタマイズを行っています。

【THE THOR】記事ページのアイキャッチホバーエフェクト無効のカスタマイズ
WordPressテーマ THE THOR(ザ・トール)の「記事ページのアイキャッチ エフェクト無効」のカスタマイズについてまとめてみました。今回のカスタマイズでは、アイキャッチのエフェクト処理を無効にしてみました。

その他にホバーエフェクトを無効にしたいと思っているアイキャッチ画像は、

  • ブログカードアイキャッチ画像
  • サイトカードのアイキャッチ画像
  • Prev/Nextのアイキャッチ画像
  • 関連記事のアイキャッチ画像

です。

つまりトップページに表示されるアーカイブページのアイキャッチ画像だけを残して、その他のアイキャッチ画像はホバーエフェクトを無効にしたいと考えています。

その理由は、小さいアイキャッチ画像に対してズームのエフェクトは不要と言う考えと、今後のカスタマイズで邪魔になってくると思われます。

しかも、WordPressテーマ THE THOR(ザ・トール)の仕様だと思われるのですが、ズームが終わる直後に画像が下に一段ズレる場合が時々発生しています。

この現象についてはよくよく見ていないと分からないのですが、自分の場合どうしても気になってしまいます。

この現象については自分だけの発生かなと思い、あまりカスタマイズをしていない他の方のWordPressテーマ THE THOR(ザ・トール)で構築した複数のサイトでも確認することができたので、WordPressテーマ THE THOR(ザ・トール)が原因だと思われます。

6月12日のエントリー記事で「ブログカードのアイキャッチ画像」に対して、ホバーエフェクトを無効にするカスタマイズを行いました。

【THE THOR】ブログカードのアイキャッチホバーエフェクトの無効
WordPressテーマ THE THOR(ザ・トール)での「ブログカードのアイキャッチ画像」のホバーエフェクトを無効にするカスタマイズについてまとめてみました。ブログカードのアイキャッチ画像にホバーしてもズームされなくしてみました。

6月14日のエントリー記事で「サイトカードのアイキャッチ画像」に対して、ホバーエフェクトを無効にするカスタマイズを行いました。

【THE THOR】サイトカードのアイキャッチホバーエフェクトの無効
WordPressテーマ THE THOR(ザ・トール)での「サイトカードのアイキャッチ画像」のホバーエフェクトを無効にするカスタマイズについてまとめてみました。サイトカードのアイキャッチ画像にホバーしてもズームされなくしてみました。

今回は「Prev/Nextのアイキャッチ画像」のホバーエフェクトを無効にするカスタマイズを行いたいと思います。

現在の「Prev/Nextのアイキャッチ画像」上にマウスカーソルをホバーしたときのスタイルは下記の通りです。

【THE THOR】Prev/Nextのアイキャッチホバーエフェクトの無効

Prev/Nextのアイキャッチ画像をホバーエフェクト無効にするカスタマイズ

「Prev/Nextのアイキャッチ画像」のホバーエフェクトを無効にするカスタマイズを行います。

カスタマイズ内容

「Prev/Nextのアイキャッチ画像」のホバーエフェクトを無効にするカスタマイズは、下記の通りです。

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

なお、以前「Prev/Nextのアイキャッチ画像のカスタマイズ」を行った箇所に上書きする形で貼り付ける必要があります。

/************************************
** ■PrevNext アイキャッチ画像カスタマイズ
************************************/
.prevNext .eyecatch {
	border-radius: 4px; /*角丸コーナー*/
	box-shadow: 3px 3px 2px rgba(0,0,0,0.3); /*シャドー(影)*/
}
.prevNext .eyecatch .eyecatch__link img {
	object-fit: none!important;
	transform: none!important;
}

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

今回のカスタマイズによって、「Prev/Nextのアイキャッチ画像」上にマウスカーソルをホバーしたときのスタイルは次の様になりました。

【THE THOR】Prev/Nextのアイキャッチホバーエフェクトの無効

「Prev/Nextのアイキャッチ画像」に対して、ホバーエフェクトの設定を無効にしました。

最後に

今回は「Prev/Nextのアイキャッチ画像」に対して、ホバーエフェクトの設定を無効にするカスタマイズを行いました。

次回は「関連記事のアイキャッチ画像」に対して、同様にホバーエフェクトを無効にするカスタマイズを行っていきたいと思います。

【THE THOR】関連記事のアイキャッチホバーエフェクトの無効
WordPressテーマ THE THOR(ザ・トール)での「関連記事のアイキャッチ画像」のホバーエフェクトを無効にするカスタマイズについてまとめてみました。関連記事のアイキャッチ画像にホバーしてもズームされなくしてみました。

コメント


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