はてなブログに、タイトル画像(ヘッダ画像)を入れる【レスポンシブデザインでのスマホ対策】

  • 投稿 : 2016-05-03
  • 更新 : 2018-02-01
・はてなプログの無料プラン
・レスポンシブデザイン(PCと同じデザイン)
上記で確認しました
hatena-header01.png

うまくいけば、スマホでもこんな感じで表示できます。

1.画像を用意して、アップロードする
2.スマホ対策用のCSSを追加する


1.画像を用意して、アップロードする

hatena-header02.png

デフォルトで表示されるタイトル画像のサイズは、高さが200px、横幅は最大1000pxです。
はてなブログテーマ制作の手引き - はてなブログ ヘルプ

用意するサイズは、上記を参考にしてください。これよりも小さい場合は、拡大?して利用されるようです。透過PNGとかでもOKでした。

2.スマホ対策用のCSSを追加する

@media (max-width: 480px){
 #blog-title-inner,#title a{
   height:100px!important;   
 }

 #blog-title-inner {
      background-size: contain!important; 
 }
}

デザイン->カスタマイズ-> デザインCSSに上記を追加します。
高さは、height:100pxで指定してるので、調整が必要なら調整してください。
この指定で、無駄な空白ができるのを防いでます。

contain
このキーワードは、背景画像が背景配置領域と同じか小さな幅と高さを持つことが保証される範囲で、なるべく大きくすべきであることを示します。
background-size - CSS | MDN

background-size: contain;の指定が、大きなタイトル画像をスマホ向けに縮小する設定です。

「!important」を付けると上書き(最優先)に適用されます。実際にはなくても良いテーマの場合もあります。削除してみてダメなら必要です。

追記:2018/02/01
@media (max-width:480px) {
  #blog-title {
    height: 100px!important;   
 }
  #blog-title #blog-title-inner {
       background-size: cover!important;   
       height: 100px!important;   
  }
} 
background-size: contain;でなくて
background-size: cover;のほうが良い場合もあります。

cover
このキーワードは、背景画像が背景配置領域と同じか大きな幅と高さを持つことが保証される範囲で、なるべく小さくすべきであることを示します。
contain
このキーワードは、背景画像が背景配置領域と同じか小さな幅と高さを持つことが保証される範囲で、なるべく大きくすべきであることを示します。
background-size - CSS | MDN

情報源:【ZENTO-TEAL】ヘッダー画像調整-スマ―フォンでもぴったり- - 粋なLABO

補足

スマートフォン表示でも、タイトル画像を自由にカスタマイズできるようにしました - はてなブログ開発ブログ
スマートフォンのタイトル画像で、表示領域を画像サイズに合わせることができるようにしました - はてなブログ開発ブログ

上記なんですが、試してみたんですが、「レスポンシブデザイン(PCと同じデザイン)」を使ってるとダメなようです。

導入事例

スマホ用ヘッダー画像の両端が切れていた問題解決!! - なぜと3回唱えて
はてなのレスポンシブだとヘッダー画像が切れていた問題解決したよ! - ひまからの脱却!!大阪ファミリー遊び
はてなブログ「Brooklyn」の無料テーマが良かったので初心者にオススメしたい - しゃちくのあんどぅがしょうぶをしかけてきた!
はてなブログのデザインテーマ「Brooklyn」導入とhtml/CSSカスタマイズ - 接客業勤務♂のドタバタ育児ブログ
はてなブログを始めて最初にやったことのまとめ - 今夜はロールバック!
【はてなブログ開設2週間】初心者が迷ったこと。困ったこと。嬉しかったこと。 - きみと終活とわたし


スポンサーリンク