・はてなプログの無料プラン
・レスポンシブデザイン（PCと同じデザイン）
上記で確認しました
・レスポンシブデザイン（PCと同じデザイン）
上記で確認しました
うまくいけば、スマホでもこんな感じで表示できます。
1.画像を用意して、アップロードする
2.スマホ対策用のCSSを追加する
1.画像を用意して、アップロードする
デフォルトで表示されるタイトル画像のサイズは、高さが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: cover;のほうが良い場合もあります。
cover
このキーワードは、背景画像が背景配置領域と同じか大きな幅と高さを持つことが保証される範囲で、なるべく小さくすべきであることを示します。
contain
このキーワードは、背景画像が背景配置領域と同じか小さな幅と高さを持つことが保証される範囲で、なるべく大きくすべきであることを示します。
background-size - CSS | MDN
情報源：【ZENTO-TEAL】ヘッダー画像調整－スマ―フォンでもぴったり－ - 粋なLABO
補足
・スマートフォン表示でも、タイトル画像を自由にカスタマイズできるようにしました - はてなブログ開発ブログ・スマートフォンのタイトル画像で、表示領域を画像サイズに合わせることができるようにしました - はてなブログ開発ブログ
上記なんですが、試してみたんですが、「レスポンシブデザイン（PCと同じデザイン）」を使ってるとダメなようです。
導入事例
・スマホ用ヘッダー画像の両端が切れていた問題解決！! - なぜと３回唱えて・はてなのレスポンシブだとヘッダー画像が切れていた問題解決したよ！ - ひまからの脱却！！大阪ファミリー遊び
・はてなブログ「Brooklyn」の無料テーマが良かったので初心者にオススメしたい - しゃちくのあんどぅがしょうぶをしかけてきた！
・はてなブログのデザインテーマ「Brooklyn」導入とhtml/CSSカスタマイズ - 接客業勤務♂のドタバタ育児ブログ
・はてなブログを始めて最初にやったことのまとめ - 今夜はロールバック！
・【はてなブログ開設2週間】初心者が迷ったこと。困ったこと。嬉しかったこと。 - きみと終活とわたし
スポンサーリンク
コメント一覧
名前:春野菜 :
はじめまして、春野菜と申します。
レスポンシブデザインを使っているので、掲載していただいているCSS使わせてもらいました。
スマホで表示確認したのですが、うまくいきません。
CSSの全体を見ましたが、他の場所でmediaやblog-titleは指定していませんでした。
他に何が原因で表示されないのでしょうか？
お手数ですがアドバイスいただけないでしょうか。
2017/07/27 23:28
名前:管理人 :
これが原因かは不明ですが、閉じ括弧「｝」がないので、これより後ろに書かれたスタイルがうまく反映されない可能性があるかと思います。
■
CSSのエラーチェックの仕方
https://jigsaw.w3.org/css-validator/validator.html.ja#validate_by_input
上記のツールをつかうと、エラーっぽいところがよくわかると思う。
エラーになってても問題ないところはあるので、上記のツールでエラーが表示されたらすべてダメなわけでもない。
参考：
スタイルシート（CSS）がうまく反映されない、おかしなところがわからない場合 – ブログ運営のためのブログカスタマイズ
http://blog.z0i.net/2017/07/css-validator.html
2017/07/28 00:03
名前:春野菜 :
できました。ありがとうございます。
エラーチェックの仕方も教えていただきありがとうございました。
2017/07/28 09:39
名前:りんご星人 :
初めまして。こちらの記事、本当に助かりました・・・。一発で悩みが解消されました。本当にありがとうございました。
2017/08/20 12:04