こんにちは、さくらこです!
この記事では、SWELLのメインビジュアルのサイズを変更する方法を書いています。


今回の手順での変更はこんな感じです。
SWELLでは、メインビジュアルの高さを変える項目はありますが、横幅を変える項目はありません。
また、表示設定には「周りに余白をつける」とありますが、少しの余白しか確保できません。
なのでCSSコードを使って、周りの余白を調整し、全体的に画像のサイズを小さくしたいと思います!



CSSコードといっても、この記事からコピーしたものを貼り付けるだけなので安心してくださいね!
私の備忘録ですが、参考になれば嬉しいです。
ちなみにグローバルナビの間隔変更については、下記の記事で解説しています!


メインビジュアルのサイズ変更方法
それではさっそく解説をはじめます!
カスタマイズからメインビジュアルを設定


保存して確認すると、こんな感じで大きく挿入されているかと思います。



ひとまず事前準備はこれでOKです!
スタイルシートにコードを貼り付ける
次に下のコードをコピーして、スタイルシートに貼り付けます。
パソコンから見た場合とスマホから見た場合の、2種類のデバイス用のコードを貼り付ける必要があります。
パソコン用
.p-mainVisual{
padding-left: 100px !important;
padding-right: 100px !important;
}
こちらのコードをコピーして、WordPressの管理画面へ移動します。


- 管理画面「外観」より「テーマエディター」を選択
- 右側の項目で「style.css」になっているか確認
- コピーしたコードを貼り付ける
- 「ファイルを更新」をクリックして、画面で反映されているか確認


これでパソコン用のサイズが変更されるはずです。



この画像のように表示されていたら成功です!
次にスマホ用の設定ですが、やることは同じです。
スマホ用
/*media Queries スマホサイズ(599px)以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {
.p-mainVisual{
padding-left: 20px !important;
padding-right: 20px !important;
}
}
スマホ用は、こちらのコードをコピーします。
- テーマエディターの一番下に貼り付ける
- 「ファイルを更新」をクリックして、画面で反映されているか確認
これでスマホで見たときにも反映されます。
スマホ用には少しの余白に変更しているので、お好みの数字に調整してくださいね!



以上でメインビジュアルのサイズ変更は終わりです。最後まで読んでくださりありがとうございました!
【合わせて読みたい】Web制作に役立つ記事をご紹介しています
SWELLを使ったコーポレートサイトの作り方
下記の記事ではWordPressテーマSWELLを使った、コーポレートサイトの作り方をデモサイトを用いながら解説しています。
サロンや企業サイトにおすすめなので、こちらもぜひ参考にしてください。


Web制作に役立つおすすめの本
下記の記事では、現役フリーランスが厳選した、Web制作に役立つおすすめの本をご紹介しています。
ホームページやブログに必須のSEO対策に関する内容の本や、Webマーケティングに関する本などもご紹介しているので、ぜひお役立てください。

