飛人のメディア工房

これから自分や会社のWEBサイトやメディアを作ってみよう!というブログです。

【はてなブログ】ヘッダー画像をレスポンシブ対応・余白無し設定にする

はてなブログのヘッダー画像をレスポンシブ対応・余白無しにする

ヘッダー画像にCSSを設定する

カスタマイズする場所:

ダッシュボード>>デザイン

 >>デザインCSS

「デザインCSS」に以下のコードをコピペします。

はてなヘッダー画像をレスポンシブ対応にするCSS

 

「@media (max-width: 480px)」

  • 画面のサイズが480px以下になるとレスポンシブ表示になります。

日本の「モバイル端末画素数別シェア率」はこんな感じらしいので

Mobile Screen Resolution Stats Japan | StatCounter Global Stats

これで見ると、おおむね450以下でいい感じかと。

ここでは、初代iPhoneの解像度(HalfVGA)対応の480px~にしています。

将来的には変わってくる部分ですね。

「background-size: contain」

  • ヘッダー画像の縦横比はそのまま
  • 背景領域に収まる最大サイズで画像を拡大縮小

「background=背景」の内側に収まるようにしてくれます。

はてなヘッダー画像の上下余白を0にするCSS

 

「margin: 0 auto」

  • 領域の上下マージン(余白)が0
  • 左右の余白がオート設定

になります。

あとがき

ヘッダー画像のカスタマイズでは

  1. スマホのヘッダーをレスポンシブ対応にする
  2. ヘッダーの余白をなくす

で、すっきりしました!