【SWELL】アイキャッチ画像のホバー時の拡大をオフにする方法

こういった悩みにお答えします。

【SWELL】アイキャッチ画像のホバー時の拡大をオフにする方法

完成版

カーソルを画像に乗せてみて下さい。右側は拡大しないと思います。

今回は、この方法を紹介します。

画像拡大をキャンセルするコードのコピペ場所

場所は下記の2ヶ所です。それぞれ紹介します。

追加CSS

全ての記事に反映されます。

カスタムCSS & JS

記事ごとに反映させることができます。

アイキャッチ画像のホバー時の拡大をオフにする【5ヶ所紹介】

トップページの記事スライダー

#post_slider .p-postList__link:hover .c-postThumb__img {
	transform: none;
}

トップページのピックアップバナー

#pickup_banner .c-bannerLink:hover .c-bannerLink__img {
    transform: none;
}

記事一覧

#main_content .p-postList__link:hover .c-postThumb__img {
	transform: none;
}

人気記事

.widget_swell_popular_posts .p-postList__link:hover .c-postThumb__img {
	transform: none;
}

バナーリンク

バナーリンクブロックに画像を挿入した所から解説しています。

バナーリンクブロックをクリック後、ブロック（トップ）ツールバーから、 （リンク）を選択します。

URLを入力後、 （送信）をクリックします。

これでバナーリンクは完成です。

バナーリンクブロックをクリック後、サイドバーから、「高度な設定」＞「追加CSSクラス」にクラスを入力します。

カスタムCSS & JSから、CSS用コードにコードをコピペします。

注意点：追加CSSクラスとCSS用コードに記述したコードは同じ必要があります。ただし、追加CSSクラスの先頭に「 . 」は付けません。

.scale-invalid .c-bannerLink:hover .c-bannerLink__img {
	transform: none;
}

今回は以上です。