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

広告

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

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

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。