はてなブログのテーマを自作してみた

はてなブログのテーマを初めて作ってみたので、
僕なりの作り方みたいなのを紹介します。

1. サンプルテーマをcloneする

はてなブログのサンプルテーマ「Boilerplate」を土台にして作ると簡単に作れるとのことなので、リポジトリをgit cloneします。

git clone git://github.com/hatena/Hatena-Blog-Themes.git

2. boilerplate.lessの自動コンパイル設定

WinLess使うとか、お好きな方法でboilerplate.lessを自動コンパイルするように設定しておきます。

3. 確認用HTMLの作成

自分のはてなブログを開いてトップページとアーカイブページをHTMLで保存します。
保存場所はboilerplate.lessと同じ階層です。
保存したHTMLの

<link rel="stylesheet" type="text/css" href="/style/e4cc78e04db942fed2f0c078ac7ff1871a94fc7e"/>

こんな感じのlinkタグのhref属性を変更して

<link rel="stylesheet" type="text/css" href="boilerplate.css"/>

にしておきます。

4. プレビューの自動更新設定

プレビュー確認はChromeのTincrを使うと自動更新してくれるので楽です。
開いたHTMLの上でDeveloper Tools開いておくだけでCSSが更新されると自動更新してくれます。

※Developer Toolsを開いてないと更新されないので注意

5. Lessファイルを編集していく

Developer ToolsのElementsタブとか見ながら各種Lessファイルを好きなように編集してきます。
ブラウザのウィンドウ幅とか縮めたりしながらレイアウト崩れないように見ながらやると良いです。

6. ブログに適用

デザイン設定画面のデザインcssのところにboilerplate.cssの中身をコピペします。
元から記述してあるコードは削除しちゃって構いません。

7. ブログを確認

ブログのトップページ・記事ページ・アーカイブページを確認して、 問題ないようなら完成です。

追記：はてなブログテーマ制作の手引きなんていうのがあったんですね…