記事にInstagramの投稿を埋め込む

はてなブログでは Instagram の投稿を記事に簡単に埋め込むことができます。ここでは「はてなブログ」の記事に Instagram の投稿を埋め込む方法について解説します。なお記事へ Instagram の投稿を埋め込む場合には Instagram と連携を行っていなくても可能です。

(Last modified: )

Instagramの投稿のURLを貼り付ける

Instagram の投稿の URL を取得し記事に貼り付けます。例として次の投稿を埋め込んでみます。

Instagramの投稿のURLを貼り付ける(1)

URL を取得するために投稿の右上に表示されている「・・・」をクリックしてください。

Instagramの投稿のURLを貼り付ける(2)

表示されたメニューの中から「リンクをコピー」をクリックしてください。投稿の URL がコピーされます。

Instagramの投稿のURLを貼り付ける(3)

はてなブログで記事の新規作成画面を開き、ツイートを埋め込みたいところにカーソルを合わせたあと先ほどのツイートの URL を貼り付けてください。

Instagramの投稿のURLを貼り付ける(4)

リンクの設定画面が表示されます。形式として「埋め込み」を選択し、その後で「選択した形式でリンクを挿入」をクリックしてください。

Instagramの投稿のURLを貼り付ける(5)

カーソルがあった位置に Instagram の投稿が埋め込まれました。(記事の作成画面では投稿の一部だけが表示されています)。

Instagramの投稿のURLを貼り付ける(6)

記事を投稿して公開してみると、次のように Instagram の投稿が記事の中で表示されました。

Instagramの投稿のURLを貼り付ける(7)

-- --

もし、記事の作成画面で URL を貼り付けた時にリンクの設定画面が表示されなかった場合は、貼り付けた URL を選択してから「リンク」アイコンをクリックしてください。

Instagramの投稿のURLを貼り付ける(8)

リンクの設定画面が表示されましたら、テキストボックスにツイートの URL が入力されているのを確認の上で「プレビュー」をクリックしてください。(テキストボックスが空だった場合は、 Instagram 投稿の URL を貼り付けてください)。

Instagramの投稿のURLを貼り付ける(9)

形式として「埋め込み」を選択し、その後で「選択した形式でリンクを挿入」をクリックしてください。あとは同じです。

Instagramの投稿のURLを貼り付ける(10)

Instagramの投稿埋め込み用コードをHTML編集画面で貼り付ける

もう一つの方法として Instagram の投稿の埋め込み用のコードを取得し、はてなブログの HTML 編集画面から貼り付けることもできます。埋め込みたい 投稿の右上に表示されている「・・・」をクリックしてください。

投稿埋め込み用コードをHTML編集画面で貼り付ける(1)

投稿埋め込み用コードをHTML編集画面で貼り付ける(1)

表示されたメニューの中から「埋め込み」をクリックしてください。

投稿埋め込み用コードをHTML編集画面で貼り付ける(2)

次のような画面が表示されます。「埋め込みコードをコピー」をクリックしてください。 Instagram の投稿を埋め込むためのコードがコピーされます。

投稿埋め込み用コードをHTML編集画面で貼り付ける(3)

はてなブログで記事の新規作成画面を開き、画面上部の「HTML編集」タブをクリックしてください。

投稿埋め込み用コードをHTML編集画面で貼り付ける(4)

記事の HTML 編集画面が表示されます。動画を埋め込みたいところに先ほどコピーしたツイートの埋め込み用コードを貼り付けてください。

投稿埋め込み用コードをHTML編集画面で貼り付ける(5)

投稿埋め込み用コードをHTML編集画面で貼り付ける(6)

記事を投稿して公開してみると、次のようにツイートが記事の中で表示されました。

投稿埋め込み用コードをHTML編集画面で貼り付ける(7)

-- --

「はてなブログ」の記事に Instagram の投稿を埋め込む方法について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。