はてなブログ開発ブログ

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

長いブログもスッキリと表示。記事を分割する「続きを読む」記法をリリースしました

本日、はてなブログに「続きを読む」記法を追加しました。長い記事を書いたときなど、トップページでは途中までを表示し、続きは「続きを読む」から読めるようにできます。

「続きを読む」が表示されたブログの画面

「続きを読む」記法とは、記事を大きく2つに区切る記号です。ブログのトップページなどでは、それぞれの記事が区切り記号まで表示され、残りは「続きを読む」というリンクに省略されます。これをクリックすると、記事全体が単独(パーマネントリンク)で表示されます。

まとまった長さの記事を書くときなど、導入部分のあとに「続きを読む」記法を入れておくことで、トップページでもスッキリとたくさんの記事を見せることができます。はてなダイアリーでも好評の機能で、ご要望もたくさんいただいております。長らくお待たせいたしました。どうぞご利用ください。

「続きを読む」記法の使い方

続きを読む

デザイン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