スポンサーリンク

ブログにTwitterの特定のツイートを埋め込む方法

2018年4月13日SNS,ブログ

  • 2020年10月27日
    見直しして少し書き換えました。

今日はブログにTwitterの特定のツイートを埋め込む方法をご紹介します。

この方法はWord Pressで作成したブログだけでなく、無料ブログなどでも特定のツイートを埋め込む事ができます。
「ブログでこのツイートを紹介したい」場合に参考にしてください。

スポンサーリンク

特定のツイートをブログに埋め込む方法

※サンプル(実際に埋め込みしたものです。)

埋め込むコードを取得する

Twitterにログインしてください。(Twitterアプリではなくブラウザでログインしてください。)

Twitter

ブログに埋め込むツイートの右上の をクリックしてください。

「ツイートを埋め込む」をクリックしてください。

画面が切り替わります。(Twitter Publishに移動します。)

1埋め込むコード

記事に埋め込むためのコードです。プレビューを見てこれで良ければコードをコピーしてください。

2表示のカスタマイズ

テーマやリンクの色を変更できます。変更をする場合はここをクリックして設定してください。(カスタマイズについては後ほど紹介します。)

アプリからコードを取得するには?

アプリでツイートの横の をクリックしても「ツイートを埋め込む」という項目はありません。

アプリの場合は、埋め込みたいツイートの右下にある共有ボタンをクリック→「ツイートのリンクをコピー」をクリックしてURLをコピーしてください。

URLをコピーしたら「Twitter Publish」を開き、コピーしたURLを入れて → をクリックするとコードが表示されます。

スポンサーリンク

表示のカスタマイズ

テーマの色やリンク色を変更できます。

3テーマ

『Light (白)』または『Dark (濃いグレー)』どちらかを選択してください。

4ツイート内のリンク色

ツイート内のリンク色を選択してください。

5表示する言語

表示する言語を選択してください。(「Automatic(自動)」のままでいいと思います。)

設定が完了したらUpdateをクリックしてからコードをコピーしてください。

記事にコードを貼り付ける

コードがコピーしたら記事にコードを貼り付けてください。

テーマの色/リンクの色はコードを貼り付けた後でも変更可能です。

《テーマの色を変更する場合》
コード内に『data-theme="✕✕"』という記述がありますので、「✕✕」の部分を『light(白)』または『dark(濃いグレー)』に変更してください。

《リンクの色を変更する場合》
コード内の『data-link-color="✕✕"』という記述がありますので、「✕✕」の部分を変更してください。

《記述がない場合》
上記を追加すれば変更できます。

まとめ

テーマの色がlightかdarkしかないのは残念なところではありますね^^;

自分のツイートだけではなく、他の人のツイートもブログに埋め込む事ができます。
(ただし、ツイートが非公開(フォロワーのみがみられる設定)になっているツイートは埋め込みしても表示されません。)

ツイートを紹介したい時などに使ってみてください。

結耶
結耶

ブロックエディタのブロックを利用して記事に埋め込むこともできます。
ブロックエディタでの埋め込み方法については以下の記事を参考にしてください。

スポンサーリンク

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。