【解決】THE THOR(ザ・トール)のアイキャッチ画像のホバー動作を変更したい!【WordPress】

  • 2019年10月13日
  • 2019年10月14日
  • WordPress

「投稿のアイキャッチ画像がズームするけどこの機能やめたいなぁ」

ザ・トールで投稿するときアイキャッチ画像を設定できますが、これにマウスのカーソルを合わせるとズームします。

僕の場合、アイキャッチ画像もその投稿のイメージを読者に伝える大切な情報だと思っています。
しかし、ズームすることでアイキャッチ画像の端が見切れてしまい、伝えたいイメージが減ってしまうので、できればズームやめたいと思いました。

そもそもスマホの場合はカーソルホバーできないので意味ないですしね。

ということで今回は、投稿のアイキャッチ画像のズーム機能を変更する方法をご紹介します。

THE THOR(ザ・トール)のアイキャッチ画像のホバー動作は基本設定から変更できる

まずは、WordPressの「ダッシュボード」から「サイトのカスタマイズ」をクリックします。

ダッシュボードのサイトのカスタマイズ

 

カスタマイズ画面で「基本設定[THE]」をクリックします。

基本設定

 

「アイキャッチ画像の設定」をクリックします。

アイキャッチ画像の設定

 

ここに「アイキャッチホバーエフェクトの設定」という項目があります。
ここでアイキャッチ画像をマウスカーソルでホバーしたときの動作を変更できます。

今回はホバーしたときにアイキャッチ画像にうっすらグレーのマスクをかけて、そこに「詳しく見る」という言葉が表示されるようにしてみました。

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

 

するとこんな感じに仕上がりました。

アイキャッチ画像をホバー

 

ズームしなくなり、ホバーしたときの言葉も変更できて満足です!

しかし、この設定では投稿一覧のアイキャッチ画像のホバー設定は変更できるのですが、投稿の詳細ページのアイキャッチ画像はなぜか反映されませんでした。

投稿の詳細ページのアイキャッチ画像のホバー動作は「追加 CSS」で設定するしかない

いろいろ調べたのですが、投稿の詳細ページのアイキャッチ画像のホバー設定は、CSSで無理やりスタイルを変更するしかないようです・・・。

以下手順です。
カスタマイズ画面で「CSS 追加」をクリックします。

追加CSS

 

追加CSSの画面で以下のコードを追記することで、ホバーアニメーションを無効化できました。

.eyecatch__link:hover img{
	transform: none;
}

 

まとめ

今回はザ・トールを使用したときに、アイキャッチ画像をホバーしたときの動作の変更法についてご紹介しました。

1.アイキャッチ画像の変更は、WordPressのカスタマイズ画面の「基本設定[THE]」からできる!

2.投稿の詳細ページは「追加 CSS」からスタイルを編集する!

皆さんも投稿のアイキャッチ画像をホバーしたときの動作について、自分好みにカスタマイズしてみてくださいね!

 



アイキャッチ画像のズーム設定変更
最新情報をチェックしよう!