Hatena-Blog-Theme-Boilerplateを使ってテーマ開発（1）

別ブログ「＠半径とことこ60分」のテーマを変更しようと思うのですが、この機会に、はてなブログのテーマをどうやって作っているかを書いていこうと思います。

もちろん、どんな方法であれ、HTMLの構造に基づいてCSSを書けばテーマはできますので、作成方法は人それぞれです。

• Hatena-Blog-Theme-Boilerplateを使う
• Sass で開発すると超便利
• Hatena-Blog-Theme-Boilerplateをセットアップする
  • node.js のインストール（win）
  • セットアップ
  • 開発

01Hatena-Blog-Theme-Boilerplateを使う

どのブログシステムを使うにしても、まずHTMLの構造を理解しなければCSSは書けません。

たとえば、はてなブログの個別記事のHTMLは、「はてなブログをWordpress風に！ cms-style（１）-はてなブログの HTML 構造-」のようになっていますが、これらに一から style を指定していくのは大変です。

そのため、はてなブログではサンプルテーマ「Boilerplate」が用意されています。しばらく前まではメタ言語に Less が使われていましたが、現在は Sass に移行しています。どちらも Github にあります。

github.com

メタ言語を使わずに直接 CSSファイルを編集していくのであれば、Releases · hatena/Hatena-Blog-Theme-Boilerplate · GitHubから boilerplate.css をダウンロードして、ファイルの内容をデザインCSSにコピペするだけです。

これにカスタマイズからヘッダに画像でも貼れば、もうそこそこできてしまいます。

02Sass で開発すると超便利

さらにいろいろ手を加えようとするなら、Boilerplate に用意されている Sassを使って開発します。Sass で開発すると便利なことは、

• セレクタを入れ子にできる
  • 視認性が高く早く書ける
  • 親要素を & で参照できる
• 変数が使える
  • 一括変更できる
• 演算が使える
  • 電卓いらず
  • 色指定に darken, lighten が使える
• スタイルの再利用ができる
  • @mixin
  • @extend
  • @import

など、とにかくCSSを書くのが超絶楽になります。

03Hatena-Blog-Theme-Boilerplateをセットアップする

この Boilerplate を Sass で開発するには、node.js をインストールする必要があります。この Boilerplate はコンパイルに node-sass を使っていますので ruby は必要ありません。また、SCSS記法を使っていますので、ほぼCSSと同じように書けます。

node.js のインストール（win）

www.imuza.com

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"
  }
}

まずは環境構築でした。