仮想サーファーの波乗り

仮想サーファーの日常

プログラミング・エンジニアのスキルアップ・ブログ運営などに関してよく書く雑記ブログ

➡ Udemyで8/27(木)まで割引セール開催中! 1,200円〜で普段の90%以上OFF!

【コピぺでOK】はてなブログのヘッダーの余白を調整する方法


f:id:virtual-surfer:20180918221417j:plain

こんにちは!社会人2年目で都内でエンジニアとして働いている仮想サーファーです!

今回は、はてなブログのヘッダー部分の余白が大きすぎるのが気になったので、小さくしてみました。非エンジニアの方でもコピペで真似できるように方法を書いておきます!


はてなブログのヘッダーの余白を調整する方法

まず、現状のヘッダー部分のデザインが下の画像。

f:id:virtual-surfer:20180917124618p:plain

ヘッダー部分のタイトル周りの余白が大きくて記事の部分がほとんど見えなくなってしまっています。読者はすぐに記事を読みたいはずで、ブログのタイトルなどどうでもいいはずなので、赤ワクで囲った部分の余白を小さくしていきます。


デザイン > カスタマイズCSS > デザインCSSで余白調整

ご自身のデザインCSSの箇所に、以下のコードを貼り付けます。

/***** ヘッダーの空白を小さくする ***/
#blog-title {
    margin: 0;
}
#blog-title h1 {
    padding: 15px;
}

コードを貼り付けたら、「変更を保存する」クリックして変更を保存すればヘッダーの余白部分を調整することができます。


変更後のヘッダーがこちら。元の画面よりは少し記事部分が広く表示されるようになりました。

f:id:virtual-surfer:20180917125030p:plain


ちなみに、元々あった余白部分には、以下のような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】はてなブログのヘッダーの余白を調整する方法でした!

一気にブログのデザイン改善をするのは時間が取れず大変かもしれませんが、小さい改善を少しずつ続けていくことはできると思います。自身のブログのデザインに関してもまだまだ伸び代があると思っているので、今後少しずつ改善して記事にしていきます!


ブログの基本設定はこちらの本が参考になるのでオススメです。