![](https://hrdyuic.com/wp-content/uploads/8335d558d151e09a696fb916ebabfbd5.png)
アイキャッチ画像の上にマウスを乗せた時に画像が拡大するのを止めたいです。方法があれば教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- 記事スライダー(トップページ)のアイキャッチ画像の拡大を止める方法が分かる
- ピックアップバナー(トップページ)のアイキャッチ画像の拡大を止める方法が分かる
- 記事一覧のアイキャッチ画像の拡大を止める方法が分かる
- 人気記事のアイキャッチ画像の拡大を止める方法が分かる
- バナーリンクのアイキャッチ画像の拡大を止める方法が分かる
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
【SWELL】アイキャッチ画像のホバー時の拡大をオフにする方法
![](https://hrdyuic.com/wp-content/uploads/computer-3324200_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/computer-3324200_1920.jpg)
完成版
カーソルを画像に乗せてみて下さい。右側は拡大しないと思います。
今回は、この方法を紹介します。
画像拡大をキャンセルするコードのコピペ場所
場所は下記の2ヶ所です。それぞれ紹介します。
- 追加CSS
- カスタムCSS & JS
追加CSS
全ての記事に反映されます。
管理画面メニューから、「外観」>「カスタマイズ」を選択します。
![](https://hrdyuic.com/wp-content/uploads/d411d823e590d6909ccaf82514f02ad7-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/d411d823e590d6909ccaf82514f02ad7-1.jpg)
サイドバーから、「追加CSS」を選択します。
![](https://hrdyuic.com/wp-content/uploads/a6f14edadd7a2fee69e6180b18e25e1d.jpg)
![](https://hrdyuic.com/wp-content/uploads/a6f14edadd7a2fee69e6180b18e25e1d.jpg)
下記、赤枠内にコードを記述(コピペ)します。
![](https://hrdyuic.com/wp-content/uploads/0c77486bd4683741a3f7d8be18dd3a43.jpg)
![](https://hrdyuic.com/wp-content/uploads/0c77486bd4683741a3f7d8be18dd3a43.jpg)
カスタムCSS & JS
記事ごとに反映させることができます。
管理画面メニューから、「投稿」>「新規投稿を追加」を選択します。
![](https://hrdyuic.com/wp-content/uploads/6c0375baea256f804552732da0a14d90.jpg)
![](https://hrdyuic.com/wp-content/uploads/6c0375baea256f804552732da0a14d90.jpg)
投稿から、「
カスタムCSS & JS」を開きます。![](https://hrdyuic.com/wp-content/uploads/9ad7ab113804a2890a14987712f939a6.jpg)
![](https://hrdyuic.com/wp-content/uploads/9ad7ab113804a2890a14987712f939a6.jpg)
この中に「CSS用コード」および「JS用コード」を記述(コピペ)します。
![](https://hrdyuic.com/wp-content/uploads/97bf0683aa23cd4800de6ae2bb43b912-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/97bf0683aa23cd4800de6ae2bb43b912-1.jpg)
アイキャッチ画像のホバー時の拡大をオフにする【5ヶ所紹介】
- トップページの記事スライダー
- トップページのピックアップバナー
- 記事一覧
- 人気記事
- バナーリンク
トップページの記事スライダー
![](https://hrdyuic.com/wp-content/uploads/f8783f7688fd51da93b44f98819b352b.jpg)
![](https://hrdyuic.com/wp-content/uploads/f8783f7688fd51da93b44f98819b352b.jpg)
#post_slider .p-postList__link:hover .c-postThumb__img {
transform: none;
}
トップページのピックアップバナー
![](https://hrdyuic.com/wp-content/uploads/05693191a596878b41d2461baafaa543.jpg)
![](https://hrdyuic.com/wp-content/uploads/05693191a596878b41d2461baafaa543.jpg)
#pickup_banner .c-bannerLink:hover .c-bannerLink__img {
transform: none;
}
![](https://hrdyuic.com/wp-content/uploads/map-3120436_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/map-3120436_1920.jpg)
記事一覧
![](https://hrdyuic.com/wp-content/uploads/d786c938b60a4be937a605908758f135.jpg)
![](https://hrdyuic.com/wp-content/uploads/d786c938b60a4be937a605908758f135.jpg)
#main_content .p-postList__link:hover .c-postThumb__img {
transform: none;
}
![](https://hrdyuic.com/wp-content/uploads/blog-528455_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/blog-528455_1920.jpg)
人気記事
![](https://hrdyuic.com/wp-content/uploads/7f9f5c47a34287bdea94dc20f5629c96.jpg)
![](https://hrdyuic.com/wp-content/uploads/7f9f5c47a34287bdea94dc20f5629c96.jpg)
.widget_swell_popular_posts .p-postList__link:hover .c-postThumb__img {
transform: none;
}
![](https://hrdyuic.com/wp-content/uploads/joshua-golde-qIu77BsFdds-unsplash.jpg)
![](https://hrdyuic.com/wp-content/uploads/joshua-golde-qIu77BsFdds-unsplash.jpg)
バナーリンク
バナーリンクブロックに画像を挿入した所から解説しています。
バナーリンクブロックをクリック後、ブロック(トップ)ツールバーから、
(リンク)を選択します。![](https://hrdyuic.com/wp-content/uploads/488d2d4c8ac828121578f3112f05db2f.jpg)
![](https://hrdyuic.com/wp-content/uploads/488d2d4c8ac828121578f3112f05db2f.jpg)
URLを入力後、
(送信)をクリックします。![](https://hrdyuic.com/wp-content/uploads/926f7764b912bdd541a2f918b2f5c04e.jpg)
![](https://hrdyuic.com/wp-content/uploads/926f7764b912bdd541a2f918b2f5c04e.jpg)
これでバナーリンクは完成です。
![](https://hrdyuic.com/wp-content/uploads/eb83f78235cc8072ece4e7f5b2c2035f.jpg)
![](https://hrdyuic.com/wp-content/uploads/eb83f78235cc8072ece4e7f5b2c2035f.jpg)
バナーリンクブロックをクリック後、サイドバーから、「高度な設定」>「追加CSSクラス」にクラスを入力します。
![](https://hrdyuic.com/wp-content/uploads/b8383050471d8dc4c9e7c9a2e3f500df.jpg)
![](https://hrdyuic.com/wp-content/uploads/b8383050471d8dc4c9e7c9a2e3f500df.jpg)
カスタムCSS & JSから、CSS用コードにコードをコピペします。
注意点:追加CSSクラスとCSS用コードに記述したコードは同じ必要があります。ただし、追加CSSクラスの先頭に「 . 」は付けません。
![](https://hrdyuic.com/wp-content/uploads/e0f84e35c1a6671587ed285da97ca252.jpg)
![](https://hrdyuic.com/wp-content/uploads/e0f84e35c1a6671587ed285da97ca252.jpg)
.scale-invalid .c-bannerLink:hover .c-bannerLink__img {
transform: none;
}
![](https://hrdyuic.com/wp-content/uploads/pawel-czerwinski-_9dSF0Hwitw-unsplash.jpg)
![](https://hrdyuic.com/wp-content/uploads/pawel-czerwinski-_9dSF0Hwitw-unsplash.jpg)
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
今回は以上です。