ツイッター

ツイートをサイトに埋め込む方法を分かりやすくご紹介

ツイートをサイトに埋め込む方法をご紹介します。

ツイートを埋め込むための基本的な方法

まず基本的なツイートの埋め込み方としては、Twitterのトップ画面を開いて、コードを取得することから始めましょう。

タイムラインなどから埋め込みたいツイートを発見したら、そのツイートの右端上部にある、くの字型のアイコンをクリックします。

そうすると【ツイートを埋め込む】という選択肢が現れますから、そこをクリックして、コードが記載されているページを表示させてください。

このページでは、元になっているツイートがボックスの中で表示されていて、その上にこのツイートを埋め込むためのコードが書かれています。

間違いなく埋め込みたいツイートだと確認したら【Copy Code】を一度だけクリックします。

コピーに成功すると【Copied!】というポップアップが表示され、第一段階になるコピーの作業はこれで完了です。

ツイートのコピーが終わったら、それぞれのサイトやブログの編集画面に移って、コピーしたコードをペーストしましょう。

普段から行っているようなコピペをする感覚でツイートを貼り付けられますから、まずは気軽にチャレンジしてみましょう。

表示方法の変更もできる

基本的な埋め込み方法のままでサイトにツイートを掲載した結果、デザインのバランスが悪いことが分かったら、画面サイズを変えてカスタマイズしましょう。

コードをコピーするページを開いたら、画面上部に【set customization options】と書かれている部分を見つけてクリックしてみてください。

左上にあるタブをクリックすると、背景色を変更することができます。

デフォルトの状態では背景色がホワイトですが、【Dark】を選ぶと背景色がブラックになるので、白い背景のサイトでは特に映えやすくなります。

以前はサイズの設定もこのページで行えるようになっていましたが、現在は仕様が変更されているので、サイズ等を変更する場合にはコードに手を加えましょう。

コードを見ると最初の箇所に <blockquote class=”twitter-tweet” data-dnt=”true”> と書かれていることが分かります。

サイズの幅は初期状態で500pxになっていますから、半分の250pxに変えたいのであれば、<blockquote class=”twitter-tweet” data-dnt=”true”>にしてください。

同様に、最後の【250】には好きなサイズを入れることができ、250pxから550pxまでの間で自由に設定することができます。

同じように、ツイートをサイトへ埋め込む場所を左寄せにしたい場合や、センタリングさせたい場合にも、コードを変えて対応します。

先ほどと同じように、<blockquote class=”twitter-tweet” data-dnt=”true”>に続くコードにタグを書き加えて編集していきましょう。

例えばセンタリングしたい場合には<blockquote class=”twitter-tweet” data-dnt=”true”>に変更すれば中央寄せができます。

同様に左寄せしたい場合には【center】を【left】に、右寄せしたいなら【right】に書き換えるだけで、表示させる位置を変更させることが可能です。