No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
ueday Merge pull request #8 from hatena/readme/browser-sync-client
テーマ開発手順を変更し、自動リロードを使わないようにする
Latest commit 8184d74 Apr 12, 2018

README.md

Hatena-Blog-Theme-Boilerplate

Boilerplate は、はてなブログのデザインCSSカスタマイズの土台に適したデザインテーマです。

はてなブログの必要最小限の見た目が調整されています。このテーマをもとにしてCSSを書くと比較的楽にデザインテーマが作れます。 「オリジナルテーマの制作にチャレンジしたいけど、0から作るのが大変」という方は、このデザインテーマをもとにしてCSSを書くと比較的楽にテーマが作れます。

Boilerplateは自己責任でご利用ください。お問い合わせははてなブログのサポートフォームではなく、本リポジトリのIssueにお願いします。

CSSのダウンロード

最新のバージョンから boilerplate.css をダウンロードしてください。

セットアップ

SCSSで開発する場合は、下記の手順でリポジトリのcloneとモジュールのインストールを行います。

Required Component

モジュールのインストール

$ git clone git@github.com:hatena/Hatena-Blog-Theme-Boilerplate.git
$ cd Hatena-Blog-Theme-Boilerplate
$ npm install

通常のテーマ開発

下記のコマンドで、SCSSファイル変更の監視とコンパイルを行います。

$ npm start

また、コンパイル後 build/boilerplate.css が作られます。

つづいて、はてなブログの設定を行います。

  1. テーマ検証に使うブログを1つ用意します。
  2. 1.で作成したブログの「デザイン設定」にアクセスし、「カスタマイズ」タブの「デザインCSS」の内容を下記に置き換えて保存します。
@import url("http://localhost:3000/boilerplate.css");

※ Browsersync のブラウザ自動リロードはサポートしていません。

(オプション)レスポンシブデザインのテーマ開発

レスポンシブデザインのテーマを開発する場合、ブログの「デザイン設定」->「カスタマイズ」にアクセスし、「デザインCSS」欄の先頭に下記のコメントを挿入してください。

/* Responsive: yes */

ヘルプ: レスポンシブデザインのテーマを作成する際の注意点 - はてなブログ ヘルプ

構成

boilerplate/
┣┳ scss/
┃┗┳ lib/
┃ ┗ boilerplate.scss
┗┳ build/
 ┗ boilerplate.css

ライセンス

このCSSおよびSCSSファイルはMITライセンスのもと自由に複製・再配布できます。 記事本文の書式やコメント欄のスタイルなど、必要な部分だけをコピーして使ってもかまいません。 このデザインテーマをもとにしたテーマの配布も自由です。

過去のバージョン