ブログのトップページを「一覧形式」で表示できるようにしました（はてなブログPro）

はてなブログでは、有料オプション「はてなブログPro」利用者向けに、各ブログのトップページ（PC版*1）を表示するときに「全文形式」と「一覧形式」を選択できるようにしました。これまでのように記事の全文を表示するだけでなく、コンパクトに記事の概要のみを一覧で表示することができます。どうぞご利用ください。

トップページの表示形式を変更するには

トップページの表示形式は、ブログの管理画面から詳細設定ページで設定できます。「トップページの表示形式（PC版）」を「全文形式」と「一覧形式」から選択してください。デフォルトは「全文形式」です。

トップページに表示する記事数

各ブログのトップページには、同じく詳細設定ページにある「トップページの記事数（PC版）」で指定した数だけ記事を表示します。これまでの「全文形式」でも、新しい「一覧形式」でも同様です。

一覧形式はどのように表示されるか

これまでの「全文表示」と新しい「一覧形式」は、それぞれ次のような特徴があります。

形式	説明
全文形式	掲載する記事数だけ本文をすべて（続きを読む記法を使用していればその直前まで）を表示します。デフォルトの表示形式です。
一覧形式	記事のタイトル、概要、アイキャッチ画像などをコンパクトにまとめて、一覧で表示します。

一覧形式のトップページは、次のような表示イメージになります（見栄えはテーマやデザインCSSにより異なります）。

記事それぞれの本文が長い場合や、トップページでたくさんの記事をコンパクトに表示したいときなどにご利用ください。

一覧形式のデザイン・レイアウトについて

一覧形式では、記事一覧ページ（/archive）と同様のHTML構造で、記事の投稿日時、タイトル、カテゴリー、概要、アイキャッチ画像、はてなブックマーク数、はてなスターを、記事ごとにコンパクトにまとめて表示します。このため、一覧のレイアウト・デザインも、デフォルトでは記事一覧ページと同じになります。

ただし、ページ全体のHTML構造については記事一覧ページとトップページで異なるため、デザイン設定の「デザインCSS」などを利用してトップページのみのデザイン・レイアウトを適用させることもできます。

*1:レスポンシブデザインのスマートフォン表示を含む

記事編集画面の編集タブで「HTML」モードを選択できるようにしました（はてなブログPro）

はてなブログでは、記事編集画面の左上にある「編集」タブ（PC版）で選択できる編集モードとして、新しく「HTML」モードを追加しました。編集画面に入力されたテキストすべてを、そのままHTMLとして解釈し、表示します。有料プラン「はてなブログPro」ユーザーが利用できます。

これまでも「見たまま」モードの「HTML編集」タブでは、記事をHTMLとして編集することができました。しかし、「見たまま編集」タブでの操作などにより、さまざまなHTMLタグが自動で挿入・置換され、必ずしも執筆者が意図する通りのHTMLで表示されないことがありました。

「HTML」モードでは、 GUI（WYSIWYG）エディタも、はてな記法やMarkdownといった簡易記法もなく、記述したHTMLをインデント等も含めてそのまま保存し、そのままレンダリングして表示します。

いちからHTMLで執筆した記事がすでにある場合や、HTMLの細部にまで思い通りに記述したいときなどにご利用いただけます。

HTMLモードご利用時の注意点

HTML編集モードは、他の編集モードとは異なり、基本設定ページでデフォルトの編集モードとして選択することはできません。PC版の記事編集画面を開き、編集タブから選択してください。

※編集タブで編集モードを選択すると、テキストエリアをリセットするため、執筆中の本文はすべて消去されます*1。

HTMLモードでは、入力補助ツールバーは表示されません。見出しや文字装飾には、プレビューで確認しつつHTMLタグを記述してください。

※目次記法、脚注記法、続きを読む記法など、はてな記法を前提とした一部の機能は、HTMLモードでは利用できません。

*1:ブラウザの機能として、リセット後のテキストエリアに消去前のドキュメントがフィルインされることがありますが、はてなブログとして以前の内容が残ることを保証するものではありません。

カテゴリー別記事一覧で、ページのタイトルや説明文をカスタマイズできるようにしました（はてなブログPro）（追記あり）

はてなブログでは、カテゴリー別記事一覧（PC版*1）において、ページのタイトルや説明文を自由にカスタマイズできる機能を、有料プラン「はてなブログPro」利用者向けにリリースしました。特定のカテゴリーを目立たせたり、おすすめ記事を冒頭に表示したりといったリッチな表現が、カテゴリー別記事一覧ページで可能になります。どうぞご利用ください。

カテゴリー別記事一覧ページは、URLのパス部分が/arvhive/categoryにカテゴリー名が続く以下のような形をしており、記事のタイトル下などに並ぶカテゴリー名をクリックしたときに表示されます。

カテゴリー別記事一覧の例：http://staff.hatenablog.com/archive/category/新機能

カテゴリー別記事一覧のタイトルと説明文をカスタマイズするには

ダッシュボードのカテゴリー画面を開くと、そのブログで使用しているカテゴリー名が記事数順に一覧表示されています。カテゴリー名の右側にある「編集」ボタンをクリックすると、カテゴリー名を変更することができますが、この「編集」ウィンドウで、カテゴリー別記事一覧のカスタマイズもできます。

編集ウィンドウでは「カテゴリーの説明」欄のほか、「カテゴリー別記事一覧のタイトルを設定する」にチェックを入れると「カテゴリー別記事一覧のタイトル」という設定項目が表示されます。それぞれ次のようなカスタマイズができます。

設定項目	説明
カテゴリー別記事一覧のタイトル	指定した文字列が、そのカテゴリーの記事一覧でパンくずリストの下に表示される見出し（h2要素）と、ページタイトル（title要素）になります。デフォルトでは、カテゴリー名がそのまま表示されます。
カテゴリーの説明	見出し（h2要素）の下に、指定した説明文を表示できます。説明文には、HTMLタグを使用できます。カテゴリー別記事一覧が2ページ以上になる場合、説明文は1ページ目のみに表示されます（タイトルは2ページ目以降も表示されます）。

はてなブログProに加入していない場合、説明文はなく、見出しとタイトルにはカテゴリー名がそのまま使われます。

※本機能を利用中に「はてなブログPro」を解約した場合、説明文は非表示になり、見出しとタイトルはデフォルトのカテゴリー名になります。はてなブログProに再び加入すると、以前に設定した内容がそのまま表示されます。

カテゴリー別記事一覧ページのHTMLについて

カテゴリー別記事一覧ページの冒頭の見出しと説明文は、以下のようなHTMLで表示されます。CSSでカスタマイズする際の参考にしてください。

<h2 class="archive-heading">タイトル名</h2>
<div class="archive-description">カテゴリーの説明</div>

【5月29日追記】タイトルと説明文を非表示にするには

ダッシュボードの詳細設定画面から、タイトルと説明文の表示・非表示を切り替えられるようにしました。チェックを外すと、タイトルと説明文を非表示にできます。

なお、はてなブログProに加入していない場合にも、カテゴリー別記事一覧ページにはタイトル（カテゴリー名）が新しく表示されるようになっています。この設定項目のチェックを外すと、タイトルを非表示にできます。

*1:レスポンシブデザインのスマートフォン表示を含む

記事の管理画面から編集履歴を確認し、以前の状態に戻せるようにしました

はてなブログでは、記事を再編集したときに以前の状態を確認できる「編集履歴」機能を、記事の管理画面に追加しました。公開または下書き保存済みの記事について、記事編集画面で「記事（下書き）を更新する」ボタンを押して保存するたびに履歴が記録され、履歴の一覧からその状態に戻すことができます。

編集履歴は、記事ごとに最新の5回分が記録されます。はてなブログProをご利用の場合は、記事ごとに最新50件の履歴が記録されます。

うっかり記事の一部を消してしまったときにも元のバージョンに戻すことができ、さらに安心してブログを編集いただけるようになりました。とくに、ブログメンバー機能を使って1つの記事を複数人で編集するときなどに便利かと思います。どうぞご利用ください。

編集履歴を確認して以前の状態に戻すには

編集履歴は、記事の管理画面（PC版）にある各記事の「編集」ボタンに追加されています。編集ボタンをクリックすると、現状の記事編集画面を開く「編集」メニューと、「編集履歴を見る」メニューが表示されます。

※ブログメンバー機能を利用しているとき、寄稿者は自分が編集可能な記事の履歴のみを閲覧できます。

メニューから「編集履歴を見る」を選択すると、記事ごとの編集履歴が一覧表示されます。それぞれの履歴では、本文の冒頭、作成者、保存時間が表示されます。

履歴の右側にある「この履歴から編集」ボタンをクリックすると、その時点で記録されていた記事編集画面が再現されます。内容を確認し、問題なければ記事を編集して「記事（下書き）を更新する」ボタンをクリックすると新しい編集履歴が記録されます。

※編集履歴に記録されるのは、記事の本文とタイトルです。概要やアイキャッチ画像などの編集オプションや公開状態は最新の記事のものが引き継がれます。

サイドバーの記事一覧モジュールで、記事タイトルの表示文字数を指定できるようにしました（ほか1件）

はてなブログでは、サイドバーに追加できる記事一覧モジュールにおいて、指定した文字数に記事タイトルを切り詰めて表示できる機能を追加しました。また、Markdownの脚注記法に対応しました。

サイドバーの記事一覧モジュールで、記事タイトルの表示文字数を指定できるようにしました

はてなブログのサイドバー（PCおよびレスポンシブデザイン）には、「最新記事」「関連記事」「注目記事」といった記事一覧モジュールを配置できます。この記事一覧で、表示する記事タイトルの文字数を指定できるようにしました。記事タイトルに長短があっても、記事一覧モジュールの見栄えをほぼ一定にデザインできます。

ダッシュボードの「デザイン設定」画面で、「カスタマイズ」タブの「サイドバー」からそれぞれの記事一覧モジュールを選択すると、設定ダイアログに「タイトルを表示」という項目が追加されています。デフォルトではタイトル「全体」を表示しますが、「文字数を指定する」を選択して「表示する文字数」を指定すると、長いタイトルを先頭から指定した文字数で切り詰めて表示します。

記事一覧モジュールで記事ごとに表示するタイトルの文字数を指定できる

サイドバーへのモジュールの追加・設定については、ヘルプ「サイドバーにモジュールを設置する」や、以前の告知などを参照してください。

サイドバーの「最新記事」をカスタマイズできるようにしました - はてなブログ開発ブログ

※現在のデフォルトテーマ「Life」をはじめとする1カラムレイアウトのデザインテーマや、レスポンシブデザイン対応のテーマをスマートフォンで表示した場合、サイドバーは記事本文の横ではなく下に配置されます。

Markdownの脚注記法に対応しました

はてなブログの記事編集画面で利用できるMarkdownモードで、Makrndownの脚注記法に対応しました。例えば、次のように記述します。

Markdownモードでの脚注記法[^1]に対応しました。

[^1]: ここに脚注の内容を記述できます。

どうぞご利用ください。

これは次のようにフォーマットされます。

はてなブログの記事編集画面で利用できる編集モードについては、ヘルプ「編集モード」などを参照してください。

Markdownについて

Markdown（マークダウン）は、簡易な記法でWeb文書を記述できる軽量マークアップ言語です。GitHubなど、Webエンジニアリングの現場を中心に広く利用されています。はてなブログでは、オリジナルの記法や、GFM（GitHub Flavored Markdown）の一部に対応しています。今回サポートした脚注は、PHP Markdown Extra由来の記法です。

※記事編集画面の入力補助ツールバーにある「脚注」ボタンなどでは、Markdownモードでもはてな記法の脚注をサポートしています。はてな記法とMarkdownの脚注に互換性はなく、それぞれ個別にフォーマットされます。

カレンダー形式で公開記事を確認できるダッシュボードの機能「こよみモード」を公開しました

はてなブログは11月7日（月）、これまで公開した記事をカレンダー形式で一覧できる「こよみモード」を公開しました。自分のブログの更新状況を確認したり、過去の投稿記事を振り返ったりできます。どうぞご利用ください。

こよみモードの見た目

こよみモードは、PCからご利用できます。ブログのダッシュボード（http://blog.hatena.ne.jp/）を開き、「ブログの概要」でタブ「こよみモード」をクリックしてください。公開範囲はブログの所有者およびブログメンバーです。他ユーザーのこよみモードを見ることはできません。

カレンダーから記事が投稿できる

記事を投稿した日のカレンダー上に、記事タイトルが表示されます。空欄の日付をクリックすると記事編集画面が開き、いつものように記事を投稿することができます。なお、過去や未来の日付の場合、クリックした日付が記事の投稿日となります。

※未来の日付で投稿した場合、デフォルトで予約投稿になります。そのまま公開したい場合は、編集オプション「指定日時で予約投稿する」のチェックを外し、公開してください。

「あゆみ」で過去に投稿した記事を振り返る

カレンダー右のあゆみには、過去の同じ月に投稿した記事を表示します。表示する記事は、1年につき1件で、こよみモードのカレンダーで表示されている月を起点に5年前までが対象です。

ひと月に複数の記事を書いている場合は、”今日”の日付をもとに一番近い日の記事を表示するため、日によってあゆみは異なります。

こよみモードで、あなたの毎日を書き残そう

こよみモードは、はてなブログ5周年を記念した機能です。2011年11月7日にベータ版をリリースしたはてなブログは、多くのユーザーさまに支えられ、本日5周年を迎えることができました。

今回の5周年を記念して「いままでも、これからも、あなたの毎日を書き残そう」というキャンペーンを実施しています。これは、なんでもない「毎日」や特別な「今日」を書き残す場所として、自身の「いままで」を振り返る場所として、はてなブログをご利用いただきたいという気持ちを込めたものです。

ブログのある毎日に、こよみモードをご利用いただけると幸いです。

ブログのサイドバーの「プロフィール」に最終更新の状況を表示できるようにしました

はてなブログでは、サイドバーの「プロフィール」モジュールに、ブログの最終更新を表示できるようにしました。さらにブログを継続して更新していれば、継続期間も表示します（継続した投稿がない場合には最終更新のみが表示されます）。

プロフィールに最終更新を表示する

継続して更新しているブログであることを表示することで、運営者がブログを更新するモチベーションとしたり、興味あるブログの読者になるときにどれくらい更新されるブログなのか目安にできます。どうぞご利用ください。

プロフィールに最終更新を表示するには

デザイン設定画面 の「カスタマイズ」ページで「サイドバー」を開きます。「プロフィール」モジュールを選択し、「最終更新」欄の「表示する」にチェックを入れてください。

「プロフィール」モジュールで「最終更新」を表示する

ブログのサイドバーに表示できるモジュールについては、ヘルプ「サイドバーにモジュールを設置する」を参照してください。

※ブログのサイドバーにモジュールを表示する機能は、PC版（およびレスポンシブデザイン）で利用できます。