WordPress のテーマ「THE THOR」ではアイキャッチ画像にマウスを乗せるとアニメーションが付きますよね。これを無効化する方法を紹介します。
アイキャッチ画像が表示される場所は大きく分けて2つあります。
- 記事ページのアイキャッチ画像
- 記事一覧の各アイキャッチ画像
記事一覧はトップページやカテゴリーページの記事一覧、ウィジェットの新着記事一覧などで表示される部分ですね。
記事一覧のアイキャッチ画像はテーマカスタマイズ設定でアニメーションの種類を変更できるんですが、記事ページ本体のアイキャッチ画像のアニメーションは変更できません。
なんでや
しかも、アニメーションの種類の変更じゃなくて、アニメーション自体無効にしたいよ
標準のカスタマイズ設定では実現できませんので、CSS に追記して無効にしましょう。
追加 CSS に追記
まず「追加 CSS」を開きます。
外観 > カスタマイズ > 追加 CSS
以下の CSS を追記します。
.eyecatch-main .eyecatch__link:hover img {
transform: initial;
}これで記事ページのアイキャッチ画像のアニメーションを無効にできました。
まとめ
記事ページのアイキャッチ画像のアニメーションを無効にする方法を紹介しました。標準のカスタマイズ設定で変更できないのが辛いですね（泣）
引き続き、良き THE THOR ライフをお過ごしください。