ブログの模様替えをしてみた
以前から早いうちにやりたいと思っていたブログの模様替えをやっところさやってみた。
もともと、はてなブログは他のブログサービスと比較しても装飾が少なくて、すっきりてしていて良かった。
でも、表示されたページって、なんとなく人のなりや性格を表すような部分もあると思ったりする。
例えば、コートにホコリやペットの毛が着いていたり、靴のカカトを踏んだ後があったり…。
本当にちょっとしたことなんだけど、ブログの見え方を気にするのはそういうことなのかなと思う。
「ああ、こういうことは気にしない人なんだな〜」とか、「センス良さそうな人だな〜」とか、雰囲気というのは意識の一つ下に潜り込む。
いつ誰が見にくるかもわからないブログだけど、ブログのカスタマイズは”おもてなし”に通じる部分があるのかもしれない。
デザインテーマ”SOHO”を適用
今回、”SOHO”というテーマを利用させてもらった。
前々から気になってはいたんだけど、自分のブログに使うとどうなのか〜という漠然とした戸惑いがあった。
戸惑いや躊躇が漠然とし過ぎていて、何も進まなかった気がする。
“SOHO”のテーマについて書いておくと、無料で利用できるデザインテーマで、作者はshiromatakumiさん。
僕の気に入っているポイントとしては、すっきりとシンプルなデザインであるところ。
テキストや写真という、ブログのいちばん大切な部分を際立たせるデザインだな、と感じている。
こちらがテーマストアのページ。
で、こちらはデモサイト。
”SOHO”の作者について
shiromatakumiさんは、僕とおそらく同年代なんじゃないかと思っている。
ブログでは、20代後半から勉強をして、Webに携わる仕事に就かれて、いろいろなことを発信している。
Webデザインに関してや、音楽に関する記事も多めで、ふむふむと思いつついつも読んでいる。
この転職の体験記は、いままで何度も読み返してる。
僕はWebデザインやプログラミングを仕事にしたいなと思いつつ、何もできていない人間だ。
なので、いつもWebデザインの記事は、あまり深く理解していないけど、尊敬の念を抱いている。
”SOHO”の良いところ
とにかくシンプル
なにより、”SOHO”はシンプルで余分な要素を排しているのがいいと思う。
全体の色だけでなく、背景色、ボーダー、インターフェイスに至るまで。
ミニマリストではないが、素っ気ないくらいのシンプルさが心地いい気がする。
ただ不要なものを消すだけではなくて、しっかりUIについても配慮があると思っている。
画像は、ホバーするとシャドウが入るし、グローバルナビにはアニメーションが施されている。
スマホだとこの辺は関係ないのかもしれないが、細かなところまで考えられている。
おしゃれの感覚は人によって違うが、簡単におしゃれに見えるのがすごい。
馬子にも衣装ってやつだ。
中身のないブログにはきついシンプルさなので、ちょっと頭を悩ませている。
レスポンシブ対応＋スマホに親切
“SOHO”を利用するにあたって、レスポンシブにしてみることにした。
レスポンシブかつ、スマホで閲覧するときのための細かなデザインもされている。
まあ、果たしてスマホでブログを読む人が、どのくらい意識しているのかは別だと思うけど。
個人的には、スマホでの表示のフォントのカラーや、マージンの取り方が好きだなと思った。
スマホの小さい画面だと、やっぱりコントラストが強すぎると目が疲れてしまう。
マージンの取り方も結構悩ましい部分なので、痒いところに手が届く気配りだなと感じた。
ブログを見る人にとっても、ブログを書く人にとっても、優しいテーマなのかもしれない。
カスタマイズがらくちん
詳しくは、テーマストアのページを見てもらいたいが、カスタマイズの方法が丁寧に紹介されている。
特にグローバルナビも、画面上で入力してソースコードが出力されるので簡単に設置できる。
僕のブログにも、ついにグローバルナビが誕生してしまった。
それから、Googleフォントを使ったフォントの変更にも触れられている。
明朝体とゴシック体では、やっぱりがらっと印象が変わる。
テーマのデフォルトがとてもシンプルなので、自分好みにカスタマイズしやすいというのも良いと思った。
カスタマイズについて
"SOHO"はシンプルで格好良いテーマなんだけど、自分にはハードルが高いかもと思ったのも事実。
というのも、大した内容を書いていないので、文字だけ際立っても困るのだ。
なので、少しだけCSSをいじって見た。
僕はいろんな人のブログを見るときには、パソコンでブラウザで見ていることが多い。
スマホで見るぶんには大して変化はないのかもしれない。
こういうのを自己満足というのだろうな、と書いていて思った。
”続きを読む”の横幅
僕がいちばん気になったのは、パソコンのブラウザで”続きを読む”のリンクが横幅目一杯になるところ。
ブラウザを大きく開いていればいるほど、少し間延びして見える感じがしてしまった。
なので、横幅を指定してしまった。
加えて、少し存在を目立たせるために、背景色とフォントウェイトを変えた。
グレーの背景色もシンプルでいいのだが、文字の多いブログでは色味があまりに少なすぎる気がした。
なので、僕の好きな青系にしてみた。
背景に色をつけた代わりに、フォントは軽めにしてみた。
僕的には、やっぱり”続きを読む”のアンカーには多少色がついてたほうが、なんとなく目に入る気がする。
でも、はてなブログProだと、トップと記事一覧にしてそこから移動できるので、”続きを読む”は必要ないのかもな〜。
グローバルナビの背景
僕はブログの背景画像に、はてなが提供している背景を使用している。
テーマではグローバルナビも背景色が#fffと指定されていたが、さすがに白が多すぎて、ちょっと寂しい感じもした。
なので、背景画像を透けさせるようにしてみた。
それと、グローバルナビには、hover時にアンダーラインが伸びるようなアニメーションがある。
ここも、少し色味が欲しかったのと、明確にホバー状態を示したいな、と思ってラインを太めにして、青をいれてみた。
サイドメニューのリンクカラー
a要素のカラーはデフォルトでは落ち着いたキャメルブラウンという感じ。
デモサイトを見ても確かにおしゃれなんだけど、なんとなく自分的には落ち着かなかった。
なので、錆びた感じの青色に変更した。
a要素のカラーを指定するときに少し戸惑ったのが、a要素を一括で指定できないことだ。
見出しの部分や、スマホで上部に固定されるナビゲーションのブログタイトル部分も色が変わってしまう。
自分でさらに変えたくない要素を上書きすればいいのだが…、そこまでこだわっている部分でもないので諦めた。
なので、いくつかベースカラーがあって、リンクや強調色、差し色なんかを選べるといいなと思った。
タイトル上の投稿日時
エントリータイトルの左上に投稿した日付の表示されているのだが、この部分だけ、font-familyが違っていた。
大して気にする部分でもないのかもしれないけど、なんとなく違和感があった変更した。
せっかく英数字のフォントでGoogleフォントを使用するなら、この部分にも適用させたいと思うのは僕だけか？？
この日付の部分にはリンクが貼られており、投稿した当日のアーカイブに遷移することができる。
でも、一日に何記事も書くわけではないので、あまり必要なものではない。
なので、font-weightもnormalにしておいた。
【まとめ】ちゃんと時間をかけて整備したい
テーマを変更するにあたり、自分なりに頭を使ったつもりではある。
もちろん”SOHO”のテーマはデフォルトでもじゅうぶん格好いいのだが、やっぱり青系がいいよなと思う自分もいる。
でも、あまりいじりすぎると、スマホ表示にどう影響するかわからないので、まさにおっかなびっくりという感じ。
英数字はゴシックにしたが、デモサイトのように明朝体にすると、ニュースサイトみたいで格好良い。
僕は紙媒体では明朝体が好きだけど、ディスプレイではゴシック体の方が文字を識別しやすいと思っている。
白ベースで余白も多い分、明朝体だとかちっとしすぎる感や広告みたいな感じもあるし。
エントリーのタイトルや、見出しの部分のデザインも、もう少しアピールできないかと考えていたりする。
華美な感じは避けたいけど、文字が多いと、それだけヘッダーや見出しが埋もれやすくなるような気もしている。
あれこれ試したいけど、突然変な表示になったらごめんなさい。
