はてなブログ開発ブログ

はてなブログからの公式のお知らせを発信します。

デザインCSSをカスタマイズする土台に適したサンプルテーマを公開しました

本日、はてなブログのサンプルテーマ「Boilerplate」を公開しました。デザインCSSをカスタマイズする土台に適しています。

Boilerplate(ボイラプレート)は、必要最小限の見た目だけがあらかじめ調整された、プレーンなサンプルテーマです。このテーマをもとにCSSを記述すると、はてなブログのデザインテーマを比較的カンタンに作ることができます。

Boilerplateテーマの見た目

「オリジナルテーマの制作にチャレンジしたいけど、ゼロから作るのは大変」という方のために用意しました。ぜひ、このテーマを使って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