こんにちは！らいとです。今回は珍しく、ブログに関する記事になります。
私は1月27日に、はてなブログproに加入し、そこから約一週間かけて、このブログのレイアウトを大幅に変えてきました。主にHTMLやCSSを使ったカスタマイズです。
レイアウトを変えるにあたり、多くの記事を参考にさせていただきました。また、はてなブログについて詳しく書かれたこちらの本も参考にしました。
こちらの本は、特にはてなブログ初心者やこれからはてなブログを始めてみようと考えている方にオススメです。
ブログの開設の仕方や記事の書き方といった基本的なところから、CSSを使ったブログのカスタマイズやアクセスアップのためのSEO対策、アフィリエイトのやり方などあらゆることが載っています。
ただし、CSSやHTMLを使ったカスタマイズは、この本を参考にして行うより、ウェブ上で記事を探してコピペした方が簡単だと感じました。
この本にはカスタマイズできることが一通り書かれているので、そもそも何を変えれば良いか分からない方は、まずこの本を読んでから、ウェブ上で記事を探すのがオススメです。
前置きが少し長くなりましたが、今回は次の3点について書いていきます。
・レイアウト変更のきっかけ
・レイアウト変更の方針
・レイアウトを変更した部分の紹介
レイアウト変更のきっかけ
本格的にブログを頑張ろうと決意し、まずは読者1000人を超える人気ブロガーの方たちのブログを参考にしようと思い、様々なブログを見ました。
そこで他のブロガーの方々と自分のブログのトップページを見比べたときに、明らかに違いを感じた点がありました。
それは私のブログがほとんど初期設定のままで、ダサいという点です。今までデザインは気にしてきませんでしたが、ダサいと感じたことをきっかけにレイアウトを大きく変えることに決めました。
レイアウト変更の方針
レイアウトを変えると言っても、私はシンプルなデザインの方が好きなので、あまり派手にしたくはありませんでした。
あまり派手なデザインだと、肝心な記事にあまり意識が向かなくなってしまうと思います。実際、見たブログの中には、派手すぎて見づらいと感じるものもありました。
そこでレイアウトを変えるうえで心掛けたのは次の2点です。
・初心者っぽさを感じさせるダサいブログからの脱却
・シンプルで見やすいブログ作り
レイアウトを変更した部分の紹介
ここからは具体的に変更した部分を紹介します。大きく分けると次の6つです。
1. 文字の拡大とフォントの変更
2. サイドバーのデザイン変更
3. グローバルメニューの設置
4. カテゴリーの階層化
5. タイトル文字の拡大
6. 記事の見出し
1. 文字の拡大とフォントの変更
デフォルトでは、文字の大きさは15pxです。通常、文字の大きさは16px以上が推奨されているようなので、今回は16pxにしました。以前より少しだけ大きくなっています。
さらにフォントも変更しました。元々のフォントが何だったのかは知らないのですが、人気である「メイリオ」にしてみました。
メイリオは視認性がよく、読みやすいと言われています。丸みを帯びているのが特徴です。
2. サイドバーのデザイン変更
サイドバーとは、ページ右側に表示されているプロフィールや検索、注目記事などと書かれた部分のことです。
左が初期の状態ですが、これだと少しダサいような気がしました。一方で右のようなデザインだとサイドバーが目立ちすぎてしまうように感じました。
その結果、各項目の上下に緑の線を引いたデザインにしました。
3. グローバルメニューの設置
グローバルメニューとは、下の画像の青い四角で囲った部分のことです。
現時点で必要かと言われると何とも言えない気はしましたが、人気ブロガーのトップページには、たいていあるので作りました。
グローバルメニューに載せるカテゴリーの内容は、まだ検討中です。これから変えるかもしれません。
「このページに飛べたら便利！」というのがあったらコメントで教えていただけるとありがたいです。
ちなみにスマートフォンでは、このグローバルメニューの代わりに「MENU」という文字が表示されているはずです。この「MENU」をタップすると、以下のようなメニューが出てきます。
4. カテゴリーの階層化
上の画像では「入試対策」というカテゴリーの中に、「一般入試」「共通テスト」「早稲田理工」の3つのカテゴリーが入っています。これがカテゴリーの階層化です。
今はまだ、それほど必要性を感じていませんが、これから記事の増加に伴ってカテゴリーが増えたときに、必要になってくると思います。
5. タイトル文字の拡大
これは地味すぎる変化なので、ほとんど気づかないと思います。「早大理工生の受験ブログ」というタイトル部分を10％だけ大きくしました。
6. 記事の見出し
これまでは、見出しは以下のように大きくしているだけでした。
6. 記事の見出し
これだと初心者っぽく見えてしまうと思ったので、見出しのデザインを変えました。
最後に
現在、さらにタイトル画像の設定と記事タイトルのレイアウト変更を検討中です。
もし他にも変更した方が良い点、変更前の方が良かったと思う点などがありましたら、コメントをくださるとありがたいです。これからもよりよいブログ作りを目指して頑張っていきます！
