こんにちは!社会人2年目で都内でエンジニアとして働いている仮想サーファーです!
今回は、はてなブログのヘッダー部分の余白が大きすぎるのが気になったので、小さくしてみました。非エンジニアの方でもコピペで真似できるように方法を書いておきます!
はてなブログのヘッダーの余白を調整する方法
まず、現状のヘッダー部分のデザインが下の画像。
ヘッダー部分のタイトル周りの余白が大きくて記事の部分がほとんど見えなくなってしまっています。読者はすぐに記事を読みたいはずで、ブログのタイトルなどどうでもいいはずなので、赤ワクで囲った部分の余白を小さくしていきます。
デザイン > カスタマイズCSS > デザインCSSで余白調整
ご自身のデザインCSSの箇所に、以下のコードを貼り付けます。
/***** ヘッダーの空白を小さくする ***/ #blog-title { margin: 0; } #blog-title h1 { padding: 15px; }
コードを貼り付けたら、「変更を保存する」クリックして変更を保存すればヘッダーの余白部分を調整することができます。
変更後のヘッダーがこちら。元の画面よりは少し記事部分が広く表示されるようになりました。
ちなみに、元々あった余白部分には、以下のようなCSSがデフォルトで設定されていました。
#blog-title { margin: 0 0 50px; } #blog-title h1 { padding: 50px 30px 5px; }
marginで「blog-title」というID指定されているhtml部分の下余白が50px部分作られ、「blog-title」というID指定されている「h1」タグのhtml部分では、上・左右・下の余白がそれぞれ作られていました。
既存のデザインCSSを元に、デザインを変えたい箇所のデザインの変更方法を知る方法は、こちらの記事も参考にしていただければ!
https://www.virtual-surfer.com/entry/2018/09/19/193000www.virtual-surfer.com
まとめ
以上、【コピぺでOK】はてなブログのヘッダーの余白を調整する方法でした!
一気にブログのデザイン改善をするのは時間が取れず大変かもしれませんが、小さい改善を少しずつ続けていくことはできると思います。自身のブログのデザインに関してもまだまだ伸び代があると思っているので、今後少しずつ改善して記事にしていきます!
ブログの基本設定はこちらの本が参考になるのでオススメです。