本日、はてなブログのサンプルテーマ「Boilerplate」を公開しました。デザインCSSをカスタマイズする土台に適しています。
Boilerplate(ボイラプレート)は、必要最小限の見た目だけがあらかじめ調整された、プレーンなサンプルテーマです。このテーマをもとにCSSを記述すると、はてなブログのデザインテーマを比較的カンタンに作ることができます。
「オリジナルテーマの制作にチャレンジしたいけど、ゼロから作るのは大変」という方のために用意しました。ぜひ、このテーマを使ってCSSのカスタマイズに挑戦してください。
もちろん何もカスタマイズしなくても、シンプルなデザインテーマとしてそのまま使うこともできます。
Boilerplateテーマの使い方
Boilerplateテーマのソースコード(CSSおよびLESSファイル)は、GitHubで公開しています。フォークしたり、ダウンロードしてご利用ください。
このCSSおよびLESSファイルは、MITライセンスのもとで自由に複製・再配布できます。このサンプルテーマをもとにしたテーマの配布も自由です。
記事本文の書式やコメント欄のスタイルなど、必要な部分だけをコピーして使ってもかまいません。
シンプルなデザインテーマとして利用するには
Boilerplateテーマを、はてなブログのシンプルなデザインテーマとしてそのまま利用するには、ダッシュボードのデザイン設定ページから「カスタマイズ」タブを開き、「デザインCSS」欄を、次のリンクから取得できるCSSで上書きしてください(元のCSSが必要なら別途保存しておいてください)。
作ったテーマをテーマ ストアに投稿しよう
Boilerplateテーマを土台にしたオリジナルのテーマが作れたら、ぜひ テーマ ストア に投稿してみましょう。
はてなブログのオリジナルテーマを作成する詳細については、ヘルプの「はてなブログテーマ制作の手引き」を参考にしてください。
なお、Boilerplateテーマから何も編集していないそのままをテーマ ストアに投稿するのはご遠慮ください。
【2017年10月11日追記】Boilerplate v2.0.0を公開しました
Boilerplateテーマを2.0.0にアップデートしました。レスポンシブデザインに対応したほか、言語をLESSからSCSSに変更し、さらに使い勝手がよくなりました。
新しいBoilerplateはこちらからダウンロードしてご利用ください。
GitHub - hatena/Hatena-Blog-Theme-Boilerplate
なお、古いバージョンのBoilerplateは、URLを変更しました。
GitHub - hatena/Hatena-Blog-Theme-Boilerplate-Less