【WordPress】無料テーマ「Cocoon」で記事中の画像にホバーエフェクトを設定する方法を調べてみた!

ホバーエフェクトをつけたい!

記事についてはカーソルをのせるとホバーエフェクトが表示されますが、

記事中にある画像はリンクを設定してもエフェクトは表示されませんし、WordPress内での設定も見当たりませんでした。

記事一覧や新着記事、おすすめカードは以下のようにエフェクトが…


記事中の画像はカーソルをのせても変化なし…


エフェクトを設定する方法

調べてみたところ以下のコードを追加すればホバーエフェクトがつきました!

.article img:hover {
	opacity: 0.6;
	transition: all 0.8s ease;
}


参考にさせていただいたのは、無料テーマ「Cocoon」を作られたわいひら様が運営されているブログ内の記事です。

↓こちらの回答が載っています!

リンクを貼った画像のホバー時のエフェクト設定について
お世話になっております。 画像リンクのホバー時のエフェクト効果について相談させて頂きます。 デフォルトでは、画像リンクにカーソルを当てても何もアクションしない仕様になっていることと思います。 そこで、記事一覧や関連記事、ウィジェットの新規投稿や人気投稿などのサムネイル画像については、スタイルシートに...


まとめ

今回はWordPressの無料テーマ「cocoon」で記事中の画像にホバーエフェクトを設定する方法を調べてみました!

現状WordPress内での設定では見当たらず悩んでいたのですが、コードの入力で簡単にエフェクトをつけることができました!

やはり視認性の面で、PC版へのホバーエフェクトは大事ですので、大変たすかりました!

コメント

タイトルとURLをコピーしました