はてなブログのスマホ表示を見やすくカスタマイズするために行った3つの方法!

スポンサーリンク

ブログを運営していると訪問者の半分以上はスマホからの訪問ですよね!

最近までスマホ表示のデザインを気にしていなかったのですが思い切ってカスタマイズをしました。

簡単な3つの方法でお洒落なブログに変わったので自分が行った3つの方法を今回はご説明いたします。

 

f:id:Naru1829:20161029223112j:plain

 

はてなブログのスマホのカスタマイズは簡単!

はてなブログをお使いの方ですと、スマホ表示は2種類の方法に分かれると思います。

一つ目はお使いのテンプレートがレスポンシブ対応の場合、PC表示と同じような内容でスマホに表示されるレスポンシブ対応の方法と、もう一つは1からスマホ専用にデザインを作る方法の2種類です。

自分の場合はテーマのレスポンシブ対応ではなくて、1からデザインをカスタマイズしてしまいました。

なぜかというと、自由度が増すので自分好みのこだわりを詰め込むことが出来るからです。

 

どんなスマホ表示のカスタマイズをしたの?

今回カスタマイズをする上で、どうしてもこだわった点は3つです。

 

  1. 余分な表示を無くしてシンプルなデザインで見やすい表示にしたい
  2. PCでも使っているヘッダーの画像をトップに表示したい
  3. 上部に常にメニューバーを表示したい

 

この3つの点を意識して今回はカスタマイズをしていきました。

では具体的にどのように行ったのかを説明したいと思います。

 

まずこのテンプレートをコピペ

色々な人のスマホデザインを拝見していたのですが、『いつから俺ができないと錯覚していた?』のshunさんのカスタマイズが一番デザインも見やすくて自分のやりたい『ヘッダーの表示』なども分かりやすく説明されていますのでおススメです。

 

はてなブログのスマホデザインを一瞬でおしゃれにカスタマイズする方法

www.ituore.com

 

この記事内の手順を最後まで行うと、かなりお洒落なサイトに一瞬で変わります!

 

あとは、ご自身の好きな見出しのデザインなどにしたらオリジナリティが出ると思います。 

この時点でやりたかった『余分な表示を無くしてシンプルなデザインで見やすい表示にしたい』『PCでも使っているヘッダーの画像をトップに表示したい』という二つの点がクリア出来ました。

 

上部にメニューバーの表示をしたい!

次に上部にメニューバーの設置をして、カテゴリーを探しやすくする表示をしたかったのでこちらの『Yukihy Life』さんの記事を参考にしました。

 

コピペ1発+αではてなブログスマホ画面にトグルメニューをつけるカスタマイズ

www.yukihy.com

 

この記事内の通り手順を進めると上部にトグルメニューを表示できるようになるのですが、自分の場合ヘッダー画像に被ってしまうという事が起きましたので、色を透明にすることによって、【MENU】の部分のみを表示して、ヘッダー画像に被らないように設置することが出来ました。


f:id:Naru1829:20161029231921j:image

 

まとめ

現状で行ったスマホの表示のカスタマイズは上記の3点ほどですが、以前よりも滞在時間やページセッション数も増えたので、訪問者の方に他のページも見てもらいやすくなったのではないかと思います!

 

WORDPRESSよりも、はてなブログの方が多くのテンプレートなどもあって簡単にカスタマイズ出来るので楽しいですね!

 

レスポンシブ対応のみの状態の方もとても見やすいですが、思い切ってスマホ表示のみのデザインに切り替えて拘りを見せてはいかがでしょうか?