WordPressテーマ THE THOR
別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
WordPressテーマ THE THOR（ザ・トール）の「記事ページのアイキャッチホバーエフェクト無効」についてまとめてみました。
WordPressテーマ THE THOR アイキャッチホバーエフェクト
WordPressテーマ THE THOR（ザ・トール）では、記事一覧（トップページ）、記事ページ、関連する記事など多くの場所でアイキャッチが使われています。
WordPressテーマ THE THORでは、アイキャッチホバーエフェクトとして、「ズーム(default)」「ズームグレイ」「ズームセピア」「ズーム回転」「マスク」「マスクズーム回転」「無し」から選択設定することができます。
但し、記事ページに表示されているアイキャッチについては、WordPressテーマ THE THOR（ザ・トール）のアイキャッチホバーエフェクトを「無し」に設定してもエフェクト処理が無効になってくれません。
記事ページの上に表示されているアイキャッチはリンク設定されておらず、そのためエフェクトにマウスカーソルをホバーしても何も無いので逆に紛らわしくなってしまいます。
他のアイキャッチについてはリンク設定されており、アイキャッチをクリックすることで指定のURLに飛ぶので問題ありません。
と言う事で、記事ページに表示されているアイキャッチのエフェクト処理を無効にするカスタマイズを行ってみました。
記事ページのアイキャッチホバーエフェクト無効のカスタマイズ
「記事ページのアイキャッチホバーエフェクト無効」のカスタマイズを行います。
カスタマイズ内容
「記事ページのアイキャッチホバーエフェクト無効」のカスタマイズは、下記の通りです。
このカスタマイズ内容を「スタイルシート(style-user.css)」に追記します。
/************************************
** ■記事ページのアイキャッチ エフェクト無効のカスタマイズ
************************************/
.eyecatch.eyecatch-main:hover img {
transform: none;
}
カスタマイズ後の記事ページのアイキャッチホバーエフェクト
今回の「記事ページのアイキャッチホバーエフェクト無効」のカスタマイズによって、「記事ページのアイキャッチホバーエフェクト」は次の様になりました。
今回の「記事ページのアイキャッチホバーエフェクト無効」のカスタマイズで、アイキャッチにマウスカーソルをホバーしてもエフェクトされなくなりました。
最後に
画像リンクされていないのにエフェクト処理が有るのは紛らわしいので、今回記事ページのアイキャッチに対してエフェクト処理を無効にできたことで、少しでも分かりやすいブログサイトに近づけたと思います。
コメント