(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連THE THOR

【THE THOR】関連記事のアイキャッチホバーエフェクトの無効

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

【広告】

※ 本ページには【広告】が含まれています

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

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

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

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

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(ザ・トール)での「サイトカードのアイキャッチ画像」のホバーエフェクトを無効にするカスタマイズについてまとめてみました。サイトカードのアイキャッチ画像にホバーしてもズームされなくしてみました。

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

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

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

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

【THE THOR】関連記事のアイキャッチホバーエフェクトの無効

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

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

カスタマイズ内容

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

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

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

/************************************
** ■関連記事 アイキャッチ画像カスタマイズ
************************************/
.related .eyecatch,
.related .eyecatch .eyecatch__link img {
	box-shadow: 3px 3px 2px rgba(0,0,0,0.3); /*シャドー(影)*/
}
.related .eyecatch .eyecatch__link img:hover {
	opacity: 0.6!important; /*不透明度*/
	transition: all 0.8s ease; /*アニメーション*/
	transform: none!important;
}

カスタマイズ後の関連記事のアイキャッチ画像 ホバー時

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

【THE THOR】関連記事のアイキャッチホバーエフェクトの無効

今回のカスタマイズでは「関連記事のアイキャッチ画像」に対して、ホバーエフェクトの設定を無効にしました。

最後に

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

これで、

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

に対して、ホバーエフェクトが無効となり、逆にホバーエフェクトが有効の対象はアーカイブページのアイキャッチ画像のみとなりました。

【THE THOR】ブログカードのアイキャッチホバーエフェクトの無効
WordPressテーマ THE THOR(ザ・トール)での「ブログカードのアイキャッチ画像」のホバーエフェクトを無効にするカスタマイズについてまとめてみました。ブログカードのアイキャッチ画像にホバーしてもズームされなくしてみました。
【THE THOR】サイトカードのアイキャッチホバーエフェクトの無効
WordPressテーマ THE THOR(ザ・トール)での「サイトカードのアイキャッチ画像」のホバーエフェクトを無効にするカスタマイズについてまとめてみました。サイトカードのアイキャッチ画像にホバーしてもズームされなくしてみました。
【THE THOR】Prev/Nextのアイキャッチホバーエフェクトの無効
WordPressテーマ THE THOR(ザ・トール)での「Prev/Nextのアイキャッチ画像」のホバーエフェクト無効にするカスタマイズについてまとめてみました。Prev/Nextのアイキャッチ画像にホバーしてもズームされなくしました。
MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

シェアする
※ 記事内には【広告】が含まれています

コメント

【広告】