CAITO GAME INCEPTION

ゲーム、アニメ、映画、漫画についてオススメ作品の紹介や、独自の魅力をツラツラと。

【雑談】はてなブログのヘッダー画像を『余白無し&レスポンシブ』対応させるのに時間かかったぞ…!

スポンサーリンク

 

どうも! 魁堵(かいと)です!

 

 

 先日の夜中に、待望の「ヘッダー画像」をフレンド様にいただいて『ひゃっほー!これでブログがしっくりくるぞぉ!」と意気込んでいたのですが設定する際に【凄い気になる余白】や、【レスポンシブにしているスマホ(携帯)の画面が見切れる(中央にどーん)】と試行錯誤して寝不足になりました。

 

だけども、何とか解決方法を見つけてカスタマイズCSSの設定を加えるコトで、なんとかなりましたので"道筋メモ"を残しておこうと思います。

 

 

はてなブログ」でのヘッダー画像を頂く!

 前々からお願いしていたフレンドのPen様(絵描きさん)にヘッダー画像をいただいたので熱い気持ちで、いざ設定をします!! 

f:id:caito5963:20190710043055p:plain

(C) 2019 @_pendes
  •  はてなブログの管理画面 > デザイン >カスタマイズ > ヘッダ >タイトル画像 > 画像をアップロード > 完成!

 

よっしゃー!これで完璧だぞぉ!!おお!!!と思いきや、、 

 

なにかおかしい…問題発生。 

 

「なんだこのDIOもビックリの無駄な余白

「レスポンシブデザインにしているスマホでの画像の見え方がおかしい 

 

PC(パソコン)で見た時 

f:id:caito5963:20190710094013p:plain

画像が中央寄りで、上下左右での余白が凄い気になる。 

スマホ(携帯)で見た時

f:id:caito5963:20190710095109j:plain

せっかくの画像が中央寄りの度アップで見切れているだと?!

 「はてなブログ/ヘッダー画像/余白/レスポンシブ」でビビるほどググる

 さっさと解決してやるぞぉ!と思いビビるほどググりますが…。

「何故だ何故しっくり来る記事様が無いのだ…これは詰んだのではないか…?」と心に思いながら以下のコトをひたすら探します。 

 

  1.  はてなフォトライブラリーを使わないでの余白無し
  2.  レスポンシブ時の適切な画像表示

 

はてなブログ」でとうとうしっくり来る記事様に出合う

 途方に暮れている朝方に、とうとうお目当ての記事様を見つけて歓喜をあげました!

 「クラシトトノエ*賃貸の階段のあるおうち」様のくうかさんの記事が私が求めていたのにググっときたので圧倒的感謝です…!!

 

手順メモ

  1.  ヘッダー画像を設定する。
  2.  設定 >デザイン>CSS『くうかさんのCSSコード入力』
  3.  完成

 なのですが…ここでまたしても。

 

問題発生

 くうかさんのCSSコードで「PC(パソコン)の余白を消すコトは可能」だったのですが、「レスポンシブのCSSコード」をいくら入れても反映されないのです。

 

 本当にいくらやっても中央寄り(見切れる)なのです。

一時間ぐらい格闘してもだめ。だけどその瞬間にやっと気づく。

 

「これ…CSSコードの入れる場所が悪いんじゃないのか?」

 

と思いダメ元でやってみますと…。反映されているぞ!!

 

以下に詳細を記載しておきます。

f:id:caito5963:20190710105102p:plain

 ※CSSコードが複雑に入力している場合は、上記の左側の様に一番下に追加しても全く反映されなかったので、右側の上段辺り(デザインが崩れない上段箇所)に入れると反映されました!

 

最終的にPC(パソコン)とスマホで見た時

PC(パソコン)側 ※余白がなくなる。

f:id:caito5963:20190710110337p:plain

スマホ(携帯)側 ※全画面表示になる。

f:id:caito5963:20190710110518j:plain

 

さいごに。

 せっかくいただいたヘッダー画像がちゃんと表示されて何より良かったです!!

CSSコードの張り付ける位置は私の場合は上段で反映されましたが、人によっては様々かもしれませんのでご参考までにしていただけたら良いかと思います。

初心者ブログでのあるある悩みでした!

 

それでは! 魁堵(かいと)でした!