こんにちは。当ブログを運営しているユニークスです。
この記事では、
![](https://www.living-with-curiosity.com/wp-content/uploads/2020/12/52548f5593bd5cae5814faf21a900486.png)
ブログのトップページにTwitterのタイムラインを埋め込む方法を知りたい。
こういった疑問に答えていきます。
Twitterのタイムラインをトップページに表示することで、「どんな人がこのブログを書いているのか」を知ることができます。
サイトの信頼度を高めることにもつながりますので、まだの方はぜひ導入しておきましょう。
Twitterのタイムラインを埋め込む方法
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/Twitter-800x600.jpg)
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/Twitter-800x600.jpg)
では早速、Twitterのタイムラインを埋め込む方法を解説していきます。ちなみに設定するとこのような表示になります。
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/2E7A1930-A669-40C8-AF2A-165D5B889951-800x419.jpg)
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/2E7A1930-A669-40C8-AF2A-165D5B889951-800x419.jpg)
Twitter側の設定作業
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/93B66242-15E3-4040-B578-939526903445-800x419.png)
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/93B66242-15E3-4040-B578-939526903445-800x419.png)
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/C24E0A19-CDEA-4A33-8894-08336124CF5C-800x419.jpg)
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/C24E0A19-CDEA-4A33-8894-08336124CF5C-800x419.jpg)
入力欄に、埋め込みたい自分のアカウントのTwitterアドレスを入力します。
Twitterアドレスは、『https://twitter.com/ユーザーID』です。
私の場合は、『https://twitter.com/unique6725』となります。
入力が完了したら矢印ボタン、または、エンターキーを押すと次の画面に移ります。
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/F58B517E-8E37-47EF-875D-68B5189BC1C6-800x419.png)
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/F58B517E-8E37-47EF-875D-68B5189BC1C6-800x419.png)
画面が下に移動したら、タイムライン表示の選択画面がでてきますので左側にある『Embeded Timeline』を選びます。するとコードが表示されます。
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/41626913c33d574cc2b1c83677b8082d-800x174.png)
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/41626913c33d574cc2b1c83677b8082d-800x174.png)
上記のようにコードが表示されると思いますが、実際にブログに表示するタイムラインの高さを調整します。
『set customization options』をクリックします。
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/f7e0e7c9f3ad42b0b8d0b007de70c4fb-800x302.png)
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/f7e0e7c9f3ad42b0b8d0b007de70c4fb-800x302.png)
すると、上記のようなメニューが表示されるので、『What size would you like your timeline to be?』の質問に対して、左側の『Height(px)』の入力欄に高さを入力します。
400~600程度に設定しておくのがよいと思いますので、入力出来たら『Update』をクリックします。
WordPress側の設定作業
ここまで完了したらWordpress側の設定に移っていきます。
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/37B4D67A-0A5D-4D39-BAA5-BAFD96E4E297-800x419.png)
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/37B4D67A-0A5D-4D39-BAA5-BAFD96E4E297-800x419.png)
WordPressダッシュボードの『外観』から『ウィジェット』を選択し、その中の『カスタムHTML』をクリックします。
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/52363829835bb77d686fc4faeafb5d86.png)
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/52363829835bb77d686fc4faeafb5d86.png)
続いて、『サイドバー』を選択し『ウィジェットを追加』します。
すると、画面右側のサイドバーメニューに『カスタムHTML』が追加されますので、タイトルをTwitterと設定して『内容』の中に先ほどコピーしたTwitterのコードを貼り付けます。
問題なければブログにTwitterのタイムラインが埋め込まれているはずです。
補足:高さを再調整する方法
設定後に、「やはりタイムラインの表示高さを変更したい」となった場合、再度同じ手順を踏まなくても高さを調整可能です。
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/8e2af1189df1f63176c7708859ceed70.png)
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/8e2af1189df1f63176c7708859ceed70.png)
上の画面で選択されている『data-height=”600″』の600の部分を任意の値に設定し、保存をクリックすることで高さの調整ができます。
自分の好みの表示サイズを探してみてください。
まとめ: Twitterのタイムラインを埋め込む方法
いかがでしたでしょうか。
Twitterのタイムラインがブログにあると、検索から流れてきた訪問者がフォローしてくれる可能性も高まりますので、PVアップのためにもぜひ設置しておきましょう。
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/C6A5516B-BC31-4674-A77F-6A3A0857580C-500x262.jpg)
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/C6A5516B-BC31-4674-A77F-6A3A0857580C-500x262.jpg)
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/6750e9bd-d687-4239-b9b6-51cfaa9cfd18-500x262.jpg)
![](https://www.living-with-curiosity.com/wp-content/uploads/2021/02/6750e9bd-d687-4239-b9b6-51cfaa9cfd18-500x262.jpg)
それではまた。
コメント