コピペでOK!ヘッダーの余白部分を調節するCSS-Simplicity-

さやろぐのスマホ表示のいちばん上の部分。

専門用語でいう、「ヘッダー」ですね。

ここはシンプルに、「タイトル」と「カテゴリメニュー」にしたいな~とずっと思っていました。

理想はこんな感じです👇

タイトル画像とカテゴリメニューの間の余白をなくし、つながりのある

このデザインにするにあたり、以前スクロールするカテゴリメニューをなんとか実装した記事を書いたのですが💡

スマホでグローバルメニュー(カテゴリー)を横スクロールするCSS-Simplicity-
今回はSimplicityでスマホ表示したときにスクロールする、グローバルメニューの実装の備忘録を残しておきます。 ...

カテゴリメニューはなんとか実装できたものの、なぜかタイトルとカテゴリメニューの間に余白が出来てしまっていたんですよね。

Simplicityではヘッダー下に余白が出来てしまう?

👆これです、これ。ヘッダー下の余白。

調べる時間がなくて今まで手を付けていませんでしたが、やっと取りかかれましたので、備忘録がてら、記録を残しておきます。

Simplicityでヘッダー下の余白を調整するCSS

それではSimplicityのヘッダー下の余白を調整していきましょう。

コピペで実装できますのでカンタンです。

style.css

まずはワードプレスのトップ画面より、外観→テーマの編集→style.cssにアクセスします。

子テーマのstyle.cssにカスタマイズしてくださいね。

style.cssに以下のタグをコピペします。


/************************************
ヘッダー下の余白
************************************/

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

このCSSを適用するだけで、タイトル画像とカテゴリメニューの間にあった余白が調節できます。

余白を完全になくしたい場合は、-5pxの数値を少しずつ上げていきましょう。

あまり数値を上げすぎると、タイトル画像にかぶってしまいます👇

ヘッダー下の余白は、-の数値の上げすぎに注意してくださいね。

さやかは-20pxでちょうどでした👇

タイトル部分とカテゴリメニューに余白がなく、つながっているようにするのが今回さやかがしたかったカスタムです。

ここの数値は、設定してあるヘッダーによって値が変わってくるかもしれません。

微調整をしながら確認してみてくださいね。

参考にさせていただいた(というかほとんどいっしょですね)のはこちらのサイトです。

ゆずゆろぐ

【Simplicity2】スマホでみた時の「ヘッダー下の空白」を消す方法
Simplicity2で作ったサイトをスマホやタブレットでみると、ヘッダー画像の下に広めの空白ができていることがあります。上の画像では、ヘッダー画像とパンくずリストの間に、広い空白ができています。このままだと、やや間延びした印象があり、気に

ゆずゆ様、分かりやすい説明ありがとうございました😊

Simplicityのヘッダー下の余白調整はカンタン!

以前に他のワードプレスのテーマ(ストークかな?)で、ブログタイトルとカテゴリメニューの余白がなくつながっているものを見つけました。

そのときから「これいいな~」と思って、どうするのかがずっと気になっていました。

さやかが使用しているワードプレスのテーマはSimplicityですが、今回のCSSの書き方だと#bodyを上に寄せるという方法を使っているため、もしかすると他のテーマでもこの方法で対応できるかもしれません。

ヘッダーの余白を調節したい方は、参考にしてください💕

 

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA