あべろぐぷらす

元SEが半農半Xな暮らしを目指して頑張る様子を福島から発信するブログ

はてなブログでヘッダー画像を変更したら、スマホ表示が崩れてしまって苦労した話。

f:id:abeshi01:20180724110549j:plain

こんにちは、あべし(@honjituno)です。今日はブログカスタマイズのお話です!

 

すでにお気づきの方もいるかもしれませんが、ブログのヘッダー画像をようやく変更してみました(*´▽`*)!

 

以前、ブロギル内の『デザインダメ出し部』で指摘されていましたが、なかなか修正できずにいたんですよね…。

 

そこでいざ直してみようと思ったら、スマホで見た時のヘッダー画像が崩れていたりして苦労してしまいました(;´Д`)。

 

というわけで、今回ははてなブログでヘッダー画像をデスクトップの表示とスマホで同じにする方法について書いていこうと思います!

 

ぼくと同じようにヘッダー画像の表示問題に困ってしまった方!ぜひ最後まで読んでみて下さい!

はてなブログでヘッダー画像を変更したら、スマホ表示が崩れてしまって苦労した話。

すがたくさんのダメ出し内容

やろうやろうと思ってなかなかできずにいましたが、ついに…

 

ブログのヘッダー画像を変更することが出来ました(*´▽`*)!!

 

以前、ブロギル内のデザインダメ出し部にて、すがたくさんにダメ出しを頂いておりました…。

 

ご指摘内容は以下の通りです。グサグサささりました!!

 

f:id:abeshi01:20180724110635j:plain

 

変更前はこんな感じでした。デザインの適当さが際立ってますね笑!

 

f:id:abeshi01:20180724110648j:plain

 

スマホの表示が崩れてしまう… 

そんなわけでヘッダーを変更しようとしたわけですが、ここで一つの問題が発生しました!

 

それは、デスクトップのヘッダーを変更しただけだと、スマホの表示が崩れてしまうというもの。

 

実際にお見せすると、このように崩れてしまいます。というか変更後にスマホ表示を確認せず、このまま半日以上運営していました_(:3 」∠)_

 

f:id:abeshi01:20180724110701j:plain

 

なんだ『ろぐぷ』って笑。

 

これはやばい!と思い、とりあえずもとに戻しておいて、上手く表示する方法をググってみることに。

 

参考にしたブログ記事!

そして今回も先人の知恵をお借りすることに成功しました。

 

以下の作業はこちらのサイトを参考にさせていただきました!ありがとうございましたm(_ _)m。

 

www.imaichido.com

 

紹介されているやり方は、本当に簡単でCSSを追加するだけなんですよ( ゚Д゚)!!基本コピペでOKです!

 

ヘッダー画像は推奨サイズ必須! 

簡単だし、これで問題が解決するはずだったのですが…。

 

ここでも上手くいかず、はまってしまいました_(:3 」∠)_。

 

先に原因を書いてしまうと、用意したヘッダー用の画像サイズがはてなブログ推奨のサイズで作られていなかったからでした。

 

ほぼ上の方に消えてしまって、ブログタイトルが完全に隠れてしまっています。

 

f:id:abeshi01:20180724110715j:plain

 

はてなで推奨されているサイズは『1000×200ピクセル』

 

記事中でも触れて下さっていたのに、なぜかサイズ違いな画像をアップしていてうんうん悩んでいました。

 

推奨サイズで作り直したらすぐに成功しました。いい感じです。

 

f:id:abeshi01:20180724110731j:plain

 

カスタマイズ系の作業は、順番通りやることが重要なんですね。みなさんはくれぐれもお気を付けください…。

 

まとめ

はてなブログでヘッダー画像を変更したら、デスクトップとスマホの表示が合わずに苦労した話を紹介してみました。

 

相変わらずカスタマイズ系のお話はすんなりいってくれませんね笑!

 

今回の修正でデスクトップとスマホ表示をそろえることができました。この後は、デザインをもう少しきれいなものにしていく予定!

 

また時間がかかってしまうかもしれませんが、少しずつやっていきますよ(๑•̀ㅂ•́)و✧

 

みなさんもはてなブログでヘッダー画像の表示問題に陥った時は、ぜひ今回の方法を試してみて下さい!それではー!