「投稿のアイキャッチ画像がズームするけどこの機能やめたいなぁ」
ザ・トールで投稿するときアイキャッチ画像を設定できますが、これにマウスのカーソルを合わせるとズームします。
僕の場合、アイキャッチ画像もその投稿のイメージを読者に伝える大切な情報だと思っています。
しかし、ズームすることでアイキャッチ画像の端が見切れてしまい、伝えたいイメージが減ってしまうので、できればズームやめたいと思いました。
そもそもスマホの場合はカーソルホバーできないので意味ないですしね。
ということで今回は、投稿のアイキャッチ画像のズーム機能を変更する方法をご紹介します。
THE THOR(ザ・トール)のアイキャッチ画像のホバー動作は基本設定から変更できる
まずは、WordPressの「ダッシュボード」から「サイトのカスタマイズ」をクリックします。
カスタマイズ画面で「基本設定[THE]」をクリックします。
「アイキャッチ画像の設定」をクリックします。
ここに「アイキャッチホバーエフェクトの設定」という項目があります。
ここでアイキャッチ画像をマウスカーソルでホバーしたときの動作を変更できます。
今回はホバーしたときにアイキャッチ画像にうっすらグレーのマスクをかけて、そこに「詳しく見る」という言葉が表示されるようにしてみました。
するとこんな感じに仕上がりました。
ズームしなくなり、ホバーしたときの言葉も変更できて満足です！
しかし、この設定では投稿一覧のアイキャッチ画像のホバー設定は変更できるのですが、投稿の詳細ページのアイキャッチ画像はなぜか反映されませんでした。
投稿の詳細ページのアイキャッチ画像のホバー動作は「追加 CSS」で設定するしかない
いろいろ調べたのですが、投稿の詳細ページのアイキャッチ画像のホバー設定は、CSSで無理やりスタイルを変更するしかないようです・・・。
以下手順です。
カスタマイズ画面で「CSS 追加」をクリックします。
追加CSSの画面で以下のコードを追記することで、ホバーアニメーションを無効化できました。
.eyecatch__link:hover img{
transform: none;
}
まとめ
今回はザ・トールを使用したときに、アイキャッチ画像をホバーしたときの動作の変更法についてご紹介しました。
１．アイキャッチ画像の変更は、WordPressのカスタマイズ画面の「基本設定[THE]」からできる！
２．投稿の詳細ページは「追加 CSS」からスタイルを編集する！
皆さんも投稿のアイキャッチ画像をホバーしたときの動作について、自分好みにカスタマイズしてみてくださいね！