さやろぐのスマホ表示のいちばん上の部分。
専門用語でいう、「ヘッダー」ですね。
ここはシンプルに、「タイトル」と「カテゴリメニュー」にしたいな～とずっと思っていました。
理想はこんな感じです👇
このデザインにするにあたり、以前スクロールするカテゴリメニューをなんとか実装した記事を書いたのですが💡
カテゴリメニューはなんとか実装できたものの、なぜかタイトルとカテゴリメニューの間に余白が出来てしまっていたんですよね。
👆これです、これ。ヘッダー下の余白。
調べる時間がなくて今まで手を付けていませんでしたが、やっと取りかかれましたので、備忘録がてら、記録を残しておきます。
Simplicityでヘッダー下の余白を調整するCSS
それではSimplicityのヘッダー下の余白を調整していきましょう。
コピペで実装できますのでカンタンです。
style.css
まずはワードプレスのトップ画面より、外観→テーマの編集→style.cssにアクセスします。
子テーマのstyle.cssにカスタマイズしてくださいね。
style.cssに以下のタグをコピペします。
/************************************
ヘッダー下の余白
************************************/
@media (max-width: 680px) {
#body {margin-top: -5px; }
}
このCSSを適用するだけで、タイトル画像とカテゴリメニューの間にあった余白が調節できます。
余白を完全になくしたい場合は、-5pxの数値を少しずつ上げていきましょう。
あまり数値を上げすぎると、タイトル画像にかぶってしまいます👇
さやかは-20pxでちょうどでした👇
タイトル部分とカテゴリメニューに余白がなく、つながっているようにするのが今回さやかがしたかったカスタムです。
ここの数値は、設定してあるヘッダーによって値が変わってくるかもしれません。
微調整をしながら確認してみてくださいね。
参考にさせていただいた（というかほとんどいっしょですね）のはこちらのサイトです。
ゆずゆろぐ
ゆずゆ様、分かりやすい説明ありがとうございました😊
Simplicityのヘッダー下の余白調整はカンタン！
以前に他のワードプレスのテーマ（ストークかな？）で、ブログタイトルとカテゴリメニューの余白がなくつながっているものを見つけました。
そのときから「これいいな～」と思って、どうするのかがずっと気になっていました。
さやかが使用しているワードプレスのテーマはSimplicityですが、今回のCSSの書き方だと#bodyを上に寄せるという方法を使っているため、もしかすると他のテーマでもこの方法で対応できるかもしれません。
ヘッダーの余白を調節したい方は、参考にしてください💕
