（2017年9月23日公開）
はてなブログPROアップグレード＆独自ドメイン取得に伴い、ブログのデザインを結構変えました（主にスマホ）。忘れないうちに、今回カスタマイズした部分を書き残しておこうと思います。
PC＆スマホ共通のカスタマイズ
現在使用させて頂いているテーマのデザインが好きでして、基本的にはこれで満足しております。手を加えていた部分と言えば、ヘッダー下のグローバルメニュー、サイドバーのフォローボタン、ページの上まで戻れるブログパーツなどを設置していることぐらい。それ以外は特に何もいじっていませんでした。タイトルや見出しのデザインとかそのまんまです。スマホに至っては、なーーんにもいじっていませんでした。
今回カスタマイズしたもののうち、PC・スマホのどちらにも共通するのは、ヘッダー画像と記事下のシェアボタンのデザイン。それぞれ参考にさせて頂いたサイト様も併せてご紹介させて頂きます。
ヘッダー画像
元々、ブログ名をテキストで表示するだけの簡素過ぎるデザインでして、「面白みがないなー」とは思っていたものの、どう作れば良いのかもよく分からず、そのまんまにしていました…(^_^;)
そこで、簡単にブログのヘッダー画像を作る方法はないかと調べていますと、こちらの頭巾さんの記事が非常に参考になりました。
こちらでもご紹介されている「Canva」というウェブサービスを使うと、ほんとにめちゃくちゃ簡単にヘッダー画像を作成することが出来ます。
私は超シンプルなデザインにしてみましたが、フォントやアイコンの種類も豊富なので、凝ったヘッダー画像にしようと思えば、いくらでも作れると思います。無料ですので、是非試してみてください。
記事下のシェアボタン
はてなブログのデフォルトのシェアボタンは、統一感がなく、表示も遅いです。これも変えたいなーとは思っていたものの、CSSとかHTMLに苦手意識があったため、今の今まで放置…(^_^;)
そこで、参考にさせて頂いたのがこちらのshunさんのブログ記事です。
事細かにコードを貼る位置なども記載されているため、ほんとにコピペするだけでシェアボタンのデザインを変えられました。PCでは、枠線付きのボックスにし、スマホでは、色付きのボックスを採用しています。
PCで変更したのは、この2つぐらいです。以下、スマホページのカスタマイズについて、あれこれ書きます。
スマホのカスタマイズ
Google Analyticsでの解析を見ていますと、当ブログに訪れる方の約80%がスマホ（mobile）からの流入です。ということは、いくらPCのデザインを凝ったものにしたところで、当ブログにアクセスされる80%のスマホユーザーの満足度には1ミリたりとも影響はないわけで。。そこで、以下のようなカスタマイズを行いました。
トータルデザイン
またまたshunさんの記事を参考にさせて頂きました。
背景色などは微妙に変えていますが、こちらの記事でご紹介されているとおりに、まずは、スマホのデザインをガラッと変えました。
見出し
PCの場合、見出しがちゃんと表示されるんですが、スマホの場合、ただ太字になっているだけで、見出しと本文との区別がよく分からなかったりします。というわけで、以下のサルワカさんの記事を参考にさせて頂きながら、見出しのデザインを変更。
種類が豊富ですし、デザインはどれもおしゃれなので、お気に入りの見出しデザインが必ず見つかると思います。
フォローボタン
続いて、せっかくPROにアップグレードし、フッター部分をいじれるようになったので、そこにフォローボタンを置こうと思い（正確にはページャ下部分）、以前サイドバーにフォローボタンを設置した際に参考にさせて頂いたゆきひーさんの記事を参照。デザインがシンプルなので、めちゃくちゃ気に入っています。
トグルメニュー
最後に行ったのはトグルメニューの設置です。グローバルメニューでも良いんですが、スマホだと操作しづらいのでは？と思い、トグルメニューにしてみました。またまたゆきひーさんの記事を参照。
まとめ
以上が今回行った主なカスタマイズです。参考にさせていただいたサイト様、貴重な情報のご提供誠にありがとうございました。
おかげさまで、スマホのデザインはそれなりに良くなったのではないか？…と自己満足に浸っています。まだ手直しを加えるかもしれませんが、ひとまずこのへんで！
