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

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

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

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

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

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

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

ではさっそく。

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

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

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

とりあえず書かれている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; /* 画像の高さ */
}
}

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

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