超目立つ！はてなブログのスマホ表示はレスポンシブデザイン一択！

はてなブログのスマホの表示に不満はありませんか？少々物足りないと思っているなら、レスポンシブデザインを適用すると、グッと魅力的に表示することができますよ！

今どきはブログの読者もパソコンよりスマホ経由でブログにやって来るものです。魅力的なスマホ表示をすることができれば、読者からの印象も高まります。もし、ブログのスマホ表示にお悩みなら一度試してみませんか？

私もレスポンシブデザインを適用しましたが、かなり目立ちますよ！※お使いのはてなブログのテーマがレスポンシブデザインに対応しているかどうかをご確認ください。私はBrooklynを使用してます。

今回は、ブログをレスポンシブデザインにしてみて感じたメリットとデメリットをまとめてみました。

レスポンシブデザインを適用するとスマホがパソコンと同じ表示になる

はてなブログをスマホで表示する場合、全体的に必要最低限の表示をしており、正直あまり目立たないというか、地味な印象です。ところが、レスポンシブデザインを適用すると、パソコンでの表示と同じになるので、地味なデザインが一新されます。これにより、読者に対して、よりハッキリクッキリとしたブログを表示することができます。

ダッシュボード→デザイン→スマートフォン→詳細設定→レスポンシブデザインにチェックを入れてやることで、スマホにレスポンシブデザインを適用することができます。

レスポンシブデザインにするとスマホで記事以外の表示が増加する

今までのスマホ表示では、以下が表示されていました。

• プロフィール
• 検索
• 注目記事
• 読者になる

結構表示している項目が少なくて寂しいですよね？

しかし、レスポンシブデザインを適用したスマホ表示では、パソコンの【サイドバーに表示されていた全ての項目】が表示されます！これが凄く気に入りました。サイドバーに追加したいものがある場合、それがそのままスマホでも表示できるのはありがたいです。

※少し気になったのが、レスポンシブデザインにすると注目記事が表示されなくなります。注目記事も引き続き表示したければ、サイドバーに追加をしてやる必要がありそうです。

レスポンシブデザインだとスマホで見出しが目立つ

レスポンシブデザインを適用する以前のスマホでは、どうも見出しが分かりにくくて、文章にメリハリがありませんでした。しかし、レスポンシブデザインを適用すると、スマホでもパソコンと同じ見出しが表示されるので、以下のように見出しが表示され、読みやすい文章へ変化しました！

見出しがより目立つことで、文章にメリハリをつけることができました！どこからが見出しで、どこからが本文なのか分かりやすいです。

レスポンシブデザインを適用してもヘッダー画像が適切に表示されない

さて、レスポンシブデザインには上記の通りメリットがあるとは言うものの、いくつか気になる点もありました。

まず、レスポンシブデザインにしたらスマホでヘッダー画像が正しく表示されませんでした。ご覧のように、画像が途切れてしまっています。

対策として、デザインCSSを追記してやる必要があるようなので、さっそく以下のコードを追加してやりました。ダッシュボード→デザイン→カスタマイズ→デザインCSSに以下のコードを追加します。

-----------------------------------------------

@media (max-width: 480px){
#blog-title-inner,#title a{
height:100px!important;
}

#blog-title-inner {
background-size: contain;
}
}

-----------------------------------------------

ただし、私の場合はそれでも画像が適切に表示されませんでしたので、対策として元の画像の余計な余白をトリミングする処理をしてやりました。すると、スマホでも正しくヘッダー画像が表示できるようになりました。やったぜ！

パソコンと同じヘッダー画像が正しく表示されるようになりました！

レスポンシブデザインではスマホにおいてブログの説明文が消えてしまう

パソコンでの設定でヘッダーを画像だけ表示するのか、画像と文字を表示するのかで私は画像だけを表示する設定にしておいたので、今までのスマホだとブログの説明も表示されていたのですが、これが消えてしまいました。もしこれが嫌ならば、画像と文字の両方を表示する必要があります。

私の場合、ヘッダー画像がそのままブログタイトルなので、ブログの説明を表示すると、どうしても元のブログタイトルが同時に文字で表示されて被ってしまうため、やむを得ず画像表示のみにしています。ブログの説明だけ文字で表示する方法はないものか・・・。

レスポンシブデザインを適用するとブログのファビコンも消えてしまう

レスポンシブデザインにするとそれまでヘッダー部に表示されていたファビコンもスマホ表示から消えてしまうようですね。四苦八苦しながら作ったので少し残念ではありますが、それでも全体的な目立ち具合からしたら、やはりレスポンシブデザインの方がいいかなと思いました。

まとめ

レスポンシブデザインにする前は、全体的に地味で目立たなかったはてなブログのスマホ表示ですが、レスポンシブデザインを適用してやることで、よりブログらしさが増しました。個人的には特に見出しの表示がパソコンと同じになるのがグッジョブ！

確かに一部デメリットも存在しますが、総合的には導入する価値は高いと思います。もし、お使いのテーマがレスポンシブデザンに対応しているなら、一度試してみることをお勧めします。スマホ表示が一気に垢抜けて驚かれるかもしれませんよ？というわけでノマゴンでした！ではでは！