自分用のブログテーマ作りました

はてなブログ

ここ数日ちまちま作ってたブログテーマの制作が一段落しました。 けど、ヘッダーが気に入らないからそのうちいじるかもしれません…。

以下は、制作手順と使ったツール・ライブラリ、その他注意とかまとめてみました。 これからテーマを作る人とかの参考になればいいなと思います。

制作手順

  1. はてなブログテーマ制作の手引きに書いてあるはてなブログ開発ブログの各ページのHTMLファイルをダウンロード。
  2. ダウンロードしたHTMLファイルのlink[rel=stylesheet]をローカルファイルを参照するように書き換え。
  3. ローカルで各ページを確認しながらガリガリ作る。
  4. 完成したら、実際にはてなブログに反映させて確認。おかしな場所があれば3に戻る。

みたいな感じで進めました。フッターのあたりにはてなブログ開発ブログ特有のHTMLコードがあるのでその部分のスタイルは作りこまなくても良いと思います。

Hatena-Blog-Themesのコードも参考にすると見落としとかに気づいたりするので見ておくと良いです。

使ったツールとかライブラリとか

Bootstrapはなんだかんだ言っても各コンポーネントを一から作る手間が省けたりと何かと便利ですね。

compassはmixin使わなくてもfunctionが強力で便利だし、Gruntfile.jsを書くよりconfig.rbにon_stylesheet_savedを定義して各ツールを適用する方が手軽で良いです。

autoprefixer、csso、csscombは三種の神器として重宝してます :)

注意

bootstrap-sassを使うときは、とにかく必要ないコンポーネントなどを削らないと、はてなブログのテーマ設定のデザインCSSの容量でも書いたように、簡単に容量上限(66KB?)に達してしまうので特に注意が必要です。