【お知らせ】スマホ版のデザインをリニューアルしました。はてなブログのカスタマイズ参考になる記事もご紹介！
こんにちは。てつみー (@te23_photohibi) です。
先日、スマホ版のブログデザインをリニューアルしました。一応デザインをやっている身として見た目にはこだわりたい！という想いがありながら、HTMLやCSSの知識が皆無だったため後手後手に回ってしまっていました（笑）
参考にさせていただいた記事
コーディングやプログラミングを一から勉強していては何年かかるか分からないので、今回はこちらのサイトを参考にさせていただきながらアレンジを加えてリニューアルしました。
リニューアルのポイント
細かいことを含めたら結構大掛かりでしたが、今回は特に以下の4つのポイントを意識しました。
ポイント① ヘッダーまわりを充実させる
ポイント② フォントを変えて読みやすく
ポイント③ スライダーを導入して華やかに
ポイント④ 回遊性を高める
詳しく解説していきます。
ポイント① ヘッダーまわりを充実させる
ページのTOPであるヘッダーは、ブログのイメージを左右する重要な部分です。ここがしっかりしていると、ブログ全体がきちんと作られている感が出ますのでしっかりと押さえておきたいポイントでした。
今回はひつじの雑記帳で紹介されているものをほぼそのまま使わせていただき、トルグメニュー（ハンバーガー）、ロゴ、読者になるボタンを付けました。
ポイント② フォントを変えて読みやすく
文字のサイズや行間は、文章の読みやすさにも影響してきます。記事タイトルや見出しなど、文字周りをすっきりとさせることで読みやすくなるようにしました。
ポイント③ スライダーを導入して華やかに
ヘッダーの下に画像のスライダーを付けることで、一気に質の高そうなブログに見えるようになります（笑）画像がスライドすることで見た目が華やかになりますし、視覚的に訴えかけられるのでコンテンツも分かりやすくなったと思います。
ポイント④ 回遊性を高める
ヘッダーのトルグメニューやスライダーを導入し、各カテゴリーの記事一覧ページにリンクさせました。いろいろなページへの動線を用意することで、回遊性が高まると同時にコンテンツが充実している感も出すことができました。
コーディングは楽しい
慣れない作業ということもあり、かなり時間がかかってしまいましたが、記事を参考にしながら少しずつ進めていきました。
めちゃくちゃ丁寧にまとめてくださっているので、まったくの素人である僕でもなんとかなりました。ひつじの雑記帳筆者さまに感謝です。本当にありがとうございます！
しばらく作業していると少しずつコツがつかめてきて、だんだん楽しくなってきました（笑）ついつい時間を忘れて没頭、おかげでしばらく寝不足の日々が続きました。ひとつコードを追加するたびにダイナミックに変化していくし、どんどん見映えが良くなっていくのは快感ですね（人の力を借りまくってますが w）
コーディング、ちょっとハマりそうです（笑）
まとめ -もうちょい勉強したい-
少しずつ知識を増やしていって、恥ずかしくないレベルまで到達できたらこのブログでもカスタマイズに関するカテゴリを増やせたらいいなぁなんて考えています。
とりあえずですが、プログラミングをしている友人からオススメされた本は買いました。ココロが折れるまでは頑張って勉強してみようと思います！（笑）
それでは、また。
