はてなブログ開発ブログ

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

ブログ記事を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日追記)

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

はてなブログでは、編集画面の編集サイドバーにある「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貼り付け」の使い方

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

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

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

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

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

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

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

iOSアプリ「はてなブログ」をApp Storeからダウンロード

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

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

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

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

新しい「設定」画面

新しい「設定」画面

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

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

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

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

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

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

そのほかの機能改善

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

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

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

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

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

スマートフォンのタイトル画像で、表示領域を画像サイズに合わせることができるようにしました

はてなブログでは、スマートフォン表示のタイトル画像をカスタマイズする際、アップロードする画像に合わせてヘッダ領域をリサイズできるようにしました。縦横どちらかに長い画像でも、画像全体を表示することができます。

デフォルトのスマートフォン表示では、自分のブログにふさわしいタイトル画像をアップロードし、ブログのヘッダ部分をカスタマイズすることができます。タイトル画像の表示領域はデフォルトで固定サイズのため、ヘッダの領域に合わせてちょうど収まるようにトリミングして表示します(CSSのbackground-size: cover;の動作)

領域に合わせる(デフォルト)

デフォルトのタイトル画像(スマートフォン表示)

新しく用意した「画像の高さに合わせる」を選択すると、縦に短い画像をアップロードしたときにはヘッダ領域の高さも合わせて短くなり、縦に長い画像ではヘッダ領域も高くなります(アップロードした画像の横幅がヘッダ領域の横幅になるようリサイズし、高さはそれに合わせて調整されます)

「画像の高さに合わせる」

「画像の高さに合わせる」では全体が表示される

※画像が長過ぎる場合にはリサイズします。

ブログのタイトルをあしらったロゴなどをタイトル画像に設定するときに、これまではヘッダ領域のサイズに合わない部分が切り取られていましたが、高さを合わせることでロゴ全体をスマートフォンでも表示させることができます。どうぞご利用ください。

タイトル画像に横長のロゴを使用する

タイトル画像に横長のロゴを使用できるようになった

スマートフォンのタイトル画像を高さに合わせて表示するには

スマートフォンのタイトル画像は、デザイン設定画面のスマートフォンページで設定できます。「ヘッダ」を開き、「画像をアップロード」します。新しく追加した「サイズ設定」で「画像の高さに合わせる」を選択すると、タイトルを表示するヘッダ領域をアップロードした画像に合わせます。タイトル画像は、スマートフォンのデザイン設定画面からも設定できます。

サイズ設定の「画像の高さに合わせる」

サイズ設定の「画像の高さに合わせる」

また、タイトルロゴを使用するならば、表示設定として「画像だけ表示」を選択するとよいでしょう。

スマートフォンのタイトル画像の設定方法の詳細については、過去のリリース告知も参照してください。

参考記事

blog.hatenablog.com

iOSアプリ「はてなブログ」バージョン3.3をリリース。キーボードショートカット、クイックアクションに対応しました

はてなブログは4月13日、iOSアプリ「はてなブログ」バージョン3.3をリリースしました。外付けキーボードを使った入力がスムーズになる「キーボードショートカット」に対応し、iPadなどからブログが書きやすくなりました。また、アプリのメニューが素早く開く「クイックアクション」にも対応しています。

iOS 9の新機能に対応した「はてなブログ」アプリをどうぞご利用ください。

iOSアプリ「はてなブログ」をApp Storeからダウンロード

キーボードショートカットで書きやすく

iPadやiPhoneに外付けキーボードをつないで記事を書く場合、キーボードショートカットを利用すると便利です。キーボードショートカットは、iPad ProのSmart Keyboardにも対応しています。

キーボードショートカットで書きやすく

「はてな記法」「見たまま」「Markdown」のすべてのモードで利用可能

ショートカットキーの一例は以下の通りです。

見出し ⌥⌘H リスト ⌥⌘L 番号付きリスト ⌥⇧⌘L
引用 ⌘' プレビュー ⌘P コピー ⌘C
ペースト ⌘V 切り取り ⌘X 取り消し ⌘Z
取り消しの取り消し ⌘⇧Z ボールド ⌘B イタリック ⌘I

※⌥(option)、⌘(command)、⇧(shift)

クイックアクションで素早く操作

クイックアクションは、アプリを開かずにメニューを表示する機能です。

ホーム画面でiOS「はてなブログ」アプリのアイコンを「プレス」すると、「あなたへのお知らせ」「購読中のブログ」「新規記事」の3つのメニューが表示されます。開きたいメニューを選択すると、素早く表示されます。

クイックアクションで素早く操作

メニューを素早く表示できます

※「クイックアクション」は現在、iPhone 6s、iPhone 6s Plusで対応しています。