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

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

引用ツイートボタンにより、言及したい内容や気に入った文章があるときに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は含まれません。

関連ヘルプ

• 編集オプションの設定とOGP
• 記事投稿時のソーシャルメディア通知（Twitter連携など）
• Twitterカード（記事をツイートすると大きな画像で見やすく表示される）

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

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

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

AMPのメリットと注意点

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

• Google Japan Blog: モバイルウェブをもっと速く
• はてな、国内Webサービス企業で初めて「Tech Platform」としてAMP参加。…… - プレスリリース - 株式会社はてな

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

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

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

関連リンク

導入ガイドなど、AMPに関する技術的な詳細については下記のページを参照してください。

• Google Developers Japan: Accelerated Mobile Pages プロジェクトについて -- 導入ガイド日本語版を本日公開しました
• Accelerated Mobile Pages Project

はてなのサービスでは、はてなブックマークやはてなブログMediaがすでにAMPに対応しています。

• Androidアプリ「はてなブックマーク」がAMPに対応しました - はてなブックマーク開発ブログ
• iOSアプリもAMP対応ページを表示できるように！ …… - はてなブックマーク開発ブログ
• 企業向けオウンドメディアCMS「はてなブログMedia」がAMPに対応しました - はてなビジネスブログ

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

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

楽天商品カードの例

[rakuten:book:11564311:detail]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

マイお題一覧ページ

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

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

マイお題を出題するには

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

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

お題作成画面

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

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

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

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

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

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

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

関連ヘルプ

• ブログを書くときのお題
• マイお題
• マイお題ガイドライン（5月20日追記）

Flickr貼り付けで、ユーザーを指定して自分の写真を選択できるようにしました

はてなブログでは、編集画面の編集サイドバーにある「Flickr貼り付け」について、Flickrユーザーのフォトストリームから写真を貼り付ける機能を追加しました。自分のFlickrにアップロードした写真を、ブログ記事に挿入できます。どうぞご利用ください。

編集サイドバーの「Flickr貼り付け」

※貼り付けることができるのは、公開範囲（privacy setting）がパブリック（Public）な写真だけです。

Flickr貼り付け機能について

これまでFlickr貼り付けでは、クリエイティブコモンズで公開されている写真を検索して貼り付けることが可能でした。

今回、新たに追加した「自分の写真」タブでは、Flickrのユーザーを指定し、フォトストリーム（Public view）から写真を選択して貼り付けることができます。

フォトストリームから写真を貼り付けるには

編集サイドバーで「Flickr貼り付け」を選択し、「自分の写真」タブで「Flickrスクリーンネーム」欄に自分のスクリーンネーム（screen name）を入力します。

※Flickr screen nameは、Flickrへのログインに使用するYahoo! IDとは異なります。Flickrのアカウント管理画面などでご確認ください。

「連携」ボタンをクリックすると、公開されているフォトストリームの写真が一覧表示されます。写真を選択して「選択したアイテムを貼り付け」ボタンをクリックすると、編集画面に写真が挿入されます。

「Flickr貼り付け」の使い方

※任意のFlickr screen nameを入力できますが、自分以外のアカウントと連携して写真を貼り付ける行為は著作権上の問題となる可能性がありますのでお控えください。

iPhone・iPad向け「はてなブログ」アプリで、細かな「ブログの設定」を可能にしました。「購読中のブログ」画面には広告枠を新設します

はてなブログは5月9日、iPhone・iPad向けアプリ「はてなブログ」のバージョン3.4をリリースしました。

新しい「はてなブログ」アプリのトップ画面

設定できる項目を大幅に追加し、ブログ名やタイトル画像の変更、記事URLのフォーマット指定など、より細かなブログの設定ができるようになりました。あわせて「購読中のブログ」画面のデザインリニューアルや、コメント管理画面の新設、「はてなブックマーク」との連携強化なども行いました。

さらに使いやすくなった「はてなブログ」アプリをどうぞご利用ください。

設定をカスタマイズして、より自分らしいブログに

iOSアプリの「設定」画面に「基本設定」「詳細設定」「公開設定」「デザイン」「アカウント設定」の項目を追加しました。

「基本設定」はブログ名やブログアイコンの変更、コメント設定などが、「詳細設定」は記事URLのフォーマット変更、検索エンジン最適化などが行えます。「公開設定」もPC版やスマートフォン版と同じように変更でき、「デザイン」ではタイトル画像が設定できます。また「アカウント設定」では、プロフィールアイコンが設定できます。

ブログ名やブログアイコンなどをカスタマイズすることで、より自分らしいブログにでき、読者にも覚えてもらいやすくなります。ぜひご利用ください。

新しい「設定」画面

「購読中のブログ」画面が見やすくなりました

「購読中のブログ」画面において、1記事ごとの枠の高さを調整しました。ブログをたくさん購読している方でも、見やすく、使いやすいデザインに変更しています。

お気に入りのブログをよりチェックしやすく

購読中のブログに広告枠を新設します

iOSアプリ「はてなブログ」では、今回のバージョンアップから「購読中のブログ」画面に広告枠を新設しました。購読しているブログとブログの間に、「PR」マークを付けた記事が最大3つ表示されます。広告枠の表示条件は、ユーザーにより異なります。

そのほかの機能改善

「コメント」の管理画面を新設

トップ画面の「コメント」をタップすると管理画面が開き、ブログに寄せられたコメントの承認や削除などが行えます。

記事をブックマークしやすく

アプリ内でブログ記事やWebページなどを閲覧すると、下部に「B!」ボタンが表示されるようになりました。ボタンをタップすると、はてなブックマークアプリが開きます。同アプリをダウンロードしていない場合は、Webページが開きます。

その他、不具合の修正を行いました。

関連ヘルプ

iOSアプリ「はてなブログ」 - はてなブログ ヘルプ