【SWELL】メインビジュアルに余白をつけてサイズを変更する方法

2022 11/12

2022年11月12日

こんにちは、さくらこです！

この記事では、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;
}
}

スマホ用は、こちらのコードをコピーします。