@fand/hatena-blog-theme-boilerplate NPM

hatena-blog-theme-boilerplate

日本語 | English

はてなブログ用テーマのボイラープレートです。

npmで hbt コマンドをインストールしてください。

npm install -g @fand/hatena-blog-theme-boilerplate

hbt コマンドで新しいテーマの雛形を作成できます。以下のコマンドを順に実行すると、 my-theme という名前のテーマが作成されます。

hbt my-theme   # my-themeを作成
cd my-theme
npm install
npm run build  # index.css を出力

テーマのソースコードは lib/ 内で開発してください。デフォルトではscssファイルが生成されますが、lessを使いたい場合はlessファイルで置き換えると自動的に読み込まれます。

テーマが完成したら、 index.css の内容をデザイン設定画面の カスタマイズ > デザインCSS にコピペしてください。どこか適当なところにアップロードしてimportしても良いです。

以下の手順に従うと、browserSyncでデザインをリアルタイムに確認しながらテーマを開発できます。

開発用のブログを作ってください。既存のブログをエクスポート/インポートするなどして、サンプル記事を作成しておくと良いでしょう。
開発用ブログのデザイン設定画面を開きます。 カスタマイズ > デザインCSS の内容を削除し、 カスタマイズ > フッタ に以下の内容を入力してください。
```
<link rel="stylesheet" href="http://localhost:3000/index.css"/>
<script async src='http://localhost:3000/browser-sync/browser-sync-client.js'></script>
```
開発したいテーマのディレクトリで npm start を実行し、browserSyncのサーバーを起動します。
ブラウザで開発用ブログを開き、テーマを開発します。テーマを変更すると自動で反映されるはずです。

MIT

7 years ago

8 years ago

8 years ago