はてなブログ開発ブログ

はてなブログの新機能など開発に関する情報、公式のお知らせを発信します。

カテゴリー別記事一覧で、ページのタイトルや説明文をカスタマイズできるようにしました(はてなブログ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:レスポンシブデザインのスマートフォン表示を含む