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

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

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

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

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

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

この記事の中で

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

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

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

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

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

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

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

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

	手動でのCSS設定	X（Twitter）フィード・プロ
コーディングが必要	はい	なし
X（Twitter）のアップデートを乗り切る	いいえ	はい
準備を始めましょう	30分以上	約5分

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

始めよう！

ステップ1：X（Twitter）Feed Proプラグインをインストールする

まずは、こちらから「X (Twitter) Feed Pro」を入手してください。プラグインファイルを入手したら、お使いのコンピュータにインストールして有効化してください。

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

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

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

まず、管理ダッシュボードから「X（Twitter）フィード」»「すべてのフィード」メニュー を開き、「新規追加」ボタンをクリックします。

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

• ユーザーのタイムライン：X（Twitter）アカウントを選択し、そのアカウントの投稿を埋め込む
• ハッシュタグ： 選択したハッシュタグを含む「Display X（Twitter）」の埋め込みを表示する
• 検索：検索語句を選択し、一致するXの投稿を埋め込みます
• リスト： X（Twitter）のリストを選択し 、そのリスト内のすべてのX投稿を埋め込む

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

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

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

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

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

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

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

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

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

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

とりあえず、ポップアップにハッシュタグ「KEEB_PD」を入力し、そのハッシュタグが付いたすべてのXの投稿を表示します。

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

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

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

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

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

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

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

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

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

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

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

その後、ウェブサイトに表示されるXの投稿のレイアウトを選択できます。具体的には、3種類のレイアウトから選ぶことができます：

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

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

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

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

次に、埋め込んだXの投稿を複数の列で表示できるマージンレイアウト があります。

その結果、一度に数多くのさまざまなXの投稿を表示することで、ウェブサイトの訪問者の関心を引きつけることができます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次に、レスポンシブなX（Twitter）ウィジェットを追加したいページをクリックし、「追加」をクリックしてください。

X (Twitter) Feed Pro を使用すると、WordPress エディタ内でこのページにリダイレクトされるようになりました。

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

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

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

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

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

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

ライブフィードエディタから、X（Twitter）のコンテンツをウェブサイトのウィジェット配置可能な領域にも追加できます。

エディタがまだ開いていない場合は、まずダッシュボードから「X（Twitter）フィード」»「すべてのフィード」メニューを開いてください。

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

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

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

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

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

X (Twitter) Feed Pro を使用すると、ウェブサイトの「ウィジェット」ページにリダイレクトされます。このページでは、既存のウィジェットを管理したり、新しいウィジェットを追加したりすることができます。

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

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

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

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

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

これで完成だ！

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

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

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

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

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