はてなブログをスマホで見易くするために行った工夫を公開

前回、下記のようなグチ記事を書きましたが週末に時間を掛けたおかげで何とかスマホでも（最低限の）見やすい仕様にすることができました。

スマホ版で見やすくするために行ったことは簡単に言うと、以下の４つ

今となっては、スマホ対応にするカスタマイズはあっけなかったですが、色々頭を悩まされたのでメモしておきます。ブログ初心者の方にも参考になると思います。

ちなみに”レスポンシブデザイン”とはPCで設定したデザインをスマホでも同じように見れるようにすることです。スマホでいちいち設定せずに済むのがメリットす。

結論から言うと、テーマと相性が悪かったからだと思います。

昨日の記事でも書きましたが、はてな無料版ユーザーがスマホでブログを見やすくするためには、「レスポンシブデザイン」にする必要があります（多分、、）。しかし、レスポンシブデザインはテーマによっては適切に反映しないことがあります。なので、今回テーマを変更することで一気に解決に向かいました。

上記でも書きましたが、Brooklynというテーマ変更しました。（ちなみに前回選んでいたテーマは人気3位のDUDE。自分にはスキルが無さすぎて使いこなせなかった。。）

Brooklynについては下記の記事（作成者様）でカスタマイズを含めた詳細が述べられています。

上記の記事を読んで、テーマの雰囲気に惚れたのと、カスタマイズが自分でも可能だと思ったので、このテーマへの変更を決意しました。

グローバルナビやシェアボタンは上の記事を見ると簡単に設定できたので大変助かりました。こういうの作れる人ってマジで天才だと思う、、、

変更したテーマ（Brooklyn）がレスポンシブデザイン対応と書いていたので、そのままカスタマイズを進めました。

スマホ対応でどうしても達成したかったのは「トップページの記事一覧数を少なくする」でした。

これを叶えてくれるドンピシャな記事が以下にて。

ここにあるコードをそのままコピペすれば万事解決しました！

結果がこれ。

f:id:OKUSURI:20170116004228j:image

前回だと50記事並んでいたので、スクロールしまくる必要がありましたが、カスタマイズ後は「記事一覧をもっと表示するボタン」が出てきました。このボタンの下にはカテゴリーや人気記事などが位置されました。自分的にはブログを見るのがかなり楽になったと思います。この人も天才や、、、

うん、、、とりあえず出来た！！おーけー！

こんな感じで自分の悩みはほぼほぼ解決しました。欲を言えば、まだ改善したいとこは多々あるのですが、最低限の問題はクリアできたかなという感じです。

ブログの設定は本当に奥が深いんですねえ。自分のように悩んでいる方のお役に立てれば幸いです。

何か自分のブログを見てて、「いやここ明らかにおかしいよ！」ってとこあればコメント下さい。喜びます。

全然関係ないけど、そろそろ春節すね。今年も中国人観光客は日本に来るんだろうか。

嫌いな中国出張はきっと好きになる