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

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

(Last modified: 2023年01月30日)

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

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

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

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

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

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

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

-- --

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

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

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

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

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

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

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

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

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

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

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

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

-- --

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