【Simplicity2】スマホでみた時の「ヘッダー下の空白」を消す方法

Simplicity

Simplicity2で作ったサイトをスマホやタブレットでみると、ヘッダー画像の下に広めの空白ができていることがあります。

Simplicity スマホ表示 広めの空白

上の画像では、ヘッダー画像とパンくずリストの間に、広い空白ができています。

このままだと、やや間延びした印象があり、気になる方もいるかと思います。

というわけで今回は、この空白を調整するカスタマイズ方法を紹介します。

ヘッダー画像下の空白を調整する

今回のカスタマイズでは、ヘッダー画像下の「空白の高さ」を調整します。

こんな感じにします。

Simplicity ヘッダー画像の下の空白を狭くするカスタマイズ

ヘッダー下の空白は、お好みの高さに調整することができます。もちろん消すこともできますよ。

では、さっそく手順をみていきましょう。

CSSのコードをコピペする

手順は簡単、次に紹介するコードをコピペするだけですよ!
手順1

次のコードをコピーします。

/* レスポンシブ ヘッダー画像下の空白を調整 */
@media (max-width: 680px) {
 #body {margin-top: 0; }
}
手順2

WordPressのダッシュボード画面から「カスタマイズ」→「テーマの編集」とすすみます。

先ほどコピーしたコードを子テーマの「style.css」に貼りつけます

Simplicityの子テーマにCSSを追加

これでヘッダー画像の下にあった空白がグッと狭くなります。

が、もう少し狭くしたい、広くしたいという場合もあるかと思いますので、調整方法も紹介します。

ヘッダー画像下の空白を自分好みに調整する

空白の高さは、「margin-top:」の後ろの数字で調整ができます。

ヘッダー画像下の空白をさらに狭くする

空白をさらに狭くする場合は、「margin-top:」の後ろにある数字を「-○px」に変えます。

たとえば

@media (max-width: 680px) {
 #body {margin-top: -5px; }
}

というように「-○px」と入力すると、空白を狭くすることができます。

・・・が、あまり狭くすると、ヘッダー画像の下が切れてしまいますので、最初は-5pxあたりでようすをみて、調整を重ねていくのがよいかと思います。

ヘッダー画像下の空白を広くする

空白を広くする場合は、「margin-top:」の後ろにある数字を「○px」に変えます。

たとえば

@media (max-width: 680px) {
 #body {margin-top: 5px; }
}

というように「○px」と入力すると、空白が高くなります。

数字を大きくするほど空白が広くなります。

設定を適用する「画面の横幅」を決める

これはちょっと応用編。気になる人だけやってみてくださいね。

コードの中にある「max-width: 」の後ろにある数字は、画面の横幅を表しています。

上のコードだと680pxになっていますが、これは「画面の横幅が680px以下になると、この設定を適用します」という意味です。

特に問題がなければ、いじる必要はないと思いますが、ご自身の環境やデザインに応じて調整してみてください。

まとめ

今回は、Simplicity2をスマホやタブレットみた時にできる「ヘッダー画像の下の空白」の調整方法でした。

デザインによって「ちょうどいい」と感じる空白の違いがあるかと思います。お好みに応じて、調整してみてくださいね。

 

Simplicity、こんなカスタマイズもありますよ!
Simplicity2の固定ページで日付(投稿日・更新日)を非表示にする方法
Simplicity2の固定ページの日付表示(投稿日・更新日)を消してみました。 消したのはこの部分です。 というわけで、その方法を書いてみます。 Simplicity2の固定ページ...