Stinger

Stinger7:ヘッダー画像とメインコンテンツの間隔を調整する方法

stinger7-thumbnail

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回は無料WordPressテーマ:Stinger7のヘッダー画像とメインコンテンツの間隔を調整する方法を紹介したいと思います。

間隔を調整と言っても、PCサイズとスマホ・タブレットサイズで見やすい間隔は違うと思うので、今回は

  1. PCサイズのみ、ヘッダー画像とメインコンテンツの間隔を調整
  2. スマホ・タブレットサイズのみ、ヘッダー画像とメインコンテンツの間隔を調整
  3. 1.と2.を組み合わせてみる

という3つのカスタマイズを紹介していきます。

カスタマイズ前

↓ 最初の状態ではヘッダー画像とメインコンテンツの間隔は10pxに設定されています。

keni7-header-image-main-contents-margin-before

カスタマイズ後

↓ PCサイズ:ヘッダー画像とメインコンテンツの間隔を40pxに。

keni7-header-image-main-contents-margin-after-1

↓ スマホ・タブレットサイズ:間隔を20pxから40pxに変更。

keni7-header-image-main-contents-margin-after-2

[ad]

1. PCサイズのみ間隔を調整

まずはPCサイズのみ、ヘッダー画像とメインコンテンツの間隔を調整していきます。

Stinger7では子テーマの使用が推奨されているようなので、子テーマの style.css に以下のコードを追加します。

@media only screen and (min-width: 781px){
    #gazou-wide {
        margin: 0 0 40px;
    }
}

保存・更新すると、ヘッダー画像とメインコンテンツとの間隔が40pxになりました。

keni7-header-image-main-contents-margin-after-1

※ 上のコードは、PCサイズ(781px以上)のときに下の余白を40pxにするというものなので、スマホやタブレットの見た目は変わりません。保存・更新しても、下の画像のようにカスタマイズ前と同じ状態のままです。

keni7-header-image-main-contents-margin-before-sp

ちなみに上のコードの margin: 0 0 40px; の部分を違う書き方にすると、 margin: 0px 0px 40px 0px になります。#gazou-wide の上と左右の余白を0pxにして、下の余白を40pxにするというコードです。

ややこしく思えるかもしれませんが、時計回りの順番で省略されているので「margin や padding は時計回り」と覚えるのがオススメです。

2. スマホ・タブレットサイズのみ間隔を調整

今度は先ほどと逆の、スマホ・タブレットサイズのみ間隔を調整して、PCサイズはそのままの状態にしてみます。

style.css などお使いのCSSファイルに以下のコードを追加すると、、、

@media only screen and (max-width: 780px) {
    main {
        padding: 40px 10px 20px;
    }
}

メインビジュアルと記事の最初との間隔が20pxから40pxに広がりました。

keni7-header-image-main-contents-margin-after-2

ここでもpx数を変えれば、ヘッダー画像とメインコンテンツの間隔を調整することができます。先ほどの margin と同じように、 padding も時計回りで上下左右のpx数を指定しているので、お好みに応じて調整してみてください。

3. ここまでのコードをまとめると

最後にここまでのカスタマイズをまとめると、CSSコードは下のようになります。

@media only screen and (min-width: 781px){
    #gazou-wide {
        margin: 0 0 40px;  /*PCサイズ*/
    }
}
@media only screen and (max-width: 780px) {
    main {
        padding: 40px 10px 20px;   /*スマホ・タブレットサイズ*/
    }
}

これも先ほどと同じように、px数を編集すればお好みの間隔に調整できるはずです。気になっていたという方、ぜひお試し下さい。

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。