はてなブログ開発ブログ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

クレジットカードで直接決済いただいた場合に限り、1つのはてなアカウントにつき1回のみ、最初の30日間は無料ではてなブログ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のクレジットカード決済で、デビットカードやプリペイドカード、海外で発行されたクレジットカードについてもご利用いただけるようになりました。ただし、一部のカードでは、毎月の決済が発生する商品の購入を制限していることもあります。ご利用のカード発行会社にご確認ください。

固定ページを作成できるようにしました(はてなブログ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日より、新規に更新された記事に加えて、過去に更新された記事についても、条件(それぞれのブログで相応のアクセスがあるなど)によって一部に「関連記事」を表示しています。表示の条件は、状況に応じて徐々に調整していきます。

ブログのトップページを「一覧形式」で表示できるようにしました(はてなブログPro)

はてなブログでは、有料オプション「はてなブログPro」利用者向けに、各ブログのトップページ(PC版*1を表示するときに「全文形式」と「一覧形式」を選択できるようにしました。これまでのように記事の全文を表示するだけでなく、コンパクトに記事の概要のみを一覧で表示することができます。どうぞご利用ください。

トップページの表示形式を変更するには

トップページの表示形式は、ブログの管理画面から詳細設定ページで設定できます。「トップページの表示形式(PC版)」を「全文形式」と「一覧形式」から選択してください。デフォルトは「全文形式」です。

トップページを選択できるようになりました

トップページに表示する記事数

各ブログのトップページには、同じく詳細設定ページにある「トップページの記事数(PC版)」で指定した数だけ記事を表示します。これまでの「全文形式」でも、新しい「一覧形式」でも同様です。

一覧形式はどのように表示されるか

これまでの「全文表示」と新しい「一覧形式」は、それぞれ次のような特徴があります。

形式 説明
全文形式 掲載する記事数だけ本文をすべて(続きを読む記法を使用していればその直前まで)を表示します。デフォルトの表示形式です。
一覧形式 記事のタイトル、概要、アイキャッチ画像などをコンパクトにまとめて、一覧で表示します。

一覧形式のトップページは、次のような表示イメージになります(見栄えはテーマやデザインCSSにより異なります)

一覧形式

記事それぞれの本文が長い場合や、トップページでたくさんの記事をコンパクトに表示したいときなどにご利用ください。

一覧形式のデザイン・レイアウトについて

一覧形式では、記事一覧ページ(/archive)と同様のHTML構造で、記事の投稿日時、タイトル、カテゴリー、概要、アイキャッチ画像、はてなブックマーク数、はてなスターを、記事ごとにコンパクトにまとめて表示します。このため、一覧のレイアウト・デザインも、デフォルトでは記事一覧ページと同じになります。

ただし、ページ全体のHTML構造については記事一覧ページとトップページで異なるため、デザイン設定の「デザインCSS」などを利用してトップページのみのデザイン・レイアウトを適用させることもできます。

*1:レスポンシブデザインのスマートフォン表示を含む

記事編集画面の編集タブで「HTML」モードを選択できるようにしました(はてなブログPro)

はてなブログでは、記事編集画面の左上にある「編集」タブ(PC版)で選択できる編集モードとして、新しく「HTML」モードを追加しました。編集画面に入力されたテキストすべてを、そのままHTMLとして解釈し、表示します。有料プラン「はてなブログPro」ユーザーが利用できます。

これまでも「見たまま」モードの「HTML編集」タブでは、記事をHTMLとして編集することができました。しかし、「見たまま編集」タブでの操作などにより、さまざまなHTMLタグが自動で挿入・置換され、必ずしも執筆者が意図する通りのHTMLで表示されないことがありました。

「HTML」モードでは、 GUI(WYSIWYG)エディタも、はてな記法やMarkdownといった簡易記法もなく、記述したHTMLをインデント等も含めてそのまま保存し、そのままレンダリングして表示します。

いちからHTMLで執筆した記事がすでにある場合や、HTMLの細部にまで思い通りに記述したいときなどにご利用いただけます。

HTMLモードご利用時の注意点

HTML編集モードは、他の編集モードとは異なり、基本設定ページでデフォルトの編集モードとして選択することはできません。PC版の記事編集画面を開き、編集タブから選択してください。

※編集タブで編集モードを選択すると、テキストエリアをリセットするため、執筆中の本文はすべて消去されます*1

HTMLモードでは、入力補助ツールバーは表示されません。見出しや文字装飾には、プレビューで確認しつつHTMLタグを記述してください。

※目次記法、脚注記法、続きを読む記法など、はてな記法を前提とした一部の機能は、HTMLモードでは利用できません。

*1:ブラウザの機能として、リセット後のテキストエリアに消去前のドキュメントがフィルインされることがありますが、はてなブログとして以前の内容が残ることを保証するものではありません。