CHROMA v1
一ヶ月前からやっていたブログのデザインが終わったので、ここに CHROMA v1 を発表しよう。
デザインは JAYPEG に、コードは GitHub に置いた。
デザイン
はてなブログの初期設定のテーマから特に変えたかったところは次の3つ。
まず、トップやアーカイブなどの一覧ページでは、投稿した記事をまとめて閲覧できるようにしたかった。そのために記事の概要を伝える部分だけを最低限残し、その他の部分は一覧ページでは非表示にした。
もう1つは、記事ページでは閲覧者が記事の内容だけに集中して読めるようにしたかった。このブログでは、サイドバーに置いていた情報（プロフィール、検索ボックス）がそれほど重要なものでなかったので、サイト全体を1カラムにして元々サイドバーに出ていたものはサイトの下の方に置くようにした。
また、見た目的なデザインに関しては枠線とかシャドウが気になっていた。特にコードブロックのスタイルが強く、記事の途中でこれが出てくると本文が強く分断されているように感じたのでスタイルを抑えるように変更した。
製作の流れと方法
今回はコーディングに取り掛かる前にデザインを作っていない。ブログタイトルのフォントをちょこっと変えた時にはてなブログのコードに少し手をつけてみる気になり、はじめの2週間は少しずつ（時にドラスティックに）CSS を触りながらデザインの変更を行っていった。
デザインがある程度完成した後は、Gist に TODO リスト作ってそれを消化するようにしていった。TODO の内容は、そのときどきで気になった部分のデザインをメモしておくとか、コードをこれからも触っていく上で放置していたら良くなさそうなところを書き残していた。
TODO に書いた内容を修正するかどうかは、修正に取り掛かる時に再度考え直して判断するようにしていたので、タスクの中には結局対応してないものもある。「気になった点をとにかく書き残す」ということを意識していた。
製作方法については、デベロッパーツールではてなブログの HTML と CSS を見ながら各クラスなどに適用させる CSS を Vim 上で書き、Chrome の拡張機能で入れている「My Style」にコード貼り付けてユーザースタイルシートをサイトに適用させ、表示に問題がなければはてなブログの管理画面から書いたスタイルをサイトに適用させるという方法を取っていた。
振り返り
TODO リストを作るなら Gist よりももっと便利なサービスがあるだろうし、上記に書いた製作方法もあまり上手いやり方とは言えないだろう。けれど、「とにかく気になるところをメモに残す」、「小さなことでもいいから毎日手を動かす」、この2つを意識することでなんとか形になった。
ただ、「意識」はなかなか続かないものなので... 、もう少し賢いやり方を身につけたいと思う。
