はてなブログ開発ブログ

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

YouTube、Twitter、Instagram、ニコニコ動画、SoundCloud、pixivなど、さまざまなサイトを手軽に貼り付けられるリンク挿入機能を強化しました

本日、はてなブログの編集画面にあるリンクボタンのリンク挿入機能を強化しました。

URLを指定するだけで、タイトルを取得したり、画像を表示したり、選択した文章からリンクできます。また、YouTubeやSoundCloudといったサイトをリンクする際には、コンテンツの種類に応じた埋め込み形式で貼り付けることができます。

こういった多様なリンクの挿入は、はてな記法のURL自動リンク(http記法)で提供していますが、今回の機能追加により、より簡単に編集画面から貼り付けできるようになりました。どうぞご利用ください。

さまざまな形式でリンクを挿入するには

ブログ編集画面で、テキストエリア上部にある入力補助ツールバーのリンクボタンをクリックすると、「リンクを挿入」ウィンドウが開きます.

記事に貼り付けたいWebページを「URL」欄に入力して「プレビュー」をクリックすると、URLの種類によって「埋め込み」「タイトル」「URL」など、貼り付ける形式がいくつかプレビューできます。

「リンクを挿入」ウィンドウ
挿入したいURLを入力してプレビューを確認する

貼り付けたい形式をクリックして選択し,ウィンドウ下の「選択した形式でリンクを挿入」をクリックします。選択した形式で編集画面に挿入されます(見たままモードではプレビュー通りに、それ以外の編集モードでははてな記法になります)。

プレビューで選択できるリンクの形式

プレビューで選択できるリンクの形式は以下の通りです。表示される形式はURLの種類等で異なります。

形式 説明 http記法のオプション
URL URLをそのまま挿入します。 なし
タイトル ページのタイトルを自動取得し、テキストリンクとして挿入します。 :title
選択範囲 編集画面の本文を選択している場合、選択範囲にリンクを挿入します。 :title=selected text
画像 指定されたURLが画像の場合、画像(img)要素として挿入します。 :image
埋め込み 動画や音楽などを、サイトごとに最適化された形式で挿入します。 :embed

はてな記法でURLを自動リンクするオプションについて(上級)

はてな記法モードおよびMarkdownモードで「リンクを挿入」ウィンドウからURLを貼り付けると、はてな記法のURL自動リンク(http記法)が挿入されます。この際、選択した形式に応じて:title :image :embedの各オプションが付加されます(上記の表を参照)。

http記法と各オプションは、手動で挿入しても適切に自動リンクされます。詳細は次のヘルプなどを参照してください。

なお、http記法を含むはてな記法の一部は、見たままモードでも利用できます。

:embedで貼り付けできるサイト

URL自動リンクの:embedオプションが利用できる主なサイトには、YouTube、ニコニコ動画、Instagram、pixiv、Twitter、Gist、iTunes Storeなどがあります。

ほかに、SoundCloud、SlideShare、TED、Vimeoなど、コンテンツの埋め込み形式を取得できるプロトコル oEmbed に対応したサイトを貼り付けることができます*1

URL自動リンク(http記法)にオプションを指定するには、次のようにURL全体を角カッコでくくって記述します。

[http://www.ted.com/talks/lang/ja/derek_sivers_how_to_start_a_movement.html:embed]
[http://www.ted.com/talks/lang/ja/derek_sivers_how_to_start_a_movement.html:title]

これは、次のように展開されます。

http://www.ted.com/talks/lang/ja/derek_sivers_how_to_start_a_movement.html
http://www.ted.com/talks/lang/ja/derek_sivers_how_to_start_a_movement.html

これまでの告知なども参照してください。

*1:oEmbedのページにImplementationsとして一覧されているサイトすべての動作を保証するものではありません