おはなしの雑貨屋さん

家を買いたい20代がゆっくり更新するブログ。

【はてなブログ】スマホでタイトル画像がはみ出るのを直したい!を解決


blog-title

スポンサーリンク
 

オリジナルの画像を作ったのですが・・・

こんにちわ!猫だるまです。

はてなブログにはヘッダーにタイトル画像を挿入する機能がありますよね。

ブログにオリジナリティを出したいので時間をかけて画像を作成しました。

その画像を適用して、PCで確認したところまでは問題ありませんでした・・・。

スマホだとこうなります

ところが、スマホで確認するとえらいことに。

blog-title

全く納まりきっていません。

画像が大きすぎて画面からはみ出ています。ブログは第一印象が大事なのに、これはマズいです。はやくなんとかせねば。

そうだ、スマホ用の設定をいじれば・・・?

そういえば、はてなブログではPC用とスマホ用で設定を変えることができるんだった!と思い、デザイン設定をいじろうとしました。

しかし、今使っているテーマはレスポンシブデザイン。PCの設定がそのままスマホにも適用されるので、スマホの設定を変えても意味がないことに気が付きました。

PCの設定でなんとかしなければいけません。うーん。

スポンサーリンク
 

一発解決の記事に出会いました

誰か助けてくれ!と思いつつ、記事を探しているとありました。

affiliate-couple.hatenablog.com

そして、すぐ解決しました。このコードを入れると、縦横比そのままに画像がスマホに反映されます。

試行錯誤していた時間はなんだったのだろうか・・・(;´・ω・)

ヘッダー画像カスタマイズの記事はたくさんある

調べている途中で、オリジナルの画像をヘッダーに違和感なく表示させるのに苦労されている方は少なくない、と感じました。

他にもやり方があるので、参考までに以下の記事をご紹介します。

◆どのテーマでも応用できるヘッダー周りの設定について書かれています。

はてなブログのヘッダー、タイトル画像の設定について - Hatena Blog Theme Custom

◆これは自分で画像を書く時の適切なサイズを丁寧に紹介している記事です。

【初心者必見】はてなブログのヘッダー画像サイズ・スマホサイズの適正は? - 専業主婦卒業宣言!

◆初心者向けに画像を設定する過程を紹介しています。

はてなブログのヘッダー画像を横幅いっぱいに、美しく設定するコツ - たわしの帖

みなさんの助けになれば幸いです。

スポンサーリンク
 

こんな記事も書いてます

www.ohanashi-zakka.com

 

www.ohanashi-zakka.com

スポンサーリンク