【ブログの楽しみ方】ツイッターのツイートをブログ本文に埋め込む【cocolog】

ツイッター（以下、Twitterと表記）のツイートをブログの本文内に埋め込む方法の覚え書きです。

詳しくはこちらのサイト（https://www.howtonote.jp/twitter/embed/index1.html）にて説明されているのですが、実際にテストして気づいたことなどをメモしておきます。

• HTMLタグの取得
• 幅の調整、センタリング（右寄せ、左寄せ）、背景色の変更方法

Twitterには他のサイトに貼り付けるための「HTMLタグ」を提供する機能があり、ブログへの貼り付け方は、ココログでしたら、「HTMLの編集」モードに切り替えて、そのタグを貼り付けるだけです。これは、例えば、アフィリエイトのタグとか、他社の「拍手ボタン」や「ブログランキングのボタン」を貼り付けるのと全く同じ操作方法です。

Twitterを利用していない人でも、誰かのツイートからタグを取得することは可能です。

HTMLタグの取得

下はTwitterにログインしていない状態で操作したものです。

（図－1）

ログインしていると、プルダウンボタン（下向きの「>」）をクリックするともっと多くのメニューが表示されますが、ログインしていない状態、つまり、Twitterを利用していない方でも上の2つのメニューは表示されます。ここで「ツイートをサイトに埋め込む」をクリックすると、HTMLタグが表示されます。

下は別のツイートですが、これをコピーしてブログの編集画面（「HTMLの編集」画面）に貼り付けるだけです。

（図－2）

「元ツイート」とは、リプライをつけられた側のツイートなので、一つ上のツイート。「メディアを含める」の「メディア」とは添付された画像や動画などです。

幅の調整、センタリング（右寄せ、左寄せ）、背景色の変更方法

ここでHTMLタグを見てみます。図－2で「元のツイートを含める」だけチェックを外しました。）

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">発展途上国→先進国の郵便代を先進国が一部負担するルールは理解できなくもないが、中国は都合のいいときだけ発展途上国を利用している。これはアメリカが不公平だと主張するのも当然。年間330億円余りも差額を負担しているとは！<a href="https://t.co/cQ8fWZdbSe">https://t.co/cQ8fWZdbSe</a><br>（画像は記事をイラスト化したもの） <a href="https://t.co/hrN02fvnNY">pic.twitter.com/hrN02fvnNY</a></p>&mdash; 大師100 (@Daishi_hundred) <a href="https://twitter.com/Daishi_hundred/status/1052894296083333122?ref_src=twsrc%5Etfw">2018年10月18日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

形式としてはツイート全体が<blockquote>～</blockquote>で囲まれていることが分かります。

また、ツイートに書き込まれている文字列も全てコピーされています。ブログの中にテキストとして書き込まれることになるので、Googleなどの検索対象となります。また、もしこのツイートが消されても、テキストはブログ記事に内に残ります。

ブログ内に組み込まれたツイートは自動的に500pxの幅になると、上にご紹介したサイトに書かれていました。

ブログ主が使用しているブログデザインは元々500pxの幅なので、このままコピペしてもはみ出すことはありませんが、ツイートの幅を好みのサイズにカスタマイズ（変更）することも可能です。

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"■■ここに要素を追加■■>（以下略）

幅を350pxにする場合は「■■ここに要素を追加■■」と書いた部分に「width="350"」と書きます。

挿入されたツイートを本文の幅の中央にセンタリングする場合は、「align="center"」と書きます。（左詰め：align="left"〔規定値〕、右詰：align="right"）

要素は複数組み合わせが可能なので、幅350pxでセンタリングする場合は「width="350" align="center"」と書けばいいことになります。（要素と要素の間には必ず半角スペースを入れること。）

なお、「data-theme="dark"」を追加すると、枠内の白黒が反転し、背景が黒、文字が白くなります。

【width="350" align="center"】

下に表示されているのは組み込まれたツイートです。

発展途上国→先進国の郵便代を先進国が一部負担するルールは理解できなくもないが、中国は都合のいいときだけ発展途上国を利用している。これはアメリカが不公平だと主張するのも当然。年間330億円余りも差額を負担しているとは！https://t.co/cQ8fWZdbSe
（画像は記事をイラスト化したもの） pic.twitter.com/hrN02fvnNY

— 大師100 (@Daishi_hundred) 2018年10月18日

上の部分は、編集画面では下のように表示されていますが、ブログ記事を閲覧した時には枠などが表示されます。

画像はリンクが貼られているだけだと分かります。（「pic.twitter.com/hrN02fvnNY」の部分）

（図－3）

なお、閲覧した際、そのツイートをTwitterで表示させたい場合、下のように、ツイートした時間や日付が表示されている部分をクリックすると、そのツイートが自動的に別ウィンドウ（別タブ）で表示されます。（上部の「Donald J. Trump」の部分をクリックすると、トランプ大統領のTwitterのトップが表示されます。

（図－4）

---