リンクの挿入とコンテンツの埋め込み

はてなブログでは、記事編集画面でURLを指定するだけで、Webページや画像、動画などさまざまなコンテンツを適した形式で貼り付ける リンク挿入機能 が利用できます。

「リンクを挿入」ウィンドウ

貼り付ける形式は、次のように 「リンクを挿入」ウィンドウ で指定します。

  1. 記事編集画面にURLをコピー&ペーストすると「リンクを挿入」ウィンドウが開きます
  2. URLの種類によって「埋め込み」「画像」「タイトル」「URL」など、貼り付ける形式がいくつかプレビューできます(下記表参照)
  3. 貼り付けたい形式をクリックして選択します
  4. ウィンドウ下の「選択した形式でリンクを挿入」をクリックします
  5. 選択した形式で記事編集画面に挿入されます。
見たままモードではプレビュー通りに、それ以外の編集モードでは対応したオプションの「はてな記法」で貼り付けられます。

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

「リンクを挿入」ウィンドウでプレビューできるリンクの形式は、以下の通りです。実際に表示される形式は、ペーストしたURLの種類によって異なります。

形式 説明 はてな記法
URL URLをそのまま挿入します。 オプションなし
タイトル ページのタイトルを自動取得し、テキストリンクとして挿入します。 :title
選択範囲 記事編集画面のテキストを選択してURLをペーストすると、選択範囲にリンクを挿入できます。 :title=text
画像 画像そのもののURLをペーストした場合、画像(img要素)として貼り付けることができます。 :image
埋め込み 動画や音楽などのコンテンツを、サイトごとに最適化された形式で埋め込みます。一般的なWebページを貼り付けた場合は、ブログカードが利用できます。 :embed

入力補助ツールバーから「リンクを挿入」ウィンドウを開く

「リンクを挿入」ウィンドウは、編集画面の入力補助ツールバーにある リンクボタンをクリックしても、開くことができます。

貼り付けたいWebページを URL 欄に入力して プレビュー をクリックしてください。

「リンクを挿入」ウィンドウを自動で開かないようにする

URLをペーストするだけで「リンクを挿入」ウィンドウが開くのを止めたいときには、ウィンドウ内の「URLを貼り付けたときにこのウィンドウを開く」というチェックを外してください。次回から、URLを貼り付けても「リンクを挿入」ウィンドウを表示しなくなります。

いったん非表示にした後で、リンク挿入機能を利用したいときには、上記のように入力補助ツールバーの「リンク」ボタンから「リンクを挿入」ウィンドウを表示してください。この際、上記のチェックを入れ直すと、また自動で表示できます。

リンクを新しいタブで開く

「リンクを新しいタブで開く」のチェックボックスをオンにした状態で「選択した形式でリンクを挿入」ボタンを押すと、リンクのtarget属性に_blankが指定され、リンクが新しいタブで開くようになります。

補足情報
  • 編集モードについて
    • 「見たままモード」と「HTMLモード(有料プラン限定機能)」にて利用可能です
    • 「はてな記法モード」と「Markdownモード」では利用できません
  • リンクの形式について
    • 「タイトル」「URL」「選択範囲」「画像」にて利用可能です
    • 「埋め込み」はこれまでも新しいタブで開く仕様だったため、チェックボックスをオンにする必要はございません

はてな記法でコンテンツを貼り付ける

「リンクを挿入」ウィンドウを利用しないで、はてな記法を編集画面に直接記入してコンテンツやWebページを貼り付け・埋め込むこともできます。上記の表の右端に示したオプションを、http記法の最後に追加します。 例えば、次のように:embedオプションを指定すると、
[https://www.youtube.com/watch?v=eOVq9pxjr6s:embed]
次のようにサイトに適した「埋め込み」形式でコンテンツを貼り付けることができます。 同様にそのほかのオプションで「タイトル」などの形式を指定したリンクを記述できます。
動画や画像、音楽などさまざまなコンテンツを「埋め込み」形式で貼り付けることができるのは、それぞれのサイトがoEmbedという仕様に対応しているためです。はてなブログでは、独自に対応したいくつかのサイトに加えて、oEmbedに対応したすべてのサイトを埋め込むことができます。

編集サイドバーを利用して記事を書く

はてなブログの記事編集画面には、右側に 編集サイドバー があります。編集サイドバーでは、記事に写真や画像を貼り付けたり、カテゴリーを設定したりできます。また、予約投稿をしたりできます。

編集サイドバーの位置(左:PC, 右:スマートフォン)

編集サイドバーの詳細

編集サイドバーには、初期状態で次のメニューボタンが表示されています。

タブの名前 編集できる内容
ツールバーを開閉する サイドバー自体を展開、収納することができます
写真を投稿 写真や画像をはてなフォトライフにアップロードし、記事に貼り付けることができます。詳細は、ヘルプ「記事に写真や画像を貼り付けるおよび「はてなフォトライフを使う」」を参照してください。
カテゴリー 編集中の記事にカテゴリーを設定できます。詳細は、ヘルプ「記事のカテゴリーを設定・管理する」を参照してください。
編集オプション 編集中の記事について、投稿日時、個別URL、アイキャッチ、概要の4つのオプションを指定できます。予約投稿もできます。詳細は、ヘルプ「編集オプションで予約投稿などを実行する」を参照してください。
追加 タブを整理する画面が開きます。

編集サイドバーのタブを整理する

外部サービスなどから投稿を貼り付ける機能などは、一番下の タブから追加できます。

追加タブを開くと、編集サイドバーにあるタブの一覧が表示されます。それぞれクリックすると、対応するタブが開きます。

右側のトグルスイッチを右にオンすると、機能タブへのショートカットとしてサイドバーにメニューボタンが追加されます。

さまざまな貼り付け機能など

上記のタブの下からは、さまざまな外部サービスから投稿などを貼り付けることができます。外部サービスごとにタブがあります。

タブの名前 編集できる内容
過去記事貼り付け 過去記事を検索し、記事に貼り付けることができます。詳細は、ヘルプ「ブログカード」を参照してください。
引用貼り付け 記事を読んでいるときに「引用」ボタンでストックした引用を貼り付けることができます。詳細は、ヘルプ「引用ストックボタンと引用貼り付け機能」を参照してください。
Amazon商品紹介 Amazonの商品を検索して、商品情報を貼り付けることができます。
楽天商品紹介 楽天市場の商品を検索して、商品情報を貼り付けることができます。
YouTube貼り付け YouTube上の動画を検索し、貼り付けることができます。
Instagram貼り付け Instagramアカウントを連携することで、Instagram上の写真、動画を貼り付けることができます。
はてなブックマーク貼り付け 自分がブックマークしたサイトを貼り付けることができます。自分がつけたブックマークコメントがある場合は、コメントも貼り付けされます。
Googleフォト貼り付け Googleフォトから写真を貼り付けることができます。
ニコニコ動画貼り付け ニコニコ動画のURLを入力することで、動画ブログパーツを貼り付けることができます。
pixiv貼り付け pixivアカウントを連携することで、pixiv上の作品を貼り付けることができます。
iTunes商品紹介 iTunes上にある音楽、アプリなどを検索して、商品情報を貼り付けることができます。
Evernote貼り付け Evernoteアカウントを連携することで、ブログにノートを貼り付けることができます。
レストラン紹介 ぐるなびからレストランを検索し、ブログに貼り付けることができます。
Gist貼り付け GitHubユーザー名を入力すると、投稿したGistをブログに貼り付けることができます。
Flickr貼り付け 自分のFlikrアカウントと連携して公開されている写真を貼り付けることができます。Flickr上のCreative Commons画像を検索し、ブログに貼り付けることができます。
絵を描く ブラウザ上で絵を描き、記事に貼り付けることができます。絵は、はてなフォトライフに保存されます。
ミイル貼り付け カメラアプリ「ミイル(miil)」に投稿した料理写真を貼り付けることができます。
定型文貼り付け 記事編集画面で頻繁に使う文章やHTMLなどを定型文として保存して貼り付けることができます。詳細はヘルプ「定型文貼り付け」を参照してください。
DAZN貼り付け 動画配信サービス「DAZN」のコンテンツのダイジェスト動画を貼り付けることができます。

Amazon商品貼り付け機能について

Amazonの商品紹介には Product Advertising API を利用しています。ユーザーのアフィリエイトIDが設定されていない場合、はてなのアソシエイトタグが挿入され、Amazonのアソシエイトとして適格販売により収入を得ています。

関連項目

関連記事(はてなブログ開発ブログ)

各貼り付け機能