WordPress

【1分で完結】affinger5でブログ内にツイートを埋め込む方法を解説【Twitter】

困ってる人
ブログの中にTwitterのツイート埋め込みたいな、、、
↓こんな風にカスタマイズする方法も知りたい、、、
困っている人

 

こんな悩みを解決します

 

本記事の内容

  1. affinger5(WordPress)で記事内にツイートを埋め込む方法
  2. 黒背景などのカスタマイズ方法

 

本記事を書いた人

webマーケティング会社(上場企業)で働くaffinger5一筋のブロガー

 

それでは早速本題に入っていきます

[toc]

affinger5(WordPress)でTwitterのツイートを埋め込む方法

 

affinger5(WordPress)にツイートを埋め込む方法は以下の2つです

 

埋め込む方法2つ

  1. ツイートのURLを直接貼り付ける
  2. 埋め込み用HTMLをテキストエディタに貼り付ける

 

maki
1つずつ解説していきます

affinger5でTwitterのツイートを埋め込む方法①:ツイートのURLを直接貼り付ける

 

結論:「ツイートのURLをコピペする」たったこれだけ!

 

3秒で終わる手順を解説します

 

step
1
ツイートを埋め込む手順①ツイートをクリック

step
2
ツイートを埋め込む手順②URLをコピー

step
3
ツイートを埋め込む手順③直接貼り付け

step
4
ツイートを埋め込む手順④完成

 

たったこれだけになります

 

ただし、デメリットとしてカスタマイズや表現の仕方が限られる点もあります。

 

方法①デメリット

細かいカスタマイズができない

 

じゃあカスタマイズするにはどうすればいいの??
困ってる人

 

続いてカスタマイズ可能な埋め込み方法を解説していきます

 

affinger5でTwitterのツイートを埋め込む方法②:埋め込み用HTMLを貼り付ける

 

2つ目の方法は埋め込み用HTMLをテキストエディタへ貼り付ける方法になります

 

カスタマイズ可能になる反面、ほんの少し手順が増えます

 

ツイートを埋め込む方法②手順①:ツイートのハンバーガーマークをクリック

ツイートを埋め込む方法②手順②:「ツイートを埋め込む」をクリック

ツイートを埋め込む方法②手順③:HTMLコードをコピー

ツイートを埋め込む方法②手順④:テキストエディタに貼り付け

affinger5でツイートを埋め込む方法②手順⑤:完成

 

たったこれだけで記事内にTwitterのツイートを埋め込むことができます!

 

埋め込み方は分かったけど、背景はどうやって黒くするの?
残念な人

 

最後に埋め込みのカスタマイズ方法を解説していきます

 

カスタマイズ方法

 

方法②「HTML埋め込み」では下記の様なカスタマイズが使用できます

 

通常

黒背景

 

主なカスタマイズの種類は以下の2つになります

 

カスタマイズ項目2つ

  1. ツイートを黒背景にする
  2. リプライを非表示にする

 

1つずつ解説していきます
焦る人

ツイートのカスタマイズ方法:黒背景のツイートを埋め込む

 

結論:HTMLで埋め込む際にオプションを選択するだけです

 

詳しい手順を図解します

 

step
1
黒背景の埋め込み方法手順③のツイート埋め込み画面からオプションをクリック

step
2
黒背景の埋め込み方法色選択のタブで「Dark」を選択

step
3
黒背景の埋め込み方法完成

 

黒背景のやり方もたったこれだけで変更できます

 

最後にリプライを表示しない方法について解説していきます

 

ツイートのカスタマイズ方法:リプライを非表示にして埋め込む

 

リプライの非表示方法についても、背景を黒にするのと手順は同じです

オプション画面にて下記のチェックボックスを外せば完了!

 

・「Hide Conversation」

 

これだけでいいのか!
驚く人

 

まとめ:affinger5でTwitterのツイートを埋め込む手順

 

いかがでしたでしょうか

 

Twitterをブログ記事に差し込むことで記事の信頼性や見やすさも向上しますよね

ものすごく簡単だったと思いますので皆様も是非使ってみてください!

 

-WordPress
-,