【はてなブログカスタマイズ】ヘッダー画像の余白を詰める＆レスポンシブ対応

こんにちは、Ogawa(@hamidasiblog)です。

このたびサイトデザインを一新しました。

その際に行ったカスタマイズを備忘録として記録します。

ちなみに前提として、ブログのデザインは、SOHOを利用してます。

ヘッダー画像の大きさは1000pixel×200pixel f:id:tinger02:20170810212956p:plain

ヘッダー画像の余白を詰める＆レスポンシブ対応

/* ヘッダー画像の余白を詰める */
.header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner {
  min-height: initial;
  padding: 80px 0;
}

/* ヘッダー画像スマホ対応 */
@media screen and (max-width:480px) {
  .header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner {
    padding: 30px 0;
  }
}
/* ヘッダーの背景 */
/* <system section="background" selected="#A3D7FF"> */
body{background:#A3D7FF;}
/* </system> */