はてなブログ開発ブログ

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

編集画面から画像を直接ドロップして貼り付ける際にも、キャプション(説明文)を付けられるようにしました

はてなブログでは、編集画面に画像を直接ドロップして記事中に画像を貼り付ける際にも、キャプション(写真の内容を説明する文章)や代替テキスト(alt属性)を付けられるようにしました。

利用手順

  1. ブログに掲載したい画像を、WindowsのエクスプローラーやMacのFinder、あるいはデスクトップなどからドラッグし、編集画面にドロップします。
  2. 編集サイドバーの「写真を投稿」タブが自動で開き、ドロップした画像がはてなフォトライフにアップロードされます。
  3. アップロードが完了すると、通常の「写真を投稿」と同様に、編集画面に画像が貼り付けられます。(複数のファイルをドラッグ&ドロップしたときは、順にアップロードされて、すべて貼り付けることができます。)
  4. 「写真の詳細設定」ウィンドウが開くので、キャプションや代替テキスト(alt属性)を入力して、「記事編集画面に貼り付ける」をクリックしてください。*1


f:id:hatenablog:20181129152502g:plain:w500
画像をドロップして貼り付ける様子

ドロップ貼り付け時の注意点

掲載できる画像はJPEG、PNG、GIFなど、はてなフォトライフが対応しているファイル形式です。(詳細は、はてなフォトライフのヘルプを参照してください。)
対応していないファイル型式の画像をドロップしたり、アップロードに失敗した場合には、サイドバーにエラーが表示されます。

*1:編集サイドバーにある「写真を投稿」タブで「貼り付け時に詳細を設定する」がチェックされている必要があります。