はてなブログ開発ブログ

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

記事のカテゴリーを「パンくずリスト」として表示できるようにしました

はてなブログでは、カテゴリーをパンくずリストとして記事ページに表示できる機能をリリースしました。パンくずリストを設定することで、読者に対して「今どのページを見ているか」を分かりやすく示すことができます。どうぞご利用ください。

パンくずリストの表示例

パンくずリストの表示例

パンくずリストは、記事の日付およびタイトルの上に表示されます。記事にカテゴリーを付けている場合は「トップ >(カテゴリ名)>(記事タイトル)」、記事にカテゴリーを付けていない場合は、「トップ >(記事タイトル)」となります。

カテゴリーを複数指定している場合は、過去記事も含めすべて記事の先頭についたカテゴリーがパンくずリストとして表示されます。設定する際はあらかじめご注意ください。

※パンくずリストは、スマートフォン版では表示されません。

パンくずリストを設定するには

パンくずリストの設定画面

パンくずリストの設定画面

設定は、ダッシュボードの「デザイン」から行えます。「カスタマイズ」>「記事」>「パンくずリスト」で、「記事ページにパンくずリストを表示する」にチェックを入れてご利用ください。

ブログのサイドバーに表示できる「執筆者リスト」モジュールと「執筆者ごとの記事一覧」ページを追加しました

はてなブログでは、ブログのサイドバー(PC版)に執筆者の一覧を表示する「執筆者リスト」モジュールと、執筆者ごとにまとまった記事一覧(Archiveページ)を追加しました。

ブログメンバー機能を利用したブログを読むときに、執筆者の顔ぶれを確認しやすくなり、また気になる執筆者の記事をまとめて閲覧することができます。どうぞご利用ください。

「執筆者リスト」モジュールを表示した様子

サイドバーに「執筆者リスト」モジュールを表示した様子

※ブログメンバー機能は有料プラン「はてなブログPro」ユーザー向けの機能です。

執筆者リストモジュールの設置方法

ダッシュボードの「デザイン」から行えます。「カスタマイズ」 > 「サイドバー」 > 「+モジュールを追加」より、「執筆者リスト」を適用するとモジュールが追加されます。

「執筆者リスト」モジュールの設定画面

「執筆者リスト」モジュールの設定画面

「執筆者リスト」モジュールでは、ブログメンバーのうち記事を書いたことのある執筆者のみが表示されます。表示順は、直近で記事を書いた順番に並びます。

執筆者ごとの記事一覧へのアクセス方法

執筆者リストモジュールのユーザー名(はてなIDおよびニックネーム)をクリックすると「執筆者ごとの記事一覧(Archiveページ)」にリンクします。

一覧ページのURLは、次のような形式になりますblog.example.comを、表示したいブログのドメインで置き換えてください)

http://blog.example.com/archive/author/執筆者のはてなID

執筆者リストモジュールを表示していないブログでも、このURLから執筆者ごとの記事一覧にアクセスすることができます。

引用ツールに、ブログの本文を引用してツイートできる機能を追加しました

はてなブログでは、ブログの本文を選択したときに表示される「引用ツール」に、ブログの本文を簡単に引用してツイートできる「引用ツイート」ボタンを追加しました。また、自分のブログで「引用ツール」を表示させないオプションを新たに設けました。

引用ツイートボタンにより、言及したい内容や気に入った文章があるときにTwitterで紹介することができます。貼り付けられた文章は、引用と出典を表すフォーマットで記述されるため、引用と自分の意見がどこに書かれているかが分かりやすく、引用元も明確になります。どうぞご利用ください。

はてなブログの本文を引用ツイートするには

記事本文の気になる文章を選択すると、引用ツールが表示されます。引用ツールには、既存の引用スターボタン、引用ストックボタンに並んで引用ツイートボタンが表示されます。

既存の引用スターボタン、引用ストックボタンに並んで引用ツイートボタンが表示されます

一番下の引用ツイートボタンをクリックすると、Twitterの投稿画面が立ち上がり、引用元の記事のURLと選択した範囲を“”つきでツイートできます。

引用したい文章を選択してツイートする様子

※この引用ツイートボタンは限定公開(公開範囲が「自分のみ」もしくは「カスタマイズ」)のブログでは機能しません。

引用ツールを表示させないようにするには

引用ツールは、デフォルトで公開範囲が全公開のブログで表示されます。引用ツールを表示させないようにするには、ダッシュボードの「公開設定画面」より設定を変更することができます。

公開設定画面にある「引用設定」で「読者が記事本文の一部を選択したとき、引用ツールを表示する」のチェックを外して変更すると、引用ツールを非表示にできます。

「引用設定」画面

「引用設定」画面

ソーシャルシェアなどでタイトルを使い分けできる「高度なタイトル設定」をリリースしました

はてなブログでは、ソーシャルシェアなどを意識して記事のタイトルを指定できる「高度なタイトル設定」機能をリリースしました。ブログ記事を配信するHTML文書のメタデータとして、複数のタイトルを使い分けることができます。

はてなブログで記事ページ(1つの記事だけのパーマネントリンク)を表示すると、記事編集画面の「タイトル」欄に入力した記事タイトルが、さまざまなタイトルのデータとして利用されます。今回の機能追加により、このうちHTMLのヘッダ部に記述されるtitle要素とog:titleを個別に設定できるようになりました。

なお、記事のタイトル見出し(h1要素)や記事一覧などでは、従来通りの記事タイトルが表示されます。

※高度なタイトル設定は、HTML文書のメタデータに関して知識のあるユーザー向けの機能です。ソーシャルシェアや検索結果、リンク先などでの表示に影響するのでご注意ください。

「高度なタイトル設定」でタイトルを使い分けるには

高度なタイトル設定は、記事編集画面(PC版)の編集サイドバーにある「編集オプション」から利用できます。下に追加された「高度なタイトル設定」をクリックすると、「title要素(ページのタイトル)」と「og:title(ソーシャルメディア向けタイトル)」のテキストエリアが表示されます。

「高度なタイトル設定」

「高度なタイトル設定」をクリックするとテキストエリアが表示されます

2つの欄の両方、あるいはどちらかだけを設定することができます。それぞれ空欄にした場合には、これまでのデフォルトと同じ「記事タイトル - ブログ名」という形式のタイトルになります。

【追記】「高度なタイトル設定」に入力したタイトルもそれぞれの要素の記事タイトル部分を上書きし、実際の値はブログ名とあわせて次の形式になります。(2016年7月4日)
設定された記事タイトル - ブログ名

title要素とog:titleについて

高度なタイトル設定で指定できるtitle要素は、そのHTML文書のタイトルとして、ブラウザのタイトルバーや、ブラウザ拡張およびリンクツールでの自動タイトル取得、検索結果などに表示されることがあります。個別のサービスで実際にどのように表示されるかは、それぞれの実装によります。

また、og:titleは、ソーシャルシェアされた際にどのように表示されるかを指定するOGP(Open Graph Protocol)のタイトルです。【追記】Twitterカードで利用されるtwitter:titleにも同じものが設定されます。(2016年6月22日)

※OGPのアイキャッチ画像og:imageと概要og:descriptionも「編集オプション」で指定できます(関連ヘルプ参照)

※先日リリースしたAMPで配信されるAMP HTMLや、はてなブログがデフォルトでスマートフォン向けに配信しているHTMLには、もともとOGPは含まれません。

ブログ記事をAMPで配信できるオプションを、Proユーザー向けベータ版機能としてリリースしました(追記あり)

はてなブログでは、記事をAMP(Accelerated Mobile Pages)で配信できるオプションを、有料プラン「はてなブログPro」ユーザー向けベータ版機能としてリリースしました。AMPで配信されたページが、Google検索やはてなブックマークなどAMPに対応したサービス・アプリで読み込まれると、通常のWebページより高速に表示されます。AMPに関する注意点をご理解のうえ、ご利用ください。

AMPで表示された記事ページの例

AMPで表示された記事ページの例

AMPのメリットと注意点

AMPは、モバイル環境でWebコンテンツの表示を高速化する仕組みです。GoogleなどWeb業界各社の協力により2015年10月にプロジェクトが発足し、世界中から多くのコンテンツ企業やテクノロジー企業が参加しています。はてなもこの4月、国内Webサービス企業初の「Tech Platform」として参加しました。

ブログユーザーにとって、AMPはモバイル環境で速やかに表示され読まれやすくなるという大きな利点がある一方で、フォーマットなどを含めて開発が進行中のプロジェクトであることと、デザイン上のカスタマイズなどリッチな表現に制限がある点については注意が必要です。

  • はてなブログのデザインテーマは反映されません
  • デザイン設定でカスタマイズできるサイドバーモジュールや、HTMLの自由記述(記事上下、ヘッタ、フッタなど)は配信されません
  • 記事中のstyle属性など、スタイル関連のHTMLは反映されません
  • 記事中のJavaScriptは反映されません。このため貼り付けた広告などが表示されないことがあります
  • (HTTPSでなく)HTTPで配信されている画像は表示されません(はてなフォトライフやInstagramなどはHTTPSに対応しています)

なお、配信されるAMPの表示をダッシュボードなどで確認する機能は、現時点では提供しておりません。ご了承ください>。

【追記】配信されるAMPの表示を、記事編集画面の「プレビュー」タブで確認できるようにしました。

AMPの表示を、記事編集画面(PC版)でプレビューできるようにしました - はてなブログ開発ブログ

AMP配信機能の詳細についてはヘルプ「AMP(Accelerated Mobile Pages)を使用する」を参照してください。(ここまで2016年6月21日11時26分に追記)

はてなブログの記事をAMPで配信するには

はてなブログProに加入しているユーザーは、ブログの詳細設定画面で「Accelareted Mobile Pages (AMP) を配信する」にチェックをいれると、AMPが配信されます。

詳細設定画面のAMP設定項目

詳細設定画面のAMP設定項目

配信したAMPを対応したサービスがクロールすると、各サービスにおいてブログのコンテンツがより快適に閲覧されることが期待できます。

※AMPオプションを有効にしても、各サービスがすぐにAMPページをクロールするとは限りません。現状で、記事公開から数日程度のタイムラグを要することもあります。

AMPの利用において、はてなブログのその他の設定項目とも次のような関係があります。

  • AMPへのアクセスは、詳細設定画面の「Google Analytics埋め込み」で設定されたGoogleアナリティクスのプロパティに記録されます
  • 詳細設定画面の「はてなによる広告を表示しない」をチェックしている場合、AMPページでもはてなによる広告は表示しません
  • スマートフォンアプリでは設定できませんが、スマートフォン向けブラウザ版ダッシュボードでは設定できます

前述したようにAMP自体が開発途上であり、本機能も現時点ではベータ版としての提供となります。不具合などにお気づきの場合は、下記お問い合わせフォームよりご報告ください。

はてなブログ - お問い合わせ - はてな

編集サイドバーから楽天市場の商品を簡単に紹介できる「楽天商品紹介」機能を追加しました

はてなブログでは、記事編集画面(PC版)の編集サイドバーに「楽天商品紹介」機能を追加しました。オンラインモール「楽天市場」に掲載されている商品を検索し、アフィリエイトID付きの商品カードを簡単に挿入できます。どうぞご利用ください。

楽天商品カードの例
[rakuten:book:11564311:detail]

楽天の商品を検索して掲載するには

編集サイドバーに追加した「楽天商品紹介」タブを開き、紹介したい商品を検索します。

楽天商品紹介

楽天商品紹介タブで商品を検索

検索結果から商品を選び、「選択したアイテムを貼り付け」をクリックすると、上に掲載したような楽天商品カードが記事に挿入されます。

※検索結果の一覧には、商品が300件まで表示されます。また、商品カテゴリは指定できません。

楽天アフィリエイトを利用するには

楽天市場の商品を紹介する際に、ユーザー自身の楽天アフィリエイトIDを付けることができます。はてな全体の管理画面「Myはてな」で設定してください。

アフィリエイト設定 - はてな

アフィリエイトIDは、楽天会員に登録していれば次のページで確認できます。

楽天ウェブサービス: アフィリエイトIDの確認

※楽天アフィリエイトのリンクから商品ページにアクセスしたユーザーの成果対象となるCookieは、30日間有効です(参考:楽天アフィリエイトのヘルプ

アフィリエイト掲載時の広告に関するガイドライン

はてなブログでは、広告ポリシーを含むガイドラインを定めており、商用サイトへの誘導や収益を得ることを主目的とした利用を認めていません。

また、記事と無関係な広告リンクを多数掲載したり、他媒体から転載した記事に広告や、商品情報のみの広告を掲載する行為を「広告における禁止事項」として定めており、ブログの利用停止などの措置を取ることがあります。

はてなブログのガイドライン(広告ポリシー)

ユーザーが出題したお題で記事を書ける「マイお題」機能を追加しました(ガイドラインに関する追記あり)

はてなブログでは、ユーザーが出題したお題で記事を書ける「マイお題」機能を追加しました。

これまでお題ははてなブログ編集部が出題するお題のみでしたが、この機能によりユーザーが作成したお題で投稿できます。また、お題に答えるだけでなく、他のユーザーに投稿してほしいネタを出題することもできます。どうぞご利用ください。

※マイお題は、スマートフォンおよびアプリでは現状まだ提供していません。

マイお題一覧ページ

マイお題一覧ページ

マイお題で記事を書くには

ユーザーが出題したマイお題は「マイお題一覧」のページで確認することができます。気になるお題のタイトルをクリックすると、そのお題のページに移動します。お題のページにある「このお題で記事を書く」をクリックすると、そのお題をネタに記事を書くことができます。

マイお題を出題するには

マイお題の作成画面は、ダッシュボードの左側のメニューにある「お題」から開くことができます。このページにある「新しいお題を作成」ボタンをクリックすると、お題を新しく作ることができます。応募期間を設けたい場合は、「期限を設定する」の項目にチェックを入れて設定してください。

1か月の間に作ることができるお題の数は1つのidにつき10個までです。

「マイお題」お題作成画面

お題作成画面

「作成したお題」のタイトルをクリックすると、そのお題のページに移動します。

自分が作ったお題のページに、お題の出題者として自分のidが掲載されます。

作成したお題を削除する場合は

ダッシュボードの左側のメニューから「お題」を開き、お題タイトル横の「編集」ボタンを選択します。そのページにある「このお題を削除」ボタンから削除してください。お題を削除すると、そのお題のページもなくなります。

マイお題に関する注意事項

公序良俗に反するお題や誹謗中傷に値するお題など、不適切なお題と判断される場合は、注意勧告などの対応を取ることがあります。

詳しくは「マイお題ガイドライン」を参照してください。(5月20日追記)