【はてなブログ】ヘッダーの高さを調節する

前から気になってた、ヘッダの高さを調節したいと思います。

だから何?ってことなんですが、私のブログはヘッダがすごく場所とってる。

せっかく書いた記事のスペースがあまり取れないんです。

f:id:naru443:20200626073247p:plain

なので、ここを狭くしてみようと思います。

そのスペースにメニュータグを入れて、カテゴリはそこに並べたいと思ってるんです。

イメージはこんなかんじ。かっこよくない?

f:id:naru443:20200626073618p:plain

ではさっそく。

ヘッダーの高さを調節する

ヘッダーの高さなどのデザインを変えるには、デザインの設定画面の一番下にある「デザインCSS」にコードを貼り付けます。こちらのブログを参考にしました。

デザインCSSってここです。

f:id:naru443:20200626074124p:plain

とりあえず書かれているCCSをそのままコピペしました。

/* タイトルイメージ調整 */
#blog-title {
    padding-top: 5px; /* 画像上部の余白*/
    padding-bottom: 5px; /* 画像下部の余白*/
    height: initial;
}
.header-image-only #blog-title #blog-title-inner {
    height: 250px; /* 画像の高さ */
    background-size: contain;
}
@media (max-width: 480px) {
.header-image-only #blog-title #blog-title-inner {
    height: 150px; /* 画像の高さ */
}
}

おお!いきなりジャストフィット!微調整もなく、いいかんじになってしまいました。

えむしてっくさん、ありがとう。

f:id:naru443:20200626074705p:plain