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

この記事をシェアする

こんにちは、オンライン心理カウンセラーの小川(@hamidasiblog)です。

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

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

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

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> */

ちなみにpaddingのあとのpxの数字で微調整できます。
ヘッダー背景が白の場合はヘッダー背景の変更は必要ありません。

参考サイト

sprout-wings.hatenablog.com