Hatena-Blog-Theme-Boilerplateを使ってテーマ開発（1）
別ブログ「＠半径とことこ60分」のテーマを変更しようと思うのですが、この機会に、はてなブログのテーマをどうやって作っているかを書いていこうと思います。
もちろん、どんな方法であれ、HTMLの構造に基づいてCSSを書けばテーマはできますので、作成方法は人それぞれです。
Hatena-Blog-Theme-Boilerplateを使う
どのブログシステムを使うにしても、まずHTMLの構造を理解しなければCSSは書けません。
たとえば、はてなブログの個別記事のHTMLは、「はてなブログをWordpress風に！ cms-style（１）-はてなブログの HTML 構造-」のようになっていますが、これらに一から style を指定していくのは大変です。
そのため、はてなブログではサンプルテーマ「Boilerplate」が用意されています。しばらく前まではメタ言語に Less が使われていましたが、現在は Sass に移行しています。どちらも Github にあります。
メタ言語を使わずに直接 CSSファイルを編集していくのであれば、Releases · hatena/Hatena-Blog-Theme-Boilerplate · GitHubから boilerplate.css をダウンロードして、ファイルの内容をデザインCSSにコピペするだけです。
これにカスタマイズからヘッダに画像でも貼れば、もうそこそこできてしまいます。
Sass で開発すると超便利
さらにいろいろ手を加えようとするなら、Boilerplate に用意されている Sassを使って開発します。Sass で開発すると便利なことは、
- セレクタを入れ子にできる
- 視認性が高く早く書ける
- 親要素を
&で参照できる
- 変数が使える
- 一括変更できる
- 演算が使える
- 電卓いらず
- 色指定に darken, lighten が使える
- スタイルの再利用ができる
- @mixin
- @extend
- @import
など、とにかくCSSを書くのが超絶楽になります。
Hatena-Blog-Theme-Boilerplateをセットアップする
この Boilerplate を Sass で開発するには、node.js をインストールする必要があります。この Boilerplate はコンパイルに node-sass を使っていますので ruby は必要ありません。また、SCSS記法を使っていますので、ほぼCSSと同じように書けます。
node.js のインストール（win）
node.js のインストールは別記事をご覧ください。
セットアップ
GitHub – hatena/Hatena-Blog-Theme-Boilerplate
こちらの readme に従ってやっていけばいいのですが、git を使っていないのであれば、右上の緑色のボタン「clone or download」をクリックしてzipファイルをダウンロードし、展開しても同じことです。
展開後、そのフォルダに入り、コマンドプロンプトを立ち上げ、そのフォルダで npm install と打てばモジュールがインストールされます。
開発
問題なくモジュールをインストールできれば、テーマを作成するブログの デザイン設定 > カスタマイズ > デザインCSS に
@import url("http://localhost:3000/boilerplate.css");
と入れて保存します。
次に、立ち上がっているコマンドプロンプトから npm start と打ちます。
これで、該当フォルダ内に build/boilerplate.css が作られ、上の @import で読み込まれてブログにCSSが反映されます。さらに、この npm start は scssフォルダ内を常時監視して変更があれば即座に build/boilerplate.css をビルドしますので、ブログをリロードすれば変更を確認できます。以前は、ブラウザ自動リロードが機能していたのですが、現在は対応していませんので手動でリロードするしかありません。
npm のコマンドは package.json をみればわかります。scripts とある部分です。単にビルドしたければ npm run build と打てばOKです。
{ "name": "hatena-blog-theme-boilerplate", "version": "2.0.0", "description": "Boilerplate for Hatena Blog theme", "author": "Hatena Blog", "license": "MIT", "scripts": { "prestart": "npm run build", "start": "npm-run-all -p watch server", "build": "npm-run-all scss autoprefixer", "scss": "node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4 --source-map build/", "autoprefixer": "postcss --use autoprefixer -r build/boilerplate.css", "server": "browser-sync start -c bs-config.js", "watch": "chokidar \"scss/\" -c \"npm run build\"" }, "devDependencies": { "autoprefixer": "^7.1.4", "browser-sync": "^2.18.13", "chokidar-cli": "^1.2.0", "node-sass": "^4.5.3", "normalize.css": "^7.0.0", "npm-run-all": "^4.1.1", "postcss-cli": "^4.1.1" } }
まずは環境構築でした。