はてなブログ開発ブログ

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

カテゴリー別記事一覧で、ページのタイトルや説明文をカスタマイズできるようにしました(はてなブログ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モードでの脚注記法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版(およびレスポンシブデザイン)で利用できます。

ブログのaboutページを自由に編集できるようにしました(ページタイトルについて追記あり)

はてなブログでは、ブログに関する情報を表示するaboutページを自由に編集できるようにしました。

これまではブログを作るときに登録した情報が自動的に表示されていましたが、今回の機能追加により自分で自由に設定することができます。また、編集できる項目が増え、これまで以上に表現の幅が広がりました。自己紹介やポートフォリオの場として、どうぞご利用ください。

aboutページ

新しくなったaboutページ

新しいaboutページは、PC・スマートフォン・iOSアプリで設定・閲覧できます。

aboutページの編集画面へのアクセス方法

ダッシュボードの「設定」画面にある「基本設定」ページから行えます。「aboutページ」の項目にある「aboutページ編集」のリンクをクリックすると、aboutページ編集画面が開きます。

編集画面へのアクセス方法

基本設定画面にある「aboutページ編集」をクリック

aboutページ編集画面が開く

aboutページ編集画面が開く

aboutページ編集画面で設定できる項目

aboutページ編集画面では以下の項目を編集できます。

項目 説明 設定内容
自由記述欄 ブログタイトル下に入る文章 自由に記述できる(記述モードを「HTML・はてな記法・Markdown」から選択できる)
プロフィール ユーザー名(はてなIDおよびニックネーム)と、連携設定を有効にしている外部サービス(Twitter・Facebook)のフォローボタン 表示/非表示の切り替えを選択
リンク メールアドレスとウェブサイトURL それぞれ入力できる
ブログ投稿数 ブログを開設してから今日までに投稿した記事数 表示/非表示の切り替えを選択
ブログ日数 ブログを開設してから今日までの日数 表示/非表示の切り替えを選択
継続期間 その時点で連続してブログを書いている期間 表示/非表示の切り替えを選択
読者 購読者人数ならびに購読者一覧 表示/非表示の切り替えを選択

これまでaboutページに表示されていた「ブログ名」「ブログ説明文」「言語」「公開範囲」「編集モード」の項目は、aboutページへの表示対象から外しました。

※項目の表示順を並び替えることはできません。

aboutページとは

aboutページは、ブログに関する情報が表示されるページで、ブログのフッターやサイドバーに表示されるプロフィールやIDをクリックすると移動できます。aboutページは、ブログのドメイン名に/aboutを付けたURLで、例えば次のようになります。

http://staff.hatenablog.com/about

※aboutページは、非表示にはできません。

【追記】ページタイトルも設定できるようにしました

aboutページ編集画面に「ページタイトル」欄を追加しました。aboutページのページタイトル(title要素)は、デフォルトで「このブログについて - ブログ名」となりますが、このうち前半の「このブログについて」の部分を変更できます。(2016年9月7日追記)

【追記】自由記述欄の書き方について

自由記述欄では「HTML」「はてな記法」「Markdown」から記述モードを選択できます。デフォルトの「HTML」モードでは、段落や改行もHTML(p要素やbr要素)で指定してください。

<p>このブログは、私の日記です。<br>ほぼ毎日更新します。</p><p>よろしくお願いします。</p>

例えば、上記のように記述すると、下記のように表示されます。

このブログは、私の日記です。
ほぼ毎日更新します。

よろしくお願いします。

(2016年9月7日追記)

独自ドメインを利用したブログを他のサービスからはてなブログへ移転する際に、記事のURLを引き継げるようにしました(はてなブログPro)

はてなブログでは、記事を配信するディレクトリをカスタマイズできる機能を、有料プラン「はてなブログPro」ユーザー向けにリリースしました。はてなブログの記事URL(例えばexample.hatenablog.com/entry/2016/09/01/000000のうち、ドメイン名に続くentryの部分を変更できます。

これにより、独自ドメインを利用したブログを他のサービスからはてなブログに移転する際に、元の記事URLを引き継ぐことができるようになりました。それまでのソーシャルシェアやWeb検索、はてなブックマークなどのリンクを維持したまま、はてなブログを利用できます。

※当機能は、独自ドメインのブログを新規にはてなブログへ移転することを想定したものです。また、移転元のURLの形式等によっては、引き継げないこともあります。以下の説明や注意点をお読みのうえでご利用ください。

はてなブログでは、さまざまなサービスから引っ越しやすく使いやすいブログを目指して、今後も改善を進めてまいります。

記事を配信するディレクトリを変更するには

はてなブログの管理画面で、左側のメニューバーから「インポート」を選び、他のサービスやソフトウェアからの移転を開始します。

ブログデータのインポートが完了すると、「URLの引き継ぎ」が案内されます。

URLの引き継ぎ

URLの引き継ぎ

記事を配信するディレクトリをここ」のリンクをクリックすると、新設した「記事のディレクトリ」ページに移動します。ここで、記事を配信するディレクトリをデフォルトのentryから変更できます。移転元のブログにディレクトリ部分がない場合には、ディレクトリを空白にも設定できます。

記事のディレクトリ

記事のディレクトリ

「初期状態に戻す」ボタンを押すと、デフォルトのentryに戻ります。

※ディレクトリとして、はてなブログで使用しているaboutarchiveなどを設定することはできません。

ディレクトリを変更する際の注意点

記事を配信するディレクトリは、新規にインポートした記事だけでなく、ブログ内のすべての記事に影響します。ディレクトリを変更した以降に投稿する記事はもとより、既存の記事のパーマネントリンクも変更されます。

すでに運用しているブログでディレクトリを変更すると(独自ドメインであるかどうかを問わず)、はてなブックマークやはてなスター、ソーシャルシェアなどは移行されません。ただし、以前のURLへのアクセスは、新しいURLにリダイレクトします。変更していたディレクトリを元に戻した場合も同様です。

独自ドメインの記事URLを引き継ぐ仕組み

ブログの記事URLは、一般的に次のような形式をしています。

http://blog.example.com/article/20160801

blog.example.comが、ブログのドメイン名です。記事のパスarticle/20160801のうち、articleが記事を配信するディレクトリで、20160801が記事名です。ブログの設定やサービスによっては、ディレクトリ部分がないこともあります。

このブログから記事をエクスポートし、はてなブログにインポートすると、次のようなURLになります(下記の「URLを引き継いでインポートするコツ」も参照してください)

http://example.hatenablog.com/entry/20160801

はてなブログProに加入し、移転元と同じ独自ドメインを適用すると次のようなURLになります。

http://blog.example.com/entry/20160801

今回の機能によって、記事を配信するディレクトリをentryから移転元と同じarticleに変更することで、記事URLをそのまま引き継ぐことができます。

URLを引き継いでインポートするコツ

記事URLを引き継ぐ仕組みをまとめると次の表のようになります。

URLの部分 引き継ぐ仕組み
ブログのドメイン名 独自ドメインを利用する(はてなブログPro)
記事を配信するディレクトリ 今回の機能により同一に設定する(はてなブログPro)
記事名 ブログデータに指定された値がインポートされる

インポートした際の記事名については、移転元からエクスポートしたブログデータで以下のように指定された値になります。

ブログデータ 影響する値
MovableType形式 BASENAMEフィールドの値
WordPress形式 link要素の値

記事名がうまく引き継がれない場合には、ブログデータのこれらの値を見直してみてください。

※記事名として?p=40のようなパラメーターをそのままインポートできないため、この形式のURLを引き継ぐことはできません。