ウェブサイトにレスポンシブX（Twitter）ウィジェットを埋め込む方法

Twitterの埋め込みコードを自分のサイトに貼り付けました。デスクトップでは見栄えが素晴らしいです。そこで、スマホで確認してみると……

今やめちゃくちゃな状態だ。フィードが画面からはみ出したり、幅500pxの細長いボックスに収まって、その周囲に余白ができてしまったりする。そこで、手っ取り早くCSSで修正してみる。1日はうまくいくが、またすぐに壊れてしまう。

そんな経験があるなら、あなただけではありません。これはTwitter（現在はX）の埋め込み機能に関する最もよくある問題の一つですが、ネット上にある「解決策」のほとんどは、2012年に考案された不安定なハックであり、何年も前に機能しなくなっています。

開発者フォーラムをくまなく調べ、CSSによる回避策を試してみて、なぜそれらが失敗し続けるのかを突き止めました。結局のところ、Twitter独自のJavaScriptが邪魔をしていることがわかりました。この戦いをすべて回避できる、もっと簡単な方法があります。

そこで、Twitterフィードをレスポンシブにする方法を2つご紹介します。まずは、手動でCSSを編集する方法です。次に、プラグインを使った方法です。これは導入するだけでレスポンシブに対応しており、コードを記述する必要がなく、Xが次にアップデートされても表示が崩れることはありません。

この記事の中で

• 【クイック回答】レスポンシブなTwitterフィードを埋め込む方法
  • CSSの幅変更が反映されないのはなぜ？
• X（Twitter）の埋め込みをレスポンシブにする最も手っ取り早い方法
• サイトにレスポンシブX（Twitter）ウィジェットを埋め込む方法（簡単な方法）
  • ステップ1: Twitter Feed Proプラグインをインストールする
  • ステップ 2：新しいウィジェットを作成する
  • ステップ3：X（ツイッター）アカウントに接続する
  • ステップ4：X（Twitter）の埋め込みをカスタマイズする
  • ステップ5：WordPressにResponsive X（Twitter）の埋め込みコードを追加する
  • WebページにX/Twitterの埋め込みを追加する
  • ウェブサイトのサイドバーやフッターにX/Twitterの埋め込みを追加する

【クイック回答】レスポンシブなTwitterフィードを埋め込む方法

お時間がない方へ。チュートリアルの全文を読む前に、答えをこちらにご紹介します。

Twitterの埋め込みをレスポンシブにするには2つの方法があります。1つ目は手動での方法です。Twitterのiframeをコンテナで囲み、それを width: 100%、そしてCSSやメディアクエリを使ってそのインラインスタイルを上書きする。

これは機能しますが、適用やメンテナンスにかなりの時間がかかります。さらに、Xが埋め込みコードを更新すると、動作しなくなる傾向があります。

2つ目の方法はプラグインを使うことです。このプラグインはフィードをテーマ独自のマークアップでレンダリングするため、デフォルトでレスポンシブに対応しています。コードもメディアクエリも不要で、オーバーライドの競合も発生しません。

プログラミングが苦手な人にとっては、プラグインが最適です。私がおすすめするのは「Twitter Feed Pro」で、これを使えばコーディングの必要がなく、インストールしたその日からレスポンシブ対応の埋め込み表示が可能です。

どちらのアプローチでも、最終的にはレスポンシブなフィードが実現しますが、その違いは、かかる時間と、どれだけのメンテナンスが必要になるかという点にあります。

両者を比較すると、次のようになります。

	手動でのCSS設定	ツイッター・フィード・プロ
コーディングが必要	はい	なし
X回のアップデートを経ても動作する	いいえ	はい
準備を始めましょう	30分以上	約5分

CSSの幅を変更しても反映されないのはなぜ？

幅を100%に設定して、保存し、ページを再読み込みしました。何も変わりません。では、何がその設定を上書きし続けているのでしょうか？

Twitter独自のJavaScriptです。ページの読み込み後にインラインスタイルを再適用するため、そのたびにCSSがリセットされてしまいます。

ここで多くの人がつまずく点があります。この埋め込みコンテンツは、実際にはあなたのものではありません。これは「iframe」と呼ばれる、Twitterのサーバーへの小さな窓のようなもので、その中身をあなたが制御することはできないのです。

X（Twitter）の埋め込みをレスポンシブにする最も手っ取り早い方法

最適な方法をお探しなら、「Twitter Feed Pro」プラグインを利用すれば、こうした問題をすべて回避できます。

WordPress向けのNo.1 Twitterフィードプラグインを使えば、わずか数回のクリックでX/Twitterのコンテンツを作成、カスタマイズ、埋め込むことができます。

埋め込みコンテンツはすべて自動的にレスポンシブ対応となるため、スマートフォン、タブレット、デスクトップのいずれで閲覧しても、適切に表示されます。

手動での方法とは異なり、Twitter Feed ProもiFrameを貼り付けることはありません。投稿を取得し、実際にウェブサイトに適切に埋め込みます。

これにより、状況は次のように変わります：

• デフォルトではフレキシブルな仕様になっています。フィードはテーマのマークアップに基づいて構築されているため、500pxの固定ボックスに収まるのではなく、レイアウトに合わせて柔軟に調整されます。
• オーバーライドの競合は発生しません。iframeがないということは、TwitterのJavaScriptがスタイルをリセットするためにアクセスしてくることがないということです。
• 高さの不具合はありません。 サイズを推測するためのiframeがないため 、フィードの高さは常にそのコンテンツの高さと同じになります。

さらに、X/Twitterの埋め込みコンテンツのデザインを完全に自由にカスタマイズできます。あらかじめデザインされたテンプレートをインポートして、手早く簡単にカスタマイズすることも可能です。

ライブフィードエディタを使えば、埋め込みコンテンツを細かくデザインできます。HTMLやカスタムCSS、その他のコードは一切必要ありません。

また、あなたと同じようなユーザーも大勢います。Smash Balloonのプラグインは、175万以上のアクティブなウェブサイトで利用されており、5つ星評価のうち4.9を獲得しています。

レスポンシブなX（Twitter）コンテンツを埋め込む準備はできましたか？「Twitter Feed Pro」はこちらから入手してください。

それでは、このプラグインを使ってX（Twitter）ウィジェットをレスポンシブ対応にする最も簡単な方法を見ていきましょう。

サイトにレスポンシブX（Twitter）ウィジェットを埋め込む方法（簡単な方法）

以下の手順に従えば、ウェブサイトにモバイル対応の埋め込みコンテンツのフィードを表示させることができます。

始めよう！

ステップ1: Twitter Feed Proプラグインをインストールする

まずはこちらからTwitter Feed Proをダウンロードしてください。プラグインファイルを入手したら、コンピューターにインストールして有効化してください。

WordPressのプラグインをインストールする方法については、初心者向けのチュートリアルをご覧ください。

ステップ 2：新しいウィジェットを作成する

このプラグインには3ステップのガイド機能があるため、レスポンシブな埋め込みコンテンツを表示する新しいウィジェットを簡単に作成できます。

まず、管理画面のダッシュボードからTwitter Feed " All Feeds メニューを開き、Add Newボタンをクリックします。

次に、埋め込みたいTwitterウィジェットの種類を選択できます。ここでは4つの選択肢があります：

• ユーザーのタイムライン：Twitterアカウントを選択し、そこにツイートを埋め込む
• ハッシュタグ： 選択したハッシュタグでTwitterの埋め込みを表示する
• 検索検索語を選択し、一致するツイートを埋め込む
• リスト： Twitterのリストを選択し、そこからすべてのツイートを埋め込む

必要なウィジェットタイプを選択したら、Nextボタンをクリックしてください。

この例では、ハッシュタグ・ウィジェット・タイプを 選択します。

ステップ3：X（ツイッター）アカウントに接続する

Xアカウントを連携すると、ウィジェットがサイト上でレスポンシブな埋め込みコンテンツの表示を開始できるようになります。

始める準備はできましたか？まず、ポップアップの接続 ボタンをクリックしてください。

そうすると、お使いのウェブサイトからブラウザ上でwww.x.comへリダイレクトされます。ここで、プラグインにアカウントへの読み取り専用アクセス権を 付与することができます。

Smash Balloonは完全に安全であるため、Twitter Feed Proはあなたの情報を閲覧することはできますが、このアクセス権限ではいかなる変更も行うことはできません。

続行するには、こちらのAuthorize app ボタンをクリックしてください。

それをクリックすると、もう一度ワードプレスのウェブサイトに戻る。

ここでは、埋め込みのソースを選択できます。ウィジェットの種類に応じて、X（Twitter）のユーザー名、ハッシュタグ、検索キーワードなどが選択可能です。

とりあえず、ポップアップに"KEEB_PD "というハッシュタグを入力し、そのハッシュタグが付いたツイートを全て表示させてみます。

続行するには、ソースを入力し、「Next」をクリックします。

これで、ウィジェットの新しいソースが追加されました。今後、新しいX（Twitter）ウィジェットを作成する際は、ワンクリックでこのソースを再利用できます。

ステップ4：X（Twitter）の埋め込みをカスタマイズする

Twitter Feed Proの素晴らしい点は、このプラグインが埋め込みコンテンツを自動的にレスポンシブ対応にし、ウェブサイトのデザインを反映してくれることです。

その上、ウィジェットのためにインポートできる事前構築テンプレートのコレクションもある：

• デフォルト
• 石工カード
• シンプルなカルーセル
• シンプルなカード
• ショーケース・カルーセル
• 最新ツイート
• ウィジェット

あとは使いたいテンプレートを選んで「Next」をクリックするだけ。

テンプレートをインポートすると、Twitter Feed Proがライブフィードエディタを開き、そこでモバイル対応の埋め込みコンテンツを詳細にカスタマイズすることができます。

左側には、フィードのレイアウト、カラースキーム、ヘッダー、ロードモアボタンなどを変更するオプションがあります。

さらに、右側のライブフィードプレビューを使えば、リアルタイムですべての変更を追跡することができます。そのため、カスタマイズはユーザーフレンドリーで、迅速かつ正確です。

埋め込みコンテンツのデザインを始めるには、まず左側の「フィードレイアウト」オプションをクリックしてください。

その後、あなたのウェブサイトに表示されるツイートのレイアウトを選択することができます。実際には、3つの異なるレイアウトから選択することができます：

• リスト
• 石工
• カルーセル

以下、これらのレイアウトについて詳しく見ていこう。

ウェブサイト上でX（Twitter）の埋め込みを目立たせたい場合は、リストレイアウト を使用するとよいでしょう。

このレイアウトでは、ツイートを1つのウィジェット内に表示します。動画の埋め込みにも最適なオプションです。

次に、埋め込みツイートをたくさんの列で表示できるメイソンレイアウトが ある。

その結果、一度に大量の異なるツイートを表示することで、ウェブサイト訪問者を惹きつけることができる。

ウェブサイトをもっとインタラクティブにしたい？

カルーセルレイアウト を選択するだけで、X（Twitter）の埋め込みコンテンツを使ったスライドショー形式のカルーセルを表示できます。

レイアウトを選択したら、「保存」をクリックして変更を保存できます。

X（Twitter）の埋め込みをさらにカスタマイズしたい場合は、「カスタマイズ」ボタンをクリックしてください。

次に、プラグインのライブフィードエディタを使って、埋め込みコンテンツの色を変更することができます。

左の配色 オプションをクリックするだけです。

これで、好みの配色を選択するだけで、フィードのすべての色を一度に変更できる。

以下は、あなたが選べる配色です：

• テーマからの継承： WordPressテーマの色を自動的にコピーします。
• 明るい：明るい背景と暗い文字色を選択
• ダーク：暗い背景を表示し、代わりに適切なライトを表示する。
• カスタム： ウィジェットのすべての色を手動で選択

配色を選択したら、もう一度「保存」をクリックします。

これで、プラグインのその他のカスタマイズオプションを使って、ツイートボックスのスタイル、ヘッダー、「もっと見る」ボタン、フィードのサイズなどを自由にカスタマイズできるようになります。

ご覧の通り、このプラグインを使えば、X（Twitter）のフィードを簡単にカスタマイズして埋め込むことができます。CSSやHTMLは一切必要ありません！

最後に、「Save」をクリックして変更を保存してから、最後のステップに進みます。

ステップ5：WordPressにResponsive X（Twitter）の埋め込みコードを追加する

このプラグインは埋め込みコンテンツを自動的にレスポンシブ対応にしてくれるため、X（Twitter）ウィジェットをそのまま埋め込むことができます。

Twitter Feed Pro では、レスポンシブウィジェットを埋め込む方法として、以下の 2 つの方法から選択できます：

• ウェブページにX/Twitterの埋め込みを追加する
• ウェブサイトのサイドバーやフッターにX/Twitterの埋め込みを追加する

以下、この2つの方法を見てみよう。

WebページにX/Twitterの埋め込みを追加する

ウェブサイトにレスポンシブウィジェットを追加する準備はできましたか？

まず、右上の埋め込み ボタンをクリックします。

そこをクリックすると、このウィジェットの埋め込みオプションが表示されます。WordPressのページ、サイドバー、またはフッターに埋め込むことができます。

今度は、「ページに追加 」オプションをクリックします。

これで、ウェブサイト上のすべてのWordPressページのリストが表示されます。

続行するには、レスポンシブなX/Twitterウィジェットを追加したいページをクリックし、「追加」をクリックしてください。

Twitter Feed ProはWordPressエディターでこのページにリダイレクトします。

ここで、プラス（+）アイコンをクリックして、新しいコンテンツブロックを追加することができます。

次に、上部の検索バーに「twitter feed」と入力し、その下の「Twitter Feed」ブロックをクリックします。

これで、プラグインが自動的にX/Twitterウィジェットをページに追加します。

新しいウィジェットを確認するには、上部の更新ボタンをクリックしてください。

ご覧の通り、X/Twitterの埋め込みをレスポンシブ対応にしてサイトに追加するのはとても簡単です。さあ、ウェブページを開いて、Twitterの埋め込みがどのように表示されるか確認してみましょう。

ウェブサイトのサイドバーやフッターにX/Twitterの埋め込みを追加する

ライブフィードエディタから、X/Twitterのコンテンツをウェブサイトのウィジェット設置可能エリアに追加することもできます。

エディターがまだ開いていない場合は、まずダッシュボードからTwitterフィード " すべてのフィードメニューを開きます。

ここで、埋め込みたいX/Twitterウィジェットをクリックしてください。

そうすれば、ウィジェットがライブフィードエディタで開きます。

先ほどと同じように、「Embed」をクリックして次に進むことができる。

すると、もう一度埋め込みオプションのポップアップが表示されます。

ウィジェットに追加を クリックして続けることができます。

Twitter Feed Proは、既存のウィジェットを管理したり、新しいウィジェットを追加したりできる、ウェブサイトのウィジェットページにリダイレクトします。

ここでは、ウィジェットを表示する場所として「サイドバー」または 「フッター」のいずれかを選択できます。

この例ではフッターを使用する。

最後に、下部にあるプラスアイコン（+）を クリックし、Twitterフィードウィジェットを 選択します。

「更新」ボタンを クリックすると、新しいX/Twitterウィジェットがウェブサイトに反映されます。

そうすれば、ウェブサイトを訪れた人は誰でも、サイトのフッターに表示されるレスポンシブな埋め込みコンテンツを確認できるようになります：

これで完成だ！

ほんの数ステップの簡単な操作で、レスポンシブ対応のX（Twitter）埋め込みフィードを作成し、訪問者の関心を高め、コンバージョンを向上させ、ソーシャルメディアのフォロワー数を増やすことができます。

Twitter Feed Proを使えば、あらゆる画面サイズで完璧に表示される美しいウィジェットを、コードを1行も書くことなく簡単に表示できます。

X（Twitter）の埋め込みをレスポンシブ対応にしたいですか？こちらから、ウェブサイト用の「Twitter Feed Pro」を入手してください。

売上を上げる簡単な方法として、WordPressにGoogleレビューウィジェットを埋め込む方法をご紹介しています。

もしこの記事が気に入っていただけたなら、ぜひX（Twitter）やFacebookで私たちをフォローして、その他のソーシャルメディアマーケティングのチュートリアルもチェックしてみてください。