はてなブログのスマホカスタマイズでお世話になったブログまとめ

f:id:mmm171218:20180406160135p:plain

ねこやなぎ(@nkyng171218)です。

今回は、はてなブログユーザー向けの記事になります。

 

あなたのブログはスマホから見ても見やすいブログですか?

多くのブロガーさんがパソコンから投稿していると思います。そのためパソコン向けのカスタマイズに集中しがちです。(わたしもそうですが)

 

でも実はブログはスマホから閲覧されていることが多いです。

わたしのブログも8割はスマホからのアクセス

 

スマホデザインのカスタマイズの必要性を感じながらも、「スマホのカスタマイズめんどくさそう」という理由だけで2か月ぐらい放置。

 

しかし「読者ファーストのブログ」を目指すべく、今回重い腰をあげてスマホ画面からも見やすくなるようにカスタマイズしてみました!

 

と言ってもいつも通り、コピペしただけです。笑

前置きが長くなりましたが、参考にさせてもらったブログ様をまとめました。

 

※注意※

スマホデザインのカスタマイズは、はてなブログproユーザーでないと行うことができませんのでご注意ください。

 

 

全体的なデザインの変更

www.ituore.com

 

hitsuzi.hatenablog.com

 

パソコン画面カスタマイズの時と同様にいつ俺さん と、ひつじの雑記帳からこどみすさんの記事を参考にさせていただきました。

 

すごいです。これはもう保存版。こちらの記事を参考にすればスマホカスタマイズはほとんど完了してしまいます。それだけ細かくスマホカスタマイズについて書かれている記事です。

 

こどみすさんのブログではスライドショーにする方法も紹介されています。

特に目玉記事がない当ブログですが、生意気に実装してみました。

 

▼こちら

f:id:mmm171218:20180406000319p:plain

 

なんか見た目がちょっと楽しくなったぞ・・・!

スライドショーで動きがあると目に留まりやすいですね。思わずクリックしたくなります。

 

スマホの見出しデザインの変更

tsukuruiroiro.hatenablog.com

 

サルワカさんのブログを参考にさせていただきました。

パソコン画面の見出しデザインやボックスデザインなども度々参考にさせていただいています。

 

当ブログはレスポンシブデザインに設定していないため、パソコンで設定したCSSスマホに反映されていません。

 

レスポンシブデザインとは

PC、タブレットスマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。

必読!5分でわかるレスポンシブWebデザインまとめ | 株式会社LIG

 

そのため見出しデザインがシンプルなままで、とても読みにくい状態を改善しました。やっぱり見出しにアクセントがあった方が読みやすいですね。

 

下部に固定メニューバー

www.yukihy.com

 

今回もお世話になりました。ゆきひーさんのブログです。

 

以前はヘッダー下にグローバルメニューを設置していましたが、「固定メニューもいいな」と思い設置してみました。

 

▼こちら

f:id:mmm171218:20180406001505j:plain

 

  • トップ画面に戻りたいとき
  • カテゴリーを見たいとき

 

など、わざわざスクロールして上部まで戻らなくていいので読んでいる方は少しでも楽になるかな?

 

あとは白背景に紛れてしまっているので、色を目立たせたいところです。

 

ついでにパソコン画面もちょっといじる

ついでにパソコン画面で気になっていたところもカスタマイズしてみました。

どちらもNO TITLEさんの記事を参考にさせていただきました!

 

読者登録ボタンを目立たせる

www.notitle-weblog.com

 

大きめのボタンを設置して目立たせてみました。

もしよかったら読者登録してもらえるとうれしいです!

 

『関連記事』を下に移動させる

www.notitle-weblog.com

 

これ、以前からどうすればいいんだろうと悩んでいました。記事のすぐ下はフォローボタンやアドセンスを目立たせたいのに、前のままではそこに行きつくまでに関連記事が邪魔でした。こんなに下にあったら余計に押してもらえないよ!

 

▼ということで変更

 f:id:mmm171218:20180406130028j:plain

もしかしてできないのかなと諦めていましたが、今回たまたまこちらの記事に出会うことができました。ようやく解決できてうれしい限りです!

 

ついでのついでにプロフィールアイコンも変更

f:id:mmm171218:20180406130603j:plain

ちょっとやる気出たので描いてみてこっそり変更してました。ころころ変わって申し訳ないですがしばらくこの顔でやって行こうと思います!以後お見知りおきを~m(__)m

 

スマホ画面をカスタマイズして直帰率が下がった!

Googleアナリティクスで直帰率の確認をしたところ、当初91%だった直帰率が83%まで減少しました。以前より滞在してくれる読者さんが増えてくれたみたいです。

 

ちなみに一般的な直帰率は40%ぐらいらしい。

 

それに比べるとまだまだ高い数字ですがこの変化はうれしい!

記事の量や質も大事ですが、見やすいデザインの重要性も高いですね。

 

結論:スマホ画面の見直しは必須!

 

おわりに

今回もお世話になったブログ様、本当にありがとうございました。

まとめてで申し訳ないですがお礼申し上げます。

 

完璧に見やすくなったわけではないですが、以前よりマシになったかな?

未完成なところも多々ありますが、良き変化もありスマホ画面のデザインの重要さを実感することができました。

 

これからも見やすいブログを目指して、こそこそとカスタマイズしていこうと思います!

 

\ 最後までご覧いただきありがとうございました★ /

 

▼その他ブログ関連の記事はこちら
www.nekoyanagi171218.com

 

www.nekoyanagi171218.com

  

www.nekoyanagi171218.com