当ブログテーマ【SWELL】を使った正直な感想 詳しくみる

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

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

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

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

  • テーマエディターの一番下に貼り付ける
  • 「ファイルを更新」をクリックして、画面で反映されているか確認

これでスマホで見たときにも反映されます。

スマホ用には少しの余白に変更しているので、お好みの数字に調整してくださいね!

さくらこ

以上でメインビジュアルのサイズ変更は終わりです。最後まで読んでくださりありがとうございました!

\ホッと一息のお供におすすめ/

よかったらシェアしてね!
目次