悩む人アイキャッチ画像の上にマウスを乗せた時に画像が拡大するのを止めたいです。方法があれば教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- 記事スライダー（トップページ）のアイキャッチ画像の拡大を止める方法が分かる
- ピックアップバナー（トップページ）のアイキャッチ画像の拡大を止める方法が分かる
- 記事一覧のアイキャッチ画像の拡大を止める方法が分かる
- 人気記事のアイキャッチ画像の拡大を止める方法が分かる
- バナーリンクのアイキャッチ画像の拡大を止める方法が分かる
本記事の内容
【SWELL】アイキャッチ画像のホバー時の拡大をオフにする方法
完成版
カーソルを画像に乗せてみて下さい。右側は拡大しないと思います。
今回は、この方法を紹介します。
画像拡大をキャンセルするコードのコピペ場所
場所は下記の2ヶ所です。それぞれ紹介します。
- 追加CSS
- カスタムCSS & JS
追加CSS
全ての記事に反映されます。
管理画面メニューから、「外観」＞「カスタマイズ」を選択します。
サイドバーから、「追加CSS」を選択します。
下記、赤枠内にコードを記述（コピペ）します。
カスタムCSS & JS
記事ごとに反映させることができます。
管理画面メニューから、「投稿」＞「新規投稿を追加」を選択します。
投稿から、「カスタムCSS ＆ JS」を開きます。
この中に「CSS用コード」および「JS用コード」を記述（コピペ）します。
アイキャッチ画像のホバー時の拡大をオフにする【5ヶ所紹介】
- トップページの記事スライダー
- トップページのピックアップバナー
- 記事一覧
- 人気記事
- バナーリンク
トップページの記事スライダー
#post_slider .p-postList__link:hover .c-postThumb__img {
transform: none;
}
トップページのピックアップバナー
#pickup_banner .c-bannerLink:hover .c-bannerLink__img {
transform: none;
}
あわせて読みたい
【SWELL】ピックアップバナーの作り方から設置方法までを解説
SWELLでピックアップバナーの作り方から設置方法までを知りたいですか？本記事では、ピックアップバナーの作成および設置や表示崩れ対策を解説しています。SWELLで実装の引き出しを増やしたい方は是非ご覧ください。
記事一覧
#main_content .p-postList__link:hover .c-postThumb__img {
transform: none;
}
あわせて読みたい
【SWELL】記事一覧を固定ページで作成【カスタム投稿にも対応】
SWELLで記事一覧を固定ページで作成する方法を知りたいですか？本記事では、デフォルト投稿タイプで記事一覧を固定ページで作成する方法からカスタム投稿タイプで記事一覧を固定ページで作成する方法まで解説しています。SWELLで記事一覧を固定ページで作成する方法を知りたい方は是非ご覧ください。
人気記事
.widget_swell_popular_posts .p-postList__link:hover .c-postThumb__img {
transform: none;
}
あわせて読みたい
【SWELL】人気記事一覧ページを作成する方法【超簡単です！】
SWELLで人気記事一覧ページを作成する方法を知りたいですか？本記事では、人気記事一覧ページを作成する方法の解説や人気記事一覧ページを表示させた状態を確認することができます。SWELLで人気記事一覧ページを作成する方法を知りたい方は是非ご覧ください。
バナーリンク
バナーリンクブロックをクリック後、ブロック（トップ）ツールバーから、（リンク）を選択します。
URLを入力後、（送信）をクリックします。
これでバナーリンクは完成です。
バナーリンクブロックをクリック後、サイドバーから、「高度な設定」＞「追加CSSクラス」にクラスを入力します。
カスタムCSS & JSから、CSS用コードにコードをコピペします。
注意点：追加CSSクラスとCSS用コードに記述したコードは同じ必要があります。ただし、追加CSSクラスの先頭に「 . 」は付けません。
.scale-invalid .c-bannerLink:hover .c-bannerLink__img {
transform: none;
}
あわせて読みたい
【SWELL】バナーリンクの使い方【文字入り画像リンクが作れる】
SWELLのバナーリンクの使い方を知りたいですか？本記事では、SWELLで用意されているバナーリンクブロックの使い方からWordPress使用者であれば誰でも作れる2パターンのバナーリンクの作り方まで解説しています。バナーリンクの使い方（作り方）を知りたい人は是非ご覧ください。
今回は以上です。