記事にTwitterのツイートを埋め込む

はてなブログでは Twitter に投稿されたツイートを簡単に埋め込むことができます。ここでは「はてなブログ」の記事に Twitter のツイートを埋め込む方法について解説します。なお記事へのツイートの埋め込みは Twitter と連携を行っていなくても可能です。

(Last modified: )

TwitterのツイートのURLを貼り付ける

Twitter に投稿されたツイートの URL を取得して、記事の編集画面に貼り付けます。例として次のツイートを埋め込んでみます。

TwitterのツイートのURLを貼り付ける(1)

Twitter で個別ツイートのページを表示したとき、ブラウザのアドレスバーに表示されている URL がツイートの URL です。

TwitterのツイートのURLを貼り付ける(2)

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

TwitterのツイートのURLを貼り付ける(3)

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

TwitterのツイートのURLを貼り付ける(4)

カーソルがあった位置に Twitter のツイートが埋め込まれました。(記事の作成画面ではどのようにツイートが埋め込まれるのかは確認できません)。

TwitterのツイートのURLを貼り付ける(5)

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

TwitterのツイートのURLを貼り付ける(6)

-- --

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

TwitterのツイートのURLを貼り付ける(7)

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

TwitterのツイートのURLを貼り付ける(8)

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

TwitterのツイートのURLを貼り付ける(9)

カーソルがあった位置に Twitter のツイートが埋め込まれました。(記事の作成画面ではどのようにツイートが埋め込まれるのかは確認できません)。

TwitterのツイートのURLを貼り付ける(10)

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

TwitterのツイートのURLを貼り付ける(11)

Twitterのツイート埋め込み用コードをHTML編集画面で貼り付ける

もう一つの方法としてツイートの埋め込み用のコードを取得し、はてなブログの HTML 編集画面から貼り付けることもできます。 Twitter の画面で埋め込みたいツイートのページを表示したあと、ツイートの右上に表示されている下矢印をクリックしてください。

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

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

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

次のような画面が表示されます。「Copy Code」をクリックしてください。ツイートを埋め込むためのコードがコピーされます。

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

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

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

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

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

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

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

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

ツイート埋め込み用コードをHTML編集画面で貼り付ける(8)

-- --

「はてなブログ」の記事に Twitter のツイートを埋め込む方法について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

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