はてなブログ開発ブログ

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

法人向け有料プランを対象に、同意管理ツール(CMP)導入用の設定を追加しました


はてなブログでは、法人向け有料プラン(はてなブログBusiness、はてなブログ for DevBlog、はてなブログMedia) をご利用のブログ向けに、同意管理ツール(CMP)導入用の設定を追加しました。

同意管理ツール(CMP)とは、Webサービスを訪問したユーザーに対して、データの取得や利用目的に関する情報の表示、またその同意を取得するための仕組みを提供するツールです。
昨今、利用者のプライバシーに関する取り扱いが重視される中、法人が自身で選定したCMPツールを導入できるよう設定を提供いたしました。

「詳細設定 > 同意管理ツール(CMP)用のメタデータを追加」より設定することができます。

どうぞご利用ください。

新機能「おとなり日記」をリリースしました

PC版、スマートフォン版のブラウザの購読リストに、あなたへのおすすめの10記事*1を表示する新機能「おとなり日記*2」をリリースしました。購読リストははてなブログに登録、ログインすることで閲覧できます。

興味のある記事を表示する方法


「おとなり日記」では

  • 他の記事につけたはてなスター、はてなブックマーク
  • ご自身のブログにつけたはてなブログタグ

をもとに、興味のありそうな記事や、同じようなテーマを取り扱っている記事が表示されます。

「おとなり日記」に記事が表示されない場合


おとなり日記」に記事が表示されない場合や、表示される記事が10記事に未満になっている場合は、

  • 他の記事にはてなスター、はてなブックマークをつける
  • ご自身の書いた記事にはてなブログタグをつける

をお試しください。なお、おすすめの反映には1日程度かかります。

読みたくない記事を非表示にする方法

読みたくない記事が表示された場合は、記事の右側に表示される「…」ボタンから「このブログをおすすめに表示しない」を選択すると、今後そのブログはおすすめに表示されなくなります。

さらに詳しい使い方

詳しい使い方については以下のヘルプを参照ください。

help.hatenablog.com

「おとなり日記」へのフィードバック

「おとなり日記」について改善や不具合のフィードバックはこちらよりお寄せください。

*1:おすすめ記事の候補が少ない場合10件表示されないことがあります。

*2:本機能は、2022年4月より「あなたにおすすめ」としてベータ版をリリースしていましたが、2022年6月2日より全ユーザーを対象に「おとなり日記」として公開しました。

はてなブログで Google アナリティクス 4の設定が可能になりました

先日、Google より Google アナリティクス (ユニバーサル アナリティクス) の終了とGoogle アナリティクス 4 (以下 GA4)への準備についてアナウンスがありました。それを受けて、はてなブログでは以下の告知にて、GA4の対応予定を案内いたしました。

本日、はてなブログにGA4の設定を追加いたしました。設定方法について詳しくはこちらをご確認ください。
help.hatenablog.com

ユニバーサルアナリティクスとは別に設定のフォームを提供しておりますので、同時に計測することも可能です。GA4とユニバーサルアナリティクスは計測のタイミングに違いがあるなど、数字に差異が発生することが多いです。つきましては、ユニバーサルアナリティクスは設定したままで、GA4の設定も追加することをおすすめいたします。

また、はてなブログの設定からGA4の設定を行っていただくだけで*1、ブログの解析に便利な情報を合わせて送信するように変更しています。具体的には下記をご参照ください。

追加されるデータ

記事閲覧時に記事のメタデータを追加

記事の閲覧時に、カスタムディメンションとして、「記事に設定した投稿日」のデータを送信しています。

追加される値(クリックで展開されます)

カスタムディメンション名 補足
post_date 2022-01-01 ハイフン区切りの日付が記録されます

「記事に設定した投稿日」のデータは、下記の連載「小川卓のブログ分析入門」でウェブアナリストの小川卓さんが紹介された「月初率」を算出するのに利用できます。

記事を読み終わったタイミングの計測

このデータにつきましても、下記の連載「小川卓のブログ分析入門」にて紹介された「読了率」の計測に利用できます。

追加されるイベント(クリックで展開されます)

イベント名 scroll
カスタムディメンション名
track_area finish_reading
percent_scrolled 画面のスクロールされた割合


リンククリックの計測、ブログカードのクリックの計測

これまで、ブログカードについては計測することができず、特に自分のブログ以外のリンクを紹介した際に、そのリンクがどれくらい利用されているかを知ることができませんでした。
今回、リンククリック*2及び、ブログカードのリンククリックについても、記録するように変更いたしました。

追加されるイベント(クリックで展開されます)
(ブログカード以外の)リンクのクリック

イベント名 click
カスタムディメンション名 補足
link_domain リンク先のドメイン
link_url リンク先のURL
link_text リンクのテキスト
link_classes リンクに設定されているclass属性
link_id リンクに設定されているid属性
outbound true か false 自サイト以外へのリンクかどうか

ブログカードのリンククリック

イベント名 click
カスタムディメンション名 補足
link_domain リンク先のドメイン
link_url リンク先のURL
link_text リンクのテキスト
track_area blogcard 固定で「blogcard」が記録されます
track_component entry_title, blog_name 等 ブログカードの中のどこがクリックされたかが記録されます
outbound true か false 自サイト以外へのリンクかどうか

追加されたデータを利用するためのセットアップ

今回追加したうちの、一部のデータについては、GA4 にて事前に設定しなければ、それ以前のデータが利用できません。また、Google データポータルなどの可視化ツールでもデータが利用できません。つきましては、GA4の設定する前に、以下の手順でカスタムディメンションを作成しておくのをおすすめいたします。

  1. 作成したGA4を開く (まだGA4を作成していない場合は、ヘルプなどを参照して作成してください)
  2. サイドメニューの「設定」をクリック*3
  3. 「カスタム定義」をクリック
  4. 「カスタムディメンションを作成」ボタンをクリック
  5. 「ディメンション名」「イベント パラメータ」の両方に以下の値を入れてカスタムディメンションを10個作成する
    • link_domain
    • link_url
    • link_text
    • link_classes
    • link_id
    • outbound
    • track_area
    • track_component
    • percent_scrolled
    • post_date
  6. 完了すると以下のような状態になります

*1:一部のデータを利用するためにはGoogle アナリティクス 4のカスタムディメンションの設定も必要になります。詳しくはこちらをご参照ください。

*2:GA4の拡張計測との競合を考え、自ブログへのリンククリックのみを対象としています

*3:歯車アイコンの「管理」ではありません

はてなスターをリニューアルしました。また、リニューアル記念キャンペーンを実施します!

はてなブログのフィードバック機能のひとつの「はてなスター」を本日リニューアルしました。

はてなスターをリニューアルしました

はてなスターは、読んだブログやコメントにワンクリックで★を付けられるサービスで、ブログやコメントを読んだときの「いいな」という気持ちや「共感」を気軽にフィードバックすることができます。
はてなブログは「思いは言葉に。」をキャッチコピーに、人それぞれのさまざまな思いや考えを表現できる場所として提供してまいりました。はてなスターは、嬉しいときだけでなく、そっと相手に寄り添うフィードバックとしてもご利用いただけるツールであり、はてなブログには欠かせないものだと考えています。今後もはてなブログとはてなスターをどうぞよろしくお願いいたします。

また、リニューアルを記念して「使ってみよう!新しくなったはてなスター」キャンペーンを予定しております。参加者全員へのグリーンスタープレゼントや新スターTシャツプレゼントもありますので、是非チェックしてみてください。

キャンペーンページ

blog.hatenablog.com

新しくなったはてなスターの使い方

気軽につけられるはてなスターの良さはそのままに、カラースターの付け方やスターの削除方法に変更があります。

はてなスターのつけ方

はてなにログインした状態で、はてなスターボタンをクリックするだけです。

はてなスターのつけ方

カラースターのつけ方

カラースターをつけるには、はてなスターボタンにマウスカーソルを合わせると表示されるスターパネル展開ボタンをクリックして、スターパネルを開き、つけたい色の★をクリックしてください。カラースターは、つけると1つずつなくなっていきます。

スターパネル
カラースターは、購入、サービスの利用開始や継続利用、キャンペーンへの参加などで取得できる、個数制限のあるスターです。特別なフィードバックを送る際などにご利用ください。

スターの一覧

スターの一覧をクリックして、スターパネルを開き、下部の展開ボタンを押すことで記事につけられたスターを一覧できます。

スターリスト

スターの消し方

スター一覧画面から、自分のつけたスターに限り、削除することができます。

スターの消し方

モバイルデバイスでの利用法

スマートフォンなどのモバイルデバイス上のブラウザでも、パソコンでの操作と同じように★をつけたり、削除する事ができます。
はてなスターボタンにマウスカーソルを合わせる代わりに一回タップをすることで、スターパネルが表示されます。

廃止された機能

今回のリニューアルにともない、引用スターボタンの提供を終了します。

f:id:hatenablog:20160622184709p:plain:w350
引用スターボタンの提供は終了しますが、引用したい箇所を選択してからスターを付けて「引用スター」をつけることは引き続き可能です。

よりくわしくは

よりくわしくは、はてなスターのヘルプを御覧ください。

リニューアルの背景

今回のリニューアルは、10年来のはてなスターのインターフェースが、現代のウェブブラウザへの対応に遅れていたものを取り戻すためのものです。スマートフォンなどモバイルデバイスでの使い勝手、Intelligent Tracking Protection (ITP) の流れ、Third Party Cookies への各ブラウザの状況などへの対応を行いました。
また、このリニューアルで、はてなスターの API は JSONP の callback への対応を廃止しました。こちらは、もはや現代的な仕組みではなく、ともすれば脆弱性の原因ともなるため今回のリニューアルで廃止しました。引き続き利用いただけるAPIについては、Hatena Developer Center をご参照ください。
http://developer.hatena.ne.jp/

確認できている不具合

  • 【修正済み 2022/01/11 17:00頃】はてなブログAndroidアプリにおいて、スターパネルが開けない不具合が発生しています。そのため、カラースターの追加やスターの削除ができない状態になっています。お手数をおかけいたし申し訳ございませんが、カラースターやスターの削除についてはブラウザからご利用ください。
  • 一部のiOSデバイスから、はてなブログiOSアプリをご利用の場合に、スターパネルのデザインが崩れてしまう不具合が発生しています。お手数をおかけいたし申し訳ございませんが、カラースターやスターの削除についてはブラウザからご利用ください。

はてなフォトライフの画像を表示する際に、画面にズレが生じないよう変更しました

本日、はてなフォトライフの画像をはてなブログに貼り付けた場合に、画像表示時に画面にズレ(レイアウトシフト)が生じないよう変更しました。

この変更により、画面をスクロールした際に、後から画像の読み込みが行われ、閲覧中の領域が下にずれてしまう、という問題を回避することができます。

f:id:hatenablog:20210513145512p:plain

また、この変更に合わせて画像の遅延読み込み(lazy load)にも対応し、画像をたくさん掲載したブログでも快適に閲覧できるようになりました*1

なお、本変更が適用されるのは、本機能リリース後に投稿されたエントリのみとなります。過去に投稿されたエントリへの適用方法については、下記をご参照ください。

過去に貼り付けたフォトライフの画像について

編集モード「はてな記法」「Markdown」をご利用の記事については、記事を更新していただくと、自動的に本変更が適用されます。*2

編集モード「見たまま」で投稿された記事については、仕様上記事の再投稿を行っても本変更は適用されません。同じ画像を編集サイドバーから貼り付け直していただくか、「HTML編集」タブを開き、以下のようにimgタグのwidth,height属性に画像のサイズ情報を入力いただく必要がございます。

  • 変更前のimgタグ
    • <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/sample/20210101/20210101000000.jpg" alt="f:id:sample:20210101000000:plain" title="" class="hatena-fotolife" itemprop="image" />
  • 変更後のimgタグ(赤背景が変更点)
    • <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/sample/20210101/20210101000000.jpg" alt="f:id:sample:20210101000000:plain" title="" class="hatena-fotolife" itemprop="image" width=”画像の幅(数字が入ります)" height=”画像の高さ(数字が入ります)” loading="lazy" />

お手数をおかけいたしますが、ご理解いただけますと幸いです。

画像が誤った縦横比で表示されてしまう場合

本変更の影響で、ユーザーが作成したテーマを利用している場合、画像が誤った縦横比で表示されてしまう可能性があります。

そのような問題が発生した場合、下記の窓口より、問題が発生したテーマの情報とともにご連絡いただけますと幸いです。表示崩れを回避するには一時的に別のテーマへの変更をご検討ください。
お問い合わせ

*1:Safariなどloading属性による遅延読み込みに対応していないブラウザではご利用いただけません

*2:なお、必要に応じて、はてなにて表示用のHTMLの再生成を行う場合があり、その際には本変更が自動で適用されます

アドレスバーに “entry.new” と入力すると、はてなブログの記事が書けるようになりました!

本日より、ブラウザのアドレスバーにentry.newと入力してアクセスすると、はてなブログの記事編集画面に転送されるようになりました。

ブラウザでネットサーフィンをしていて、ふと日記を書きたくなった時、記事のアイデアを思いついた時などに、素早く記事編集画面にアクセスし、記事を書き始めることができます。どうぞご利用ください。

なお、複数のブログを開設している場合、メインブログに設定しているブログの記事編集画面が表示されます。投稿先をお間違えにならないようにご注意ください。

あわせて利用すると便利な機能

  • キーボードショートカットで下書き保存
    • 編集画面へのアクセスから、下書き保存までキーボードのみで素早く完結させられます。ブログ記事のアイデア保存に最適です

記事編集画面内で、誰でも簡単に「アイキャッチ画像」を作れるようにしました

はてなブログでは、記事編集画面(PC版)内で、記事のアイキャッチ画像を作成・編集できるようにしました。専用ソフトや技術がなくても100種類のテンプレートから選んで編集でき、オリジナリティを出したい方は自分でゼロから作成することもできます。グラフィックデザインプラットフォーム「Canva*1」による「Canvaボタン*2」を使った機能です。

このアイキャッチ画像は「Canva」で作成しました

使い方

記事編集画面(PC版)の編集サイドバーから「アイキャッチ画像を作る」を押してください。

f:id:hatenablog:20210215190427p:plain:w300

Canvaの編集画面がその場で開きます。まずはCanvaのアカウントを作成し、ログインしてください(GoogleやFacebookアカウントでも登録できます)

好みのテンプレートを選択して編集するか、ゼロから画像を作成してください。画像の編集が終わったら、右上の「完了」ボタンで保存をすると、自動ではてなフォトライフにアップロードします。

f:id:hatenablog:20210215190500p:plain:w300

アップロード後、本文の先頭にフォトライフ記法が挿入されます。その画像がアイキャッチ画像として設定されていることをご確認ください。

再編集する場合

Canvaでアイキャッチ画像の作成が完了し、はてなフォトライフにアップロードされた後、同一セッション中に再度「アイキャッチ画像を作る」ボタンを押すと、直前に作成した画像を再編集できます。一度ブラウザを閉じるなど、セッションが途切れた場合は再編集できませんのでご注意ください。

アイキャッチ画像のテンプレートは100種類!

本機能の公開にともない、Canvaに「はてなブログのアイキャッチ画像のテンプレート」を100種類ご用意いただきました。

以下のCanvaの公式記事にて、詳しい画像の編集方法を解説しています。こちらも合わせてご覧ください
はてなブログのアイキャッチ画像はCanvaにお任せ!目を惹くアイキャッチ画像の作り方