スマホ用ヘッダー画像の両端が切れていた問題解決!!
レスポンシブデザインの非レスポンシブ
ブログデザインはBrooklyn
少しずつではあるものの読んでいただいている方が増えており、管理人・3Whyは嬉しい限りであります。
しかし、本日まで放置していた問題があった、それはタイトルにもある通り、スマホのヘッダー画像の両端が切れていたのだ。
いやいや、実はこれには深い事情ってもんがあったのですよ。
僕が選んでいるブログはBrooklynという人気のデザインを採用しています。
Brooklynについての記事はこちら(公式ページ)
シンプルかつオシャレで、一目惚れをして即採用!
見た目だけではなく、このデザインはレスポンシブデザインなのです。
知らない方のために・・・
レスポンシブデザインというのは、ブロガーが書いた記事をPCにもスマホにもタブレットにも、表示を対応させてくれます。
レスポンシブ出ない場合は、ブロガーが画像や文字の大きさを「PC用」「スマホ用」という感じで設定しなければいけないのです。
設定する際にhtmlやらCSSやら、僕のようなWEB初心者には少々ハードルの高い作業になってくるので、できればレスポンシブがありがたい。
簡単にいうと、「手間いらず」
だからレスポンシブデザインのBrooklynを選んだわけで。
ヘッダー画像も自作し、それなりの出来に満足気になっていたのですが・・・。
スマホで表示してみると・・・なぜ!
(本ブログのヘッダー画像気に入ってくれた方で、ご連絡頂ければお手伝い致します。コメントでもどうぞ)
あんたっ!レスポンシブデザインでしょ!!
スマホで見ると、切れとるやんけ!盛大に切れとるやんけ!!
ヘッダーのブログタイトル部分には「と3回」って、タイトルは「なぜと3回唱えて」ですけど!!!!
すぐさま、ブログの管理画面からデザイン修正へ!と息巻いていたのですが・・・スマホのヘッダー変更できないのです。
なぜ!!
だって、レスポンシブデザインだから!
管理画面を開いた所、こんなこと書いてありました。
レスポンシブデザインモードです。
スマートフォンでもPCと同じデザインになるため、、以下のスマートフォン設定は適用されません。
末尾の「詳細設定」で、レスポンシブデザインとデフォルト表示を切り替えることが出来ます。
「レスポンスしてるんだから、勝手な変更受け付けません」ということでしょうか。
頭は良いけど柔軟に対応してくれない、こいつは出来るゆとり世代。
終いには開き直りか、レスポンシブデザインとデフォルト表示を切り替えること出来るYOだって、Brooklynさんって高飛車ね。
困った・・・。返す刀でググった。
グーグル先生に打ち込んだ検索ワードは
「はてなブログ レスポンシブデザイン ヘッダー画像 スマホ表示」
笑って下さい、下手な検索と。
でも、捨てる神あれば、拾う神あり。
今日も先人たちの知恵に救われた。ブログ運営のためのブログカスタマイズさん、ありがとうございます。
書いてある通り、CSS領域に打ち込むと、なんてことでしょう。(ぱらら~♪)
ヘッダーの両端が切れて見えなくなっていたBrooklynさんも、今は3whyさんの手を焼かせないいい子になりましたw
しかし、なぜどのブロガーもデザインにこだわるのか?
なぜ!!!
それは、読者の目線に立っているから!
やっぱり、みなさんに気持ちよく見てもらいたい。
一文字でも自分が書いたものを読んでもらいたい。
役に立ちたい。
デザインのことを記事にしている人は、こういう前向きなマインドで記事を書いている人が多いと感じました。僕もそうです。
多少自己満もあります・・・だって自分も気持ちよくなりたいじゃない。
他のカスタマイズも記事にしていきたいと思います。
まとめ
レスポンシブだからって言って、勉強はしなきゃいけない!