オリジナルテーマを作る
Lessで編集できる
このへんを見てると、作り方が載っていました。ただせっかくLessでBoilerplateを編集できるのだから、Gruntでタスク管理して楽チン編集したいと思いました。
デザインテーマ制作の手引き - はてなブログ ヘルプ
http://178.hatenablog.jp/entry/2013/09/09/074302
Gruntでタスク管理したい
ググってみると、sankakuvalidatorさんのブログが出てきました。これを大いに参考にしました。
はてなブログのテーマを作っていたらgruntでlessをコンパイルする環境ができていた - 三角Validator
環境を設定する
viewフォルダindex.html作成
$mkdir view
$cd view
$touch index.html
viewフォルダを作って、そこへindex.htmlを作成します。
projectName変更
Gruntfile.coffeeに書いてあるprojectNameを自分のものにします。
projectName: 'naoyashigaTheme'
index.htmlをサンプルブログテーマにする
次にindex.htmlに自分のサンプルブログテーマのソースを貼付けます。そしてCSSの読み込み先を修正します。
<link rel="stylesheet" type="text/css" href="./naoyashigaTheme.css"/>
こうするとGruntのパスの設定で「view/naoyashigaTheme.css」が当てられます。直し方がわからないので直接書きました。
<link rel="stylesheet" type="text/css" href="http://localhost:9000/naoyashigaTheme.css"/>
gruntコマンドでLessをコンパイル
$grunt
これでviewフォルダ以下のindex.htmlが呼ばれて、lessファイルを修正すると自動更新してくれるようになりました。
これでテーマを楽チンに制作する準備が整いました。しかしここでやる気がなくなったので、テーマ制作はやる気が出たらまたすることにします笑。