はてなブログでヘッダー、タイトル画像の余白を消す方法と、スマホ対応（レスポンシブデザイン）
スポンサーリンク
こんにちは！IT系アラサーOLのスプラウトです(｀・ω・´)
ブログのカスタマイズをするときに、ちょっとつまづいたことがあったのでこちらに書いておきます。
ちなみに前提として、ブログのデザインは、SOHOを利用してます。
ブログのカスタマイズ全般の記事はこちら
目次
はてなブログのヘッダー画像（タイトル画像）設定時に起こった問題
はてなブログのカスタマイズの一環で、ブログのヘッダーに画像を設定しました。
その時に、PC・スマホ双方で以下のような問題が起こりました。
- [PC]はてなブログのヘッダー画像を設定すると、画像の下に変な余白ができてしまう
- [SP/スマホ]はてなブログのヘッダー画像が、画面からはみ出したり変な大きさになってしまう
なんでやー(；_；)
まずはググってみたが解決せず
同じような問題に当たっている人もたくさんいたようで、Google先生に聞いてみたのですが、なかなか解決しません。。。
設定しているテーマやカスタマイズ状況によってどの対応が必要になるかは人によって違いそうなので、参考リンクをペタペタしておきますね。
ヘッダー画像を余白をなくし画面全体に表示する方法【はてなブログ】 - QUEST MILE
はてなブログのヘッダー、タイトル画像の設定について - Minimal Green
はてなブログのヘッダー画像を横幅いっぱいに、美しく設定するコツ - たわしの帖
シスくん（夫）！ヘルプ！
で、結局CSSの分からないスプラウト1人では対処できず( ´△｀)、夫のシスくんに泣きつきました。
したら、一瞬で解決したよ。
1. 設定した画像サイズ
デザイン上大きな画像を設定する必要はなかったので、H100×W480で画像を作成。
こんなの。
2. ヘッダー画像を設定する
はてなの管理画面＞デザイン＞カスタマイズ＞ヘッダ
よりタイトル画像を設定します。
3. デザインCSSにコードを追加
はてなの管理画面＞デザイン＞カスタマイズ＞デザインCSS
に、以下のコードを追加します。
/* ヘッダー画像の余白を詰める */
.header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner {
min-height: initial;
padding: 40px 0;
}
/* ヘッダー画像スマホ対応 */
@media screen and (max-width:480px) {
.header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner {
padding: 16px 0;
}
}
これだけ！余白微調整したい人は、padding: のあとのピクセルサイズを変えてみてくださいませ。
いい感じに画像が設定できました
PCはこんなかんじ
スマホはこんなかんじ
いい感じに余白が消えてめでたしめでたし♡
ほな、まったね〜(｀・〜・´)ﾉｼ
良ろしければ購読してくださいな(´・∀・｀)
- このブログの
- @itol_sproutさんをフォロー
