2018.02.15Simplicity2で作ったサイトをスマホやタブレットでみると、ヘッダー画像の下に広めの空白ができていることがあります。上の画像では、ヘッダー画像とパンくずリストの間に、広い空白ができています。このままだと、やや間延びした印象があり、気になる方もいるかと思います。いうわけで今回は、この空白を調整するカスタマイズ方法を紹介します。スポンサーリンク目次ヘッダー画像下の空白を調整するCSSのコードをコピペするヘッダー画像下の空白を自分好みに調整するヘッダー画像下の空白をさらに狭くするヘッダー画像下の空白を広くする設定を適用する「画面の横幅」を決めるまとめヘッダー画像下の空白を調整する今回のカスタマイズでは、ヘッダー画像下の「空白の高さ」を調整します。ヘッダー下の空白は、お好みの高さに調整することができます。消すこともできますよ。手順をみていきましょう。CSSのコードをコピペする手順は簡単、次に紹介するコードをコピペするだけですよ!手順1次のコードをコピーします。}}手順2WordPressのダッシュボード画面から「カスタマイズ」→「テーマの編集」とすすみます。先ほどコピーしたコードを子テーマの「style.css」に貼りつけます。これでヘッダー画像の下にあった空白がグッと狭くなります。狭くしたい、広くしたいという場合もあるかと思いますので、調整方法も紹介します。ヘッダー画像下の空白を自分好みに調整する空白の高さは、「margin-top:」の後ろの数字で調整ができます。ヘッダー画像下の空白をさらに狭くする空白をさらに狭くする場合は、「margin-top:」の後ろにある数字を「-○px」に変えます。}}というように「-○px」と入力すると、空白を狭くすることができます。・・・が、あまり狭くすると、ヘッダー画像の下が切れてしまいますので、最初は-5pxあたりでようすをみて、調整を重ねていくのがよいかと思います。ヘッダー画像下の空白を広くする空白を広くする場合は、「margin-top:」の後ろにある数字を「○px」に変えます。}}というように「○px」と入力すると、空白が高くなります。数字を大きくするほど空白が広くなります。設定を適用する「画面の横幅」を決めるこれはちょっと応用編。気になる人だけやってみてくださいね。」の後ろにある数字は、画面の横幅を表しています。上のコードだと680pxになっていますが、これは「画面の横幅が680px以下になると、この設定を適用します」という意味です。問題がなければ、いじる必要はないと思いますが、ご自身の環境やデザインに応じて調整してみてください。まとめ今回は、Simplicity2をスマホやタブレットみた時にできる「ヘッダー画像の下の空白」の調整方法でした。デザインによって「ちょうどいい」と感じる空白の違いがあるかと思います。お好みに応じて、調整してみてくださいね。Simplicity、こんなカスタマイズもありますよ!Simplicity2の固定ページで日付(投稿日・更新日)を非表示にする方法Simplicity2の固定ページの日付表示(投稿日・更新日)を消してみました。消したのはこの部分です。いうわけで、その方法を書いてみます。カスタマイズTwitterFacebookはてブPocketLINEコピーゆずゆをフォローするこの記事を書いた人ゆずゆ読むと、ちょっぴり役に立つ&たのしくなるコンテンツを発信しています。