ブログデザインを少し変えたらブログがもっと好きになった
ブログデザインを変えてみた。今まで特に何も考えずに公式テーマを使っていたんだけど、ちょっとイジってテーマを統一しただけで一気に愛着が湧いてきた。
HTMLとかCSSとかって全くわかってなかったけど、この本を参考にやってみたら以外と理解できたので紹介。
ちなみに元のテーマはシンプルな公式の「Report」を選択。具体的にやったことは以下のとおりだが、面倒くさいのでビフォアアフターの写真や、CSSのカスタマイズ内容をわざわざ載せたりはしない。
ブログタイトルの色と大きさを変えてアイコンをつけた
一番上のブログタイトルが目立つように文字の大きさを変えた。フォントの色も黒から紺色にして、となりの説明文はグレーに。この紺とグレーをベースにブログテーマを統一していく。ついでに背景画像を設定する代わりにそれっぽいアイコンをつけてみた。
記事タイトルまわりのカスタマイズ
具体的にはタイトルが目立つようにフォントの大きさを変えて、タイトルの上下に破線を引いた。それからシンプルな表記だった日付とカテゴリーにそれぞれ色枠をつけた。カーソルを置いたら色が反転したりとか、すごい何でもできる。
記事中の見出しをカスタマイズ
この真上のやつなんだけど、大見出しの下におしゃれな線を入れたのと、中見出しのデザインも変更。サイドバーにも大見出しと同じデザインを適用することで統一感が出てきた。
ちなみにこれが中見出し
ブログの幅をカスタマイズ
全体的に幅を広げた。なんとなく余裕ができて見やすくなったと思う。
サイドバーのカテゴリ表示を変更
縦に並んでいたカテゴリ表示を横並びにした。こちらもカーソルを置くと色が反転するようなおしゃれな仕様に。
グローバルナビゲーションをつくった
タイトルのすぐ下にあるサイトメニューみたいなの。ブログのコンセプトを決めているわけではないので、案内したい重要なコンテンツがあるわけではないのだが、なんとなくかっこいいから気に入っている。HTMLから作ったのでこれが一番時間がかかった。
これからカスタマイズしたいこと（未実装）
読者登録やTwitterのリンクのデザイン
変数だとかウェブフォントといった小難しい内容が含まれるようなので一旦後回し。いずれやろう
スマホページのデザインを変更
これは「はてなブログPro」じゃないとできないみたい。それからPCページもせっかくおしゃれに作ったのに広告が邪魔してるのでいずれProにとは思ってるけど、とりあえずはもう少しこのままでいいかな。
最後に
このブログをはじめて約1ヶ月たつけど、デザインを自分で変えたことで一気に自分のモノって感じが強くなったと実感（本のとおりやっただけだけど）。こういう、今までできなかったことができるようになる達成感と、もっと知りたいっていう知的好奇心をくすぐられるのが老いた脳にすごくよさそう。これからもブログを続けていくモチベーションに繋がったよ。今日はそれぐらい。
