本日、はてなブログの編集画面にあるボタンのリンク挿入機能を強化しました。
URLを指定するだけで、タイトルを取得したり、画像を表示したり、選択した文章からリンクできます。また、YouTubeやSoundCloudといったサイトをリンクする際には、コンテンツの種類に応じた埋め込み形式で貼り付けることができます。
こういった多様なリンクの挿入は、はてな記法のURL自動リンク(http記法)で提供していますが、今回の機能追加により、より簡単に編集画面から貼り付けできるようになりました。どうぞご利用ください。
さまざまな形式でリンクを挿入するには
ブログ編集画面で、テキストエリア上部にある入力補助ツールバーのボタンをクリックすると、「リンクを挿入」ウィンドウが開きます.
記事に貼り付けたいWebページを「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として一覧されているサイトすべての動作を保証するものではありません