Boilerplate は、はてなブログのデザインCSSカスタマイズの土台に適したデザインテーマです。
はてなブログの必要最小限の見た目が調整されています。「オリジナルテーマの制作にチャレンジしたいけど、0から作るのが大変」という方は、このデザインテーマをもとにしてCSSを書くと比較的楽にテーマが作れます。
Boilerplateは自己責任でご利用ください。お問い合わせははてなブログのサポートフォームではなく、本リポジトリのIssueにお願いします。
デザインテーマの制作にあたっては下記ヘルプページも参考にしてください。
最新のバージョンから boilerplate.css をダウンロードしてください。
SCSSで開発する場合は、下記の手順でリポジトリのcloneとモジュールのインストールを行います。
$ git clone https://github.com/hatena/Hatena-Blog-Theme-Boilerplate.git
$ cd Hatena-Blog-Theme-Boilerplate
$ npm install開発サーバーを利用することで、SCSSの変更をリアルタイムにブログに反映させながらテーマの開発を行えます。
まずははてなブログの設定を行います。
- テーマの動作確認に使うブログを1つ用意します。（普段お使いのブログとは別にブログを作成してください。）
- 1.のブログの「デザイン設定」にアクセスし、「カスタマイズ」タブの「デザインCSS」の内容を下記に置き換えて保存します。
/* Responsive: yes */ - 1.のブログの「設定」->「詳細設定」にアクセスし、「<head>要素にメタデータを追加」を下記に置き換えて保存します。
<script type="module" src="http://localhost:5173/@vite/client" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="http://localhost:5173/scss/boilerplate.scss" crossorigin="anonymous" />
つづいて下記のコマンドで、開発サーバーを起動します。BLOG_DOMAIN_NAME の部分には、上で用意した動作確認に使うブログのドメイン名 (例: example.hatenablog.com) を入力してください。
$ npm start -- BLOG_DOMAIN_NAMEコマンド実行例:
$ npm start -- example.hatenablog.com以上が完了すると、動作確認用のブログに開発中のテーマが反映されます。ブログにアクセスし、表示を確認しながらテーマの開発を行なってください。
テーマの開発が完了したら、下記のコマンドでSCSSをコンパイルします。コンパイルの結果は build/boilderplate.css に出力されます。
$ npm run buildboilerplate/
┣┳ scss/
┃┗┳ lib/
┃ ┗ boilerplate.scss
┗┳ build/
┗ boilerplate.css
このCSSおよびSCSSファイルはMITライセンスのもと自由に複製・再配布できます。 記事本文の書式やコメント欄のスタイルなど、必要な部分だけをコピーして使ってもかまいません。 このデザインテーマをもとにしたテーマの配布も自由です。
- https://github.com/hatena/Hatena-Blog-Theme-Boilerplate-Less
- BoilerplateのLessバージョンです。（開発終了）