Hatena-Blog-Theme-Boilerplateを使ってテーマ開発(1)

Hatena-Blog-Theme-Boilerplateを使ってテーマ開発(1)


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

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



Hatena-Blog-Theme-Boilerplateを使う

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

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

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


github.com


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


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

f:id:ausnichts:20180730195217j:plain


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)


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


まずは環境構築でした。