はてなブログ開発ブログ

はてなブログの新機能など開発に関する情報、公式のお知らせを発信します。

ブログのトップページの先頭に、記事を固定できるようにしました

はてなブログでは、ブログのトップページで常に表示させたい記事を固定できるようにしました。読者にまず読んでほしい自己紹介や告知したいことなど、最初のページ(先頭)に載せておきたい情報を、投稿日時によらずいつでも表示させることができます。どうぞご利用ください。

過去に書いた自己紹介記事をトップページの先頭に表示できる

トップページの先頭に記事を固定する方法

記事の管理画面(PC版)の「記事タイトル」一覧から、先頭に固定させたい記事を選びます。「編集」ボタンを押すとメニューが展開されるので、「トップページの先頭に表示する」を選択します。すでに先頭で表示されている記事がある場合は上書きされます。

固定した記事は、記事の管理画面にある「トップページの先頭に表示」という枠で確認できます。「表示をやめる」を選択すると、先頭での表示を解除できます。先頭で表示している記事を削除したり、下書きに戻したりした場合は、自動的に表示が解除されます。

はてなが提供するドメインのブログで、HTTPSで配信できる仕組みの提供を開始しました(追記あり)

【2018/4/17 追記】
2018年4月から、はてなが提供しているドメインを使用した全てのブログに、HTTPSで配信できる仕組みの提供を開始しました。
http://staff.hatenablog.com/entry/2018/04/17/150000

はてなブログでは2018年2月22日から、ブログをHTTPSで配信できる仕組みを、はてなが提供する5つのドメインで順次提供します。公開時点では、一部のブログでのみご利用いただけます。対象となるブログの範囲は順次拡大していく予定です。

ブログをHTTPS配信に設定する際は、以下の仕様と注意事項をご理解いただいた上でご利用ください。なお、今後新たに開設されるブログについては、全てHTTPSで配信されます。

※ 独自ドメインではてなブログを運用されている方へのHTTPS配信設定は、今後対応予定です。今しばらくお待ちください。

HTTPS配信を利用できるブログ

今回、HTTPS配信をご利用いただけるのは、はてなが提供するドメインを設定しているブログです。はてなブログが提供するドメインは、ブログ開設時に選択できるhatenablog.comhatenablog.jphateblo.jphatenadiary.comhatenadiary.jpの5つです。

HTTPからHTTPSへ移行する際の負荷分散のため、まずは一部のブログにのみ適用します。今後、数週間以内をめどに、対象となっている全てのブログで順次ご利用いただける予定です。実際の移行状況や負荷によってはスケジュールを変更する場合がありますので、ご了承ください。

HTTPS配信設定を利用できるか確認するには

ダッシュボードから設定画面にアクセスしてご確認ください。ご利用いただける場合は、「HTTPS配信が利用いただけます」というメッセージが表示されます。なお、提供開始日時に関するお問い合わせにはお答えいたしかねますので、ご了承ください。

ご利用いただける場合 まだご利用いただけない場合
f:id:hatenablog:20180222104658p:plain f:id:hatenablog:20180222111357p:plain

新しくブログを開設する場合

2018年2月22日以降に新しく開設されたブログは、最初からHTTPSで配信されます。

※ 2018年2月22日以降に新規開設したブログ、および既存のブログでHTTPS配信を選択しているブログでも、後から独自ドメインを設定した場合は、HTTPでの配信になります(2018年2月22日現在)

HTTPS配信への設定方法と仕様

ブログをHTTPS配信に設定する際は、以下をご理解いただいた上でご利用ください。

設定方法

ダッシュボードから設定画面にアクセスします。まだHTTPS配信を設定していない場合は、「HTTPS配信の状況」で「無効」と表示されます。ヘルプを確認し、仕様をご確認いただいた上で「変更する」を選択してください。

はてなスター・はてなブックマークの移行について

HTTPS配信に設定すると、ブログに付けられているはてなスターおよびはてなブックマークも、自動的にHTTPSのURLに変更されます。はてなブックマーク数によっては、移行完了までに時間がかかることがあります。

デザインテーマについて

デザインテーマのうち、はてなブログの提供する公式テーマは、混在コンテンツ(Mixed Content)が起きないよう修正を完了しています。それ以外のテーマをご利用の方、ご自身でカスタマイズしている方は、以下の方法でご確認ください。デザインテーマで、混在コンテンツが発生すると、表示が大きく崩れることがあるのでご注意ください。

編集サイドバーの混在コンテンツ(Mixed Content)対応について

HTTPSのページを閲覧するときに、ページ内にHTTPの画像やJavaScriptがある場合は、混在コンテンツ(Mixed Content)と該当箇所をWebブラウザがブロックするため、表示されません。

過去記事で、記事編集画面の編集サイドバーにある各種の貼り付け(商品紹介、動画や画像貼り付けなど)を行ったものについては、ごく一部にHTTPS未対応のものがあります。大変お手数ですが、ご自身で記事を再度編集してご対応いただくようお願いいたします。新規記事で、編集サイドバーから貼り付けたものは、以下を除きHTTPSで展開します。

楽天商品紹介

楽天商品紹介を利用すると、画像がHTTPで展開されることを確認しています。追って対応を進める予定です。

過去記事および、編集サイドバーを利用せずご自身で貼り付けたコンテンツについては、以下の方法でご確認ください。

混在コンテンツ(Mixed Content)の確認方法

ブラウザの「開発者ツール」を利用すると、次のように「Mixed Content」エラーが確認できます。

f:id:hatenablog:20170925141303p:plain
Mixed Contentエラーは開発者ツールなどで確認できます

混在コンテンツは、HTTPSで配信されるWebページに、次のようなHTTPのコンテンツimg要素の画像や、JavaScript、CSS、iframeなど)が貼り付けられていることで発生します。

<img src="http://...">

@import url('http://...' .....

<script src="http://..." ...>

はてなブログにおいてHTTPS配信の利用を検討される方は、記事やサイドバーなどにご自身で配置・掲載した外部サイトの画像や、広告・ブログパーツなどが、下記のようにHTTPShttps://であることをご確認ください。

<img src="https://...">

@import url('https://...' .....

<script src="https://..." ...>

注意事項

※ 一度、HTTPからHTTPSに変更したブログを元に戻すことはできません。
※ 2018年2月22日現在、はてなが提供するドメインのブログに独自ドメインを設定した場合は、HTTPS配信に変更した後でもHTTPで配信されます。
※ はてなが提供するドメインを独自ドメインに設定した後、何らかの理由で独自ドメインが無効になり、はてなが提供するドメインに戻った場合は、ブログがHTTPS配信に変更されます。この場合、ユーザーがHTTPS配信への変更を設定していなくても、強制的にHTTPS配信に切り替わります。

今後の予定

独自ドメインではてなブログを運用されている方へのHTTPS配信設定は、引き続き実装を進めております。当初お伝えしたスケジュールからお待ちいただいておりますが、安全性を考慮した上での慎重な段階的リリースとなることをご理解いただければ幸いです。

追記

[2018/2/27]TeX記法で書かれた数式のimgタグを修正しました

TeX記法を利用した際、imgタグで埋め込まれる画像がHTTPで展開されていましたが、HTTPSで展開するように修正しました。過去の記事については、再度更新をするとHTTPSで展開されます。ご報告いただいたユーザーの皆さま、ありがとうございました。

[2018/4/17]はてなが提供しているドメインを使用した全てのブログが、HTTPSで配信できるようになりました(独自ドメインについてのお知らせあり)

staff.hatenablog.com

画像を貼り付ける際に、キャプション(説明文)を付けられるようにしました

はてなブログでは、記事編集画面(PC版)の編集サイドバーにある「写真を投稿」タブから写真を貼り付ける際に、キャプション(写真の内容を説明する文章)を付けられるようにしました。旅先での風景や、料理の工程などで何の写真なのかを説明したいときに、簡単な手順で挿入できます。どうぞご利用ください。

次のように写真の下にキャプションを表示できます。

これはエイの写真です(ここがキャプションです)

キャプションを付けるには

編集サイドバーにある「写真を投稿」タブから写真を貼り付ける際、「貼り付け時に詳細を設定する」にチェックが入っている状態で「選択した写真を貼り付け」をクリックします。「写真の詳細設定」ウィンドウが開くので、キャプションを入力して、「記事編集画面に貼り付ける」をクリックしてください。

編集サイドバーから簡単にキャプションを入れられます

※キャプションを入力する際に、改行することはできません。また、HTMLタグなども入力できません。

複数枚まとめて貼り付けた画像のキャプション

画像を複数枚まとめて貼り付ける場合は、一番下の画像の下にキャプションを表示します。先日リリースした「横並び」を利用したときには、画像ごとではなく、次のように並んだ画像全体のキャプションを中央に表示します。

横並びでキャプションを付けた場合のイメージ

キャプションや横並びを使用して「写真を投稿」する際の注意点

編集サイドバーの「写真を投稿」では、キャプションや横並びの機能を追加したことにより使い勝手がこれまでと変わっているところがあります。次の点に注意してください。

  • 編集モードが「見たまま」のとき、「見たまま編集」タブでは、キャプションや横並び順を再編集できません
  • 「貼り付け時に詳細を設定する」にはデフォルトでチェックが入っています。いったんオフにすると、以降は必要があってチェックを入れるまで、外れた状態になります
  • 写真のキャプションや横並びは、「選択した写真を貼り付け」ボタンをクリックするときに有効です。写真をダブルクリックしたときには、従来通りクリックした写真が単独で貼り付けられます
  • 「+写真を投稿」ボタンを押したり、編集画面にドラッグ&ドロップして新規に画像を投稿する際には、従来通りそのまま画像が編集画面に貼り付けられます。キャプションや横並びを指定するには、いったん画像を記事編集画面から削除して、編集サイドバーから選択し直してください

はてなブログProを新規で申し込む際に、はてなポイントを介さず、クレジットカードで直接決済できるようにしました(追記あり)

はてなブログの有料プラン「はてなブログPro」を新規でお申し込みいただく際に、利用料金を直接クレジットカードでお支払いいただけるようにしました。

これにより、はてなブログProのお申し込みにあたっては、「クレジットカード決済」と従来通りの「はてなポイントを介したお支払い」を選択いただけるようになりました。詳細は「はてなブログProに新規でお申し込みされる方へ」の項目をご確認ください。

なお、現在はてなブログProをご利用中の方がはてなポイントを介したお支払いからクレジットカード決済への変更を希望される場合は、今後はてなブログProの継続時にクレジットカード決済に切り替える機能追加を予定しておりますので、そのリリースをお待ちください。詳細は「はてなブログProをご利用中の方へ」の項目をご確認ください。

はてなブログProに新規でお申し込みされる方へ

お申し込み時にクレジットカード決済が選択できます

新しくはてなブログProの各コースにお申し込みいただく場合、お申し込み画面ではあらかじめクレジットカード決済が選択されています。はてなポイントを介してのお支払いを希望される場合は、お申し込み画面内のリンクから選択できます。

クレジットカード決済でお申し込みいただくと、最初の30日間は無料でご利用いただけます

クレジットカードで直接決済いただいた場合に限り、1つのはてなアカウントにつき1回のみ、最初の30日間は無料ではてなブログProをご利用いただけます。これまでにはてなブログProを一度もご利用いただいたことがない方が対象です。30日経過した後、選んだコースに応じた料金が自動的に発生しますのでご注意ください。30日経過する前に解約した場合、料金は発生いたしません。

クレジットカード決済のお支払いが発生するタイミングについて

はてなブログProのご利用は、コースごとに定まった利用期間単位となります。クレジットカード決済の場合、期間中に解約手続きを行わない限り、利用期間満了時にご利用中のコースが自動更新されます。

クレジットカード決済でお申し込みいただいた場合、ご利用開始時(初月無料対象者を除く)および自動更新時に、各コースの料金のお支払いが発生します。引き落とし時点でご登録のクレジットカードが無効となっている場合は、7日間の支払い猶予期間を経て、はてなブログProの機能は利用停止(解約扱い)となります。

はてなブログProをご利用中の方へ

※はてなブログProをご利用中で、利用期間の満了が迫っており、引き続き同じコースでの継続を予定している方は、機能追加のアナウンスがあるまで、はてなポイントを購入のうえ自動更新されることをおすすめします
下記にあるように、いったん解約してクレジットカード決済に切り替えることもできますが、とくに注意点として記載したように独自ドメインの設定が一時的に無効になるなどのおそれがあります。
はてなブログProの継続についてご不明な点などありましたら、お問い合わせ窓口よりはてなサポートにご連絡ください。【9月12日追記】

引き続きはてなポイントでのお支払いを希望される場合

はてなブログProをご利用中の方で、引き続きはてなポイントでのお支払いを希望される場合は、何かお手続きいただく必要はありません。ご利用いただいているコースの利用期間が満了した際は、これまでと同様に更新の処理が行われます。

クレジットカード決済への変更を希望される場合は、今後の機能追加をお待ちください

はてなブログProをご利用中の方がお支払い方法を変更される場合、現時点では、一度はてなブログProをご解約いただき、再度お申し込みいただく必要があります。解約後に再度お申し込みいただく場合の方法や条件は、はてなブログProに新規でお申し込みされる場合と同じです。

今後、一度解約することなくお支払い方法を変更するための機能追加を予定しております。お支払い方法の変更をご希望の方にはご不便をおかけいたしますが、機能追加をお待ちください。機能追加を待たずに、一度はてなブログProを解約してお支払い方法を変更したいという方は、以下の注意点をご確認ください。

<一度はてなブログProをご解約いただく場合の注意点>

はてなブログProの解約を申し込むと、残っている有効期限が経過した後に解約が実行されます。有効期限内の途中で解約し、お支払い方法を変更することはできません。

また、はてなブログProで「独自ドメイン」を設定されている方は、解約すると一時的に独自ドメインでブログにアクセスできなくなってしまいます。解約を検討される際は、十分ご注意ください。独自ドメインに関して少しでもご不安がある場合は、機能追加をお待ちいただいてから、お支払い方法を変更してください。

クレジットカード決済の場合に限り、コースごとの利用期間の日数が固定となります

はてなポイントを介したお支払いでは、月・年ごとの日数の違いに伴って各コースの利用期間が変動いたしますが、クレジットカード決済では日数の違いによる変動はありません。1ヶ月コースは30日間、1年コースは365日間、2年コースは730日間で固定です。

今後もはてなポイントでお支払いいただく場合は、利用期間の計算方法に変更はございません。従来通り月・年ごとの日数の違いに応じた期間でご利用いただけます。

【8月2日追記】デビットカード等の扱いについて

新しい決済は、現在のところ日本で発行されたクレジットカードのみに対応しており、クレジットカード発行会社によるものでもデビットカードやプリペイドカード、海外で発行されたクレジットカードには対応しておりません。ご要望もいただいておりますが、対応できるかを検討している段階であり、今後についてはあらためてお知らせいたします。

【8月21日追記】デビットカードやプリペイドカード等に対応しました

本日8月21日(月)より、はてなブログProのクレジットカード決済で、デビットカードやプリペイドカード、海外で発行されたクレジットカードについてもご利用いただけるようになりました。ただし、一部のカードでは、毎月の決済が発生する商品の購入を制限していることもあります。ご利用のカード発行会社にご確認ください。

【12月5日追記】30日間の無料体験が利用可能な条件を変更しました

本日12月5日(火)より、はてなブログProを最初の30日間、無料でお試しいただける方の条件を変更しました。これまでははてなブログProをクレジットカードで直接決済いただいたことのない方が対象でしたが、決済方法を問わず1度もはてなブログProをご利用いただいたことがない方を対象とさせていただきました。

固定ページを作成できるようにしました(はてなブログPro)

はてなブログでは、有料プラン「はてなブログPro」利用者向けに、独立した固定ページを作成できる機能を追加しました。投稿した順に時系列で扱われる通常の記事とは別に、ある固定のURLのみで表示される特別なページを作成できます。

「お問い合わせ」や「自己紹介」「注意事項」「リンク集」といった静的なコンテンツを用意したいときに便利です。どうぞご利用ください。

固定ページの作成

固定ページは、ブログのダッシュボードに新しく追加した「固定ページ」メニューから「ページの管理」画面を開いて、作成・管理できます。

ページを作成するには、まずその「URL」を指定します。URLは、はてなブログの通常の記事のカスタムURLと同じように指定できますが、記事の配信ディレクトリー(デフォルトではentryを含まないパスを自由に作成できます。

※はてなブログのシステムで使用しているaboutarchiveといったパス名の固定ページを作成することもできますが、表示する際にはシステムのパスが優先されます。

ページの編集・更新

「URL」を入力して「ページを作る」ボタンをクリックすると、ページ編集画面が開きます。

ページ編集画面では、通常の記事編集画面と同じようにページを作成・更新できます。編集サイドバーや入力補助ツールバーも使用でき、編集モードも切り替えられます。ページ編集画面の左下にある公開・更新ボタンを押すと、ページが公開されます。下書き保存もできます。

作成した固定ページは、トップページや記事一覧ページ、サイドバーの新着記事モジュールなどにも掲載されず、フィード(ATOMおよびRSS)でも配信されません。どこからも動線のないページとなるため、サイドバーの「リンク」モジュールなどで明示的にリンクしてください。

ページの管理と注意点

公開または下書き保存した固定ページは、ページの管理画面の下部に一覧表示されます。「編集」ボタンをクリックして、ページを再編集・更新・下書きに戻すなどができます。通常の記事と同じように編集履歴を確認することもできます。

ページを削除するには、ページ編集画面を開いて、右下にある削除ボタンをクリックしてください。

そのほか、以下の点に注意してください。

  • ページのURLは、編集オプションの「カスタムURL」で変更できます。
  • ブログメンバーもページを作成・編集できます(寄稿者権限のメンバーは下書き保存のみ可能です)
  • 作成できるページ数に制限はありません

また、次のような制限があります。

  • カテゴリーを設定することはできません
  • ページの公開日時は指定できず、予約投稿もできません
  • IDコールは通知されません
  • 下書き共有URLは取得できません
  • その場編集はできません

ページのレイアウト

固定ページは、通常の記事ページから、時系列の記事に特有の要素を除いたレイアウトになっています。

具体的には、公開日時、執筆者、コメント欄、ソーシャルパーツ、「記事上」「記事下」のカスタマイズ(HTMLの自由記述欄)、関連記事、はてなによる広告(非表示にしていない場合)、本文上の日付、カテゴリー、パンくずリスト(詳細設定で設定できるもの)などを表示しません。

さらに「編集オプション」の「レイアウト」欄で、サイドバーの有無を選択できます。

レイアウト 説明
記事レイアウト 通常の記事と同様のレイアウトで、サイドバーを表示します。
ヘッダ・フッタレイアウト サイドバーを表示せず、タイトルと本文のほか、ヘッダ・フッタが表示要素になります*1

スマートフォンでのレイアウト

スマートフォンのデフォルト表示では、固定ページはPC版に準じたレイアウトになります。本文下の「プロフィール」「注目記事」などスマートフォン版に特有の要素は「記事レイアウト」では表示し、「ヘッダ・フッタレイアウト」では表示されません。

デザイン設定で「レスポンシブデザイン」を有効にしている場合には、スマートフォンでもPCと同じレイアウト、同じデザインテーマで表示されます。

ページのデザイン

固定ページに特有のデザインを施したい場合は、デザイン設定の「デザインCSS」で、ページごとのbodyに付与される次のクラスを使ってスタイルを記述できます。XXXX部分は、ページのURLになります。

static-page-XXXX

*1:詳細編集でヘッダとフッタを非表示にしていれば、タイトルと本文だけになります

記事の編集履歴から、編集した差分を確認できるようにしました

はてなブログでは、記事の管理画面(PC版)から確認できる「編集履歴」で、ひとつ前の履歴との差分を表示するようにしました。それぞれの更新ごとに、どこをどう編集したのかを行単位で確認できます。どうぞご利用ください。

編集履歴画面

※見たままモードでは、文章のみを差分の対象としています。画像の追加や文字装飾の変更は差分に表示されません(はてな記法モード、Markdownモードでは文字装飾なども差分の対象になります)。ご了承ください。

編集した差分の詳細を確認する

編集履歴の一覧画面では、それぞれの差分のダイジェストが表示されています。履歴ごとの「詳細を見る」をクリックすることで、その更新での差分を詳しく確認することができます。

編集履歴の差分

差分では、編集前の行が赤い背景で、編集後の行が緑色の背景で表示されます。赤い背景だけがあればその行は削除されており、緑色の背景だけがあれば追加された行です。色がついていない行は変更されていません。

「編集履歴」機能とは

編集履歴は、記事の管理画面で各記事の「編集」ボタンから「編集履歴を見る」を選択することで確認できます。記事ごとに最新の5回分(はてなブログProをご利用の場合は50回分)の更新が記録・表示されます。詳細は、今年4月に機能追加した際の告知記事をご参照ください。

記事の管理画面から編集履歴を確認し、以前の状態に戻せるようにしました

自分が行った編集の履歴を確認して、過去のバージョンに戻す参考にするのはもちろん、ブログメンバー機能を利用して複数人で記事を編集しているときにも、便利にご利用いただけます。

記事下に「関連記事」を表示します

はてなブログでは、記事ページ(個別記事のパーマネントリンク表示)の本文下(ソーシャルパーツを表示していればその下)に、関連記事を表示するようにしました。そのブログに投稿された記事から、表示中の内容に関連するとみられるものを最大5件まで、一覧形式で表示します。

関連記事が表示されている様子

これにより、ある記事に興味のある読者が同じ傾向の記事を次々と読み進んでくれることが期待できます。関連記事は、PC(レスポンシブデザインを含む)とスマートフォンのどちらにも表示します。どうぞご利用ください。

※本機能はリリース日(2017年6月13日)以降、これから更新される記事で有効です。なお、導入の関係で過去5日程度の記事についても表示されていることがあります。

関連記事を表示しない

記事下の関連記事は、すべてのはてなブログでデフォルトで表示する設定になっています。

デザイン上などの理由で表示したくないときには、デザイン設定画面(PC版)の「カスタマイズ」ページと「スマートフォン」ページで、それぞれPCとスマートフォンの表示・非表示を切り替えることができます。

デザイン設定画面の様子

関連記事についての注意点

記事下の関連記事では、本文の内容から類似するとみられる記事を選出しています。類似する記事がないときに「関連記事」欄そのものが表示されないことがあります。記事の選出方法は、今後も状況により調整することがあります。

上記の注意書きの通り、関連記事の表示はこれから更新される記事に限定しています。今後は、より多くの記事で表示できるよう仕組みの改善を検討していきます。なお、過去の記事であっても、新たに更新したものについては関連記事が表示されます。

【2017年6月20日、追記】過去に更新された記事の「関連記事」について

6月19日より、新規に更新された記事に加えて、過去に更新された記事についても、条件(それぞれのブログで相応のアクセスがあるなど)によって一部に「関連記事」を表示しています。表示の条件は、状況に応じて徐々に調整していきます。