※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。


【画像アリ】ブログトップページにX(旧ツイッター)タイムラインを埋め込む方法|ワードプレス

ブログトップページ X タイムライン ブログ

ワードプレスのブログトップページX(旧ツイッター)のタイムラインを載せる方法を解説します。

この記事はこんな人のために書きました!

  • ワードプレステーマCocoonを利用している
  • トップページの脇にX(旧ツイッター)タイムラインを表示させたい!

手順通り操作を行うと、このサイトのトップページのような表示になります。

X タイムライン 埋め込み
そりお
そりお

簡単3ステップです!

X(旧ツイッター)タイムラインを載せる方法を解説

わかれば5分くらいでできます。
画像を使いながら、順番に解説していきます。

埋め込みたいX(旧ツイッター)アカウントのプロフィールURLをコピーする

埋め込みたいX(旧ツイッター)アカウントのプロフィールURLをコピーしにいきます。
どこで確認するかというと、PCでXを開いたときの画面から見ていきます。

X タイムライン 埋め込み

左下に人のアイコンの「Profile」があるのでこちらをクリックします。
以下のような画面になるので、このページのURLをコピーして控えます。

X タイムライン 埋め込み

「Twitter Publish」のサイトで埋め込みコードをつくる

Xヘルプセンターでタイムラインを埋め込む方法が解説されています。
こちらの「Twitter Publish」というサイトを開きます。

シンプルなページが出てくるので、真ん中の入力フォームに先ほどコピーしたURLを貼り付けます。
英語のままだとわかりにくいときは、ブラウザの翻訳機能をご利用ください。

X タイムライン 埋め込み

入力フォームの「→」をクリックか、エンターキーで進みます。
画面が下にスクロールするので、左の表示をクリックします。

X タイムライン 埋め込み

また下に自動でスクロールしてプレビューが下に表示されます。
このままだと大きいのでカスタマイズします。

X タイムライン 埋め込み

リンクをクリックすると以下の表示になるので、「高さ・幅」、「色」をそれぞれ設定します。
本サイトでは、高さ700px、幅400pxで設定しています。

X タイムライン 埋め込み

色は白か黒の表示が選べます。「Light」か「Dark」を選択してください。
その下は言語の設定なので、そのままでOKです。

設定したら、「Update」をクリックします。

X タイムライン 埋め込み

コードが出来上がるので、こちらを「Copy Code」をクリックしてコピーします。

X タイムライン 埋め込み

ここまでが「Twitter Publish」での作業です。
次はワードプレス編集画面を開きます。

ブログトップページに埋め込みコードを設定する

ここまで来たら、あとはトップページへ設定するだけです。
ワードプレスにログインしたら、左メニューの「外観」>「ウィジェット」を選択します。

X タイムライン 埋め込み

ウィジェットの画面左の「利用できるウィジェット」から「テキスト」を選択します。
今回は「サイドバー」へ表示するので、このまま「ウィジェットを追加」をクリックします。

X タイムライン 埋め込み

上に表示されるタイトルは好きな言葉を入力してください。
本サイトでは、「つぶやき」と入れています。

先程のコードをペーストする前に、「テキスト」のタブを選びます

X タイムライン 埋め込み

そして先程のコードをペーストします。

X タイムライン 埋め込み

「保存」をクリックして、完了です。

X タイムライン 埋め込み

トップページへ表示できているか確認してください。

X タイムライン 埋め込み

お疲れ様でした!

まとめ:ブログトップページにXタイムラインを載せる方法

とにかくブログトップページにXタイムラインを載せることだけをまとめました。

無事表示できましたか?

最後までお読みいただきありがとうございました。

コメント