先日からちょこちょこブログデザインをいじっておりまして、一応「暫定完成版」というところまで出来上がったので、簡単に紹介していきたいと思います。
はてなブログのデザインについては偉大なる先人たちが❝コピペするだけで一発❞のHTMLとCSSを作成・配布してくださっています。
要はその便利なものを自分なりに組み合わせて作っただけですが、誰かの参考になればということで。
ブログテーマ
ブログテーマは『Haruni(Haruni - テーマ ストア)』。
全体的に柔らかなデザインで、非常に見やすい。
ハイセンスなグローバルメニューやSNSアイコンを設置するためのカスタマイズ集もテーマストアから飛ぶことができるので、親切である。
デフォルトは可愛らしいピンクグラデーションなのだが、僕のブログのデザインとしては可愛すぎるので、色を調整して青を基調としている。
ちなみに大見出しは「ヘブンリーブルー」で、中見出しと小見出しは「インディゴブルー」である。
↑季節によってデザインの色を変えていくのも楽しそうだ。
これから寒くなるので、寒色の青はいかがなものかと思ったが、深めの青ならばそこまで寒々しくはならないように感じて採用した。
爽やかでシンプルな仕上がりになっていると思う。
Haruniにする前は他のレスポンシブのテーマで背景画像を設定して、薄茶色の背景に黒字にしていた。当時はなんとなく読みやすい気がして。
結局シンプルな「白地に黒」が読みやすいため、背景は設定しないことにした。
カスタマイズ
シェアボタン
冒頭で書いたHaruniのテーマストアからコピペ一発。
↑このシェアボタンはシンプルでハイセンスである。他のデザインでも使いたいくらいだ。
グローバルメニュー
前のデザインでは初めから記事のカテゴリーが表示されるタイプのものを使っていたが、Haruniで簡単に設置できるハンバーガー式のグローバルメニューを設置してみた。
右上の丸いのをクリックすると、左側にカテゴリーがスーッと現れる仕組みだ。
丸いアイコンはスクロールしても追従してくるので、記事を読んでいる途中で関連記事を探すのも楽である。
ここだけはグラデーションを活かして緩急を設けている。
カテゴリーの階層化
以前のデザインから採用しているものである。
一見すると「アニメ」「ゲーム」「日記」とカテゴリーが並んでいるだけだが、左の▶︎を押してみると、
子・孫カテゴリーが顔を出す。ここだけだとわかりにくいので、
ぬ、ぬぬぬん、と。
ゲーム(親)ー世界樹の迷宮X(子)ーサブストーリー、メインストーリー、考察(孫)といった具合だ。カテゴリーが細分化していっても安心。
これは僕のお気に入りで、今後デザインが大幅に変更されようとも、ここだけは変わらないと思う。
aboutページの充実
先日記事でも紹介したところである。さすがにデフォルトのページでは殺風景すぎるということで、デザインの大幅変更を試みている。
スライドアニメーション
これに合わせて、aboutページで参考にさせていただいたオーク二さんの別のブログカスタマイズ記事からスライドアニメーションを取り入れた。
初見の方は「おっ、今のはなんだ！？」となるので、掴みは十分である。
文字サイズの変更
また、今まではあまり気にしたことがなかったが、文字サイズについても変更を加えている。
これもオーク二さんの記事から。オーク二さん様様である。
Google推奨の文字サイズが１６px以上であるということも最近まで知らなかったし、はてなブログで使われているデザインの大半がこの要件を満たしていないことも当然知らなかった。無知とは罪である。
確かに文字が小さくて行間も詰まっていると読みにくいだけでなく、そもそも読むことを諦めてしまう確率が高くなってしまう。
当ブログが目的としている「完読される文章」が遠のいてしまうではないか。
そんなわけで推奨サイズである１６pxよりもさらに大きめの１７px設定したところ、非常に読みやすい。
僕のブログは割と文章量が多くなりがちなので、小さな文字が所狭しと書き込まれていては、さぞかし窮屈だったろう。
一応、改行に気をつけたり箸休め的に画像を多めに使ったりと工夫してはいたが、そもそも文字サイズが小さいのでは読みにくいことこの上ない。
たかが１px、されど１pxである。
総括
以上、先人たちの粋な計らいに助けられて自分の理想とするブログデザインに近づけた次第である。本当にありがとうございます。
ブログデザインを改善することは、当然「ブログの見栄えをよくする」という意図があるが、それ以上に「ユーザーフレンドリー」が根底にあることを忘れてはならない。
自分が管理しやすいブログは、人にとっても読みやすいブログであることが多いだろう。自分本位で自分本位ではない。そのさじ加減が難しいところである。
せっかくここまでできたことだし、しばらくはこのデザインでブログ運営をしていこうと考えている。
