【はてなブログ用】スマホ用ヘッダー画像の両端が切れていた問題解決!!

【はてなブログ用】スマホ用ヘッダー画像の両端が切れていた問題解決!!

はてなブログをやっていた時の記事で私のブログでは閲覧数も多かったため、記事内容はほぼそのままにしておきます。

レポンシブデザインの非レスポンシブ

ブログデザインはBrooklyn

少しずつではあるものの読んでいただいている方が増えており、嬉しい限りであります。

しかし、本日まで放置していた問題があった、それはタイトルにもある通り、スマホのヘッダー画像の両端が切れていたのです。
いやいや、実はこれには深い事情ってもんがあったのですよ。

私のブログではBrooklynという人気のデザインを採用しています。
※はてブロをやっていた時の過去の話です。現在はLION MEDIAというテーマです。こちらについても、いつか記事を作りますね。

Brooklynについての記事はこちら(公式ページ)

shiromatakumi.hatenablog.com

シンプルかつオシャレで、一目惚れをして即採用!
見た目だけではなく、このデザインはレスポンシブデザインなのです。

知らない方のために・・・レスポンシブデザインというのは、ブロガーが書いた記事をPCにもスマホにもタブレットにも、表示を対応させてくれます

レスポンシブじゃない場合は、ブロガーが画像や文字の大きさを「PC用」「スマホ用」という感じで設定しなければいけないのです。
設定する際にhtmlやらCSSやら、僕のようなWEB初心者には少々ハードルの高い作業になってくるので、できればレスポンシブがありがたい。自動的に連動してくれますので。

簡単にいうと、「手間いらず

だからレスポンシブデザインのBrooklynを選んだわけで。
ヘッダー画像も自作し、それなりの出来に満足気になっていたのですが・・・。
スマホで表示してみると・・・

 

レスポンシブデザインじゃないじゃん

スマホで見ると、切れとるやんけ!盛大に両端が切れとるやんけ!!

ヘッダーのブログタイトル部分には「と3回」とだけしか表示されていないのです。
タイトルは「なぜと3回唱えて」ですけど!!!

すぐさま、ブログの管理画面からデザイン修正へと息巻いていたのですが・・・スマホのヘッダー変更できないのです。なぜ。

 

だって、レスポンシブデザインだから!

管理画面を開いた所、こんなこと書いてありました。

 

f:id:nazetosankai:20161201225343p:plain

レスポンシブデザインモードです。スマートフォンでもPCと同じデザインになるため、、以下のスマートフォン設定は適用されません。末尾の「詳細設定」で、レスポンシブデザインとデフォルト表示を切り替えることが出来ます。

「レスポンスしてるんだから、勝手な変更受け付けません」ということでしょうか。頭は良いけど柔軟に対応してくれない、こいつは出来るゆとり世代。

終いには開き直りか、レスポンシブデザインとデフォルト表示を切り替えること出来るYOだって、Brooklynさんって高飛車ね。

困った・・・。だから返す刀でググった。

グーグル先生に打ち込んだ検索ワードは

はてなブログ レスポンシブデザイン ヘッダー画像 スマホ表示

笑って下さい、下手な検索と。

でも、捨てる神あれば、拾う神あり。

今日も先人たちの知恵に救われた。ブログ運営のためのブログカスタマイズさん、ありがとうございます。

blog.z0i.net

書いてある通り、CSS領域に打ち込むと、なんてことでしょう。(ぱらら~♪)

ヘッダーの両端が切れて見えなくなっていたBrooklynさんも、今は3whyさんの手を焼かせないいい子になりました。

しかし、なぜどのブロガーもデザインにこだわるのか?

なぜ!!!

 

それは、読者の目線に立っているから!

やっぱり、みなさんに気持ちよく見てもらいたい。一文字でも自分が書いたものを読んでもらいたい。

役に立ちたい

デザインのことを記事にしている人は、こういう前向きなマインドで記事を書いている人が多いと感じました。僕もそうです。

多少自己満もあります・・・だって自分も気持ちよくなりたいじゃない。他のカスタマイズも記事にしていきたいと思います。

 

まとめ

レスポンシブだからって言って、勉強はしなきゃいけない!

WordPressカテゴリの最新記事