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

レスポンシブなX（Twitter）の埋め込みを表示して、ウェブサイト訪問者の関心を引きたいですか？

ウェブサイトを訪れるすべてのユーザーの関心を引きたいなら、レスポンシブなX（Twitter）の投稿を埋め込むのが簡単な解決策です。

しかし、レスポンシブなX（Twitter）の埋め込みコードを自分で追加するのは、特にコードの扱いに慣れていない人にとっては、ややこしいかもしれません。

この記事では、レスポンシブなX（Twitter）フィードをウェブサイトに埋め込む手順について解説します。

しかし、その前に、X（Twitter）の埋め込みをレスポンシブにするさまざまな方法を見てみましょう。

あるいは、「レスポンシブなX（Twitter）フィードをサイトに埋め込む方法」もご参照ください。

サイトにレスポンシブなX（Twitter）の埋め込みを追加する方法

X（Twitter）のコンテンツを埋め込み、かつXの投稿がレスポンシブに対応するようにするには、次の2つの方法があります：

• 手動の方法： 埋め込みコードを生成し、コードを微調整してレスポンシブにし、サイトに追加する。
• 自動方式：モバイル対応のX（Twitter）フィードを自動的に表示できるソーシャルメディアプラグインを使用します。

手動で行う場合は、ブラウザでX（Twitter）の公式埋め込みコード生成ツール「publish.twitter.com」を開く必要があります。

HTML埋め込みコードを生成したら、もう一度ウェブサイトを開き、埋め込みコードを挿入します。

残念ながら、手動で設定している場合、Xへの投稿が毎回正しく表示されない可能性があります。この問題を解決するには、以下のCSSコードを追加してください。

.twitter-timeline {
    width: 100vw !important;
}

また、iFrame を使って X（Twitter）の投稿をカスタマイズしたい場合は、さらに手動でコードを編集するか、開発者に依頼する必要があります。

ご覧の通り、この方法を使うと、レスポンシブなX（Twitter）コンテンツを埋め込むのは時間がかかり、複雑になる可能性があります。 

iFrameとX（Twitter）の埋め込み、どちらが優れているか？

X（Twitter）のコンテンツを表示するためにiFrameを使用する人もいますが、実際には、それがウェブサイトにさまざまな悪影響を及ぼす可能性があります。

iFrameはデフォルトではレスポンシブではないので、モバイルフレンドリーにするためには手動でコードを編集する必要があります。

そのため、モバイル端末からアクセスしているユーザーは、Xの投稿を正しく表示できない可能性があります。

さらに、グーグルなどの検索エンジンはiFrame内のコンテンツを読むことができないため、SEO上も不利になる可能性がある。

朗報なのは、自動機能を使えば、レスポンシブなX（Twitter）の投稿を簡単に埋め込むことができるということです。X（Twitter）のAPIを介して接続し、サイト上にXの投稿を集約できるWordPressプラグインを利用できます。

この方法を以下に見てみよう。

レスポンシブなX（Twitter）コンテンツを埋め込む最も簡単な方法

X（Twitter）のコンテンツを埋め込む最も簡単な方法をお探しなら、「X (Twitter) Feed Pro」のようなプラグインを試してみるのが最善の選択肢です。

「X (Twitter) Feed Pro」を使えば、HTMLやJavaScript、カスタムCSS、その他のコードを一切使用する必要なく、レスポンシブ対応のX (Twitter) フィードを簡単に作成・カスタマイズし、ウェブサイトに埋め込むことができます。

簡単な3ステップの手順に従うだけで、見栄えの良いX（Twitter）フィードをすぐに作成できます。X（Twitter）のタイムライン、ハッシュタグ、検索結果、ホームタイムラインなどを埋め込むことができます。

X（Twitter）Feed Proは、ウェブサイトのデザインを自動的に反映するため、導入したその日から、X（Twitter）上のコンテンツがブランドのイメージに完璧にマッチします。

その後、インポートしたい既成のテンプレートを選択することで、X（Twitter）のフィードをさらにカスタマイズすることができます。

さらにカスタマイズを行うために、このプラグインにはビジュアルエディタが搭載されており、レイアウト、色、X投稿の数、ヘッダースタイル、「もっと見る」ボタンなど、さまざまな設定を行うことができます。

さらに、ライブプレビューを使用して、すべての変更を追跡することができます。

このプラグインには、X（Twitter）のコンテンツのコピーを保存するスマートなキャッシュシステムが搭載されています。そのため、サイトは毎回Xの投稿を一から読み込む代わりに、保存されたコピーを訪問者に表示することができます。

その結果、サイトの読み込みが格段に速くなります。また、サイトの読み込みが速くなることで、SEO対策も強化されます。

X (Twitter) Feed Pro はバックアップを保存するため、X (Twitter) 自体が一時的に利用できなくなっても、埋め込まれた X の投稿は引き続き閲覧可能です。

総じて言えば、これは現時点で最高のX（Twitter）フィードプラグインであり、レスポンシブなX（Twitter）埋め込み機能を求める方には最適なソリューションです。

レスポンシブなX（Twitter）フィードを埋め込む準備はできましたか？今すぐ「X（Twitter）Feed Pro」を手に入れましょう！

それでは、このプラグインを使って、レスポンシブなX（Twitter）の埋め込みをサイトに追加する方法を見ていきましょう。

レスポンシブなX（Twitter）フィードをサイトに埋め込む方法

レスポンシブなX（Twitter）の埋め込みを追加するには、以下の手順に従ってください：

ステップ 1: X (Twitter) Feed Pro をインストールして有効にする

まずは、こちらから「X (Twitter) Feed Pro」プラグインを入手してください。プラグインを入手したら、WordPressサイトにインストールして有効化し、次の手順に進んでください。

詳しくは、WordPressプラグインのインストール方法に関するユーザーフレンドリーなガイドをご覧ください。

それが終わったら、ステップ2に進んで、レスポンシブなX（Twitter）フィードを作成できます。

ステップ2：X（ツイッター）フィードの作成

このプラグインには簡単なガイド付き手順が用意されているため、わずか数回のクリックで新しいX（Twitter）フィードを作成できます。

まず、管理ダッシュボードを開き、「X（Twitter）フィード」 ＞「すべてのフィード」メニュー に移動してから、上部にある「新規追加」ボタンを クリックしてください。

次に、プラグインは、ウェブサイトに掲載したいX（Twitter）の埋め込みの種類を選択するよう求めます。選択できるオプションは6つあり、それぞれ異なるソースからのXの投稿が表示されます。

• ユーザーのタイムライン： 埋め込みたいX（Twitter）の投稿があるX（Twitter）のプロフィールを最大X件選択してください
• ハッシュタグ：特定のハッシュタグを選択し、そのハッシュタグが付いたXの投稿を埋め込む
• ホームのタイムライン： アカウントのホームタイムラインからX件の投稿を埋め込む
• 検索：検索キーワードを選択し、X（Twitter）の検索結果をサイトに埋め込む
• メンション：貴社のX（Twitter）アカウントをメンションしている投稿をX件表示する
• リスト：選択した X（Twitter）リストのコンテンツを表示する

異なるフィードの種類を1つの（Twitter）フィードにまとめたい場合は、複数のオプションを選択することも可能です。

続行するには、X（Twitter）のフィードタイプを選択し、「次へ」ボタンをクリックしてください。

この例では、ハッシュタグフィードを使用して、レスポンシブなX（Twitter）の埋め込みを表示します。

X（Twitter）のフィードが作成されたので、ステップ3でX（Twitter）アカウントと連携させることができます。

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

サイト上でレスポンシブな埋め込みを表示するために、このプラグインはX（Twitter）アカウントに接続するようになりました。

それにはまず、接続 ボタンをクリックする。

次に、「X (Twitter) Feed Pro」が、アカウントへの読み取り専用アクセス権 を要求します。このプラグインは、このアクセス権を利用してX (Twitter) の情報を閲覧することはできますが、アカウントに変更を加えることはできません。

したがって、「X (Twitter) Feed Pro」プラグインは完全に安全です。

そのためには、Authorize app ボタンをクリックするだけです。

その操作を行うと、「X (Twitter) Feed Pro」があなたのウェブサイトを開き、X (Twitter) フィードのソースを追加できるようになります。

ソースとは、サイトに埋め込みたいX（Twitter）のプロフィール、ハッシュタグ、検索キーワード、リストなどを指します。

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

このレスポンシブなX（Twitter）フィードでは、「KEEB_PD」というハッシュタグをソースとして使用しています。

フィードをX（Twitter）に連携し、ソースを追加したところで、次はカスタマイズを行いましょう。

ステップ 4：レスポンシブ X（Twitter）埋め込みをカスタマイズする

レスポンシブなXの投稿がサイト上でどのように表示されるかを素早く設定するために、あらかじめデザインされたテンプレートをインポートすることができます。

以下は、選択可能なフィードテンプレートです：

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

お好みのフィードテンプレートを選んだら、「次へ」をクリックします。

これで、ライブフィードエディタを使ってX（Twitter）のフィードをカスタマイズする準備が整いました。左側には、フィードのレイアウト、ヘッダーのデザイン、ライトボックス設定、配色などを変更するためのカスタマイズオプションが用意されています。

また、フィード設定にあるモデレーションオプションを使用して、サイトに表示されるXの投稿を厳選することもできます。

このプラグインは右側にシンプルなリアルタイムのプレビューがあり、変更点を把握するのに役立ちます。

まずは、ウェブサイト上のXの投稿のレイアウトを変更してみてください。

そのためには、左側にある「Feed Layout」 オプションを探し、それをクリックする。

次に、「X (Twitter) Feed Pro」では、「リスト」、「カルーセル」、「メイソンリー」の3つのレイアウトが表示され、その中から選択することができます。

以下、見ていこう：

X（Twitter）の公式サイトと同様の形式でX件の投稿を表示したい場合は、「リスト表示 」を選択してください。

さらに、この方法なら、X（Twitter）のフィードがウェブページ上ではっきりと表示されるようになります。

X（Twitter）の埋め込みを列単位で表示したい場合は、メイソンリーレイアウトを使用できます。

このレイアウトを使えば、Xの投稿を一度にたくさん表示できます。

カルーセルレイアウト を選択すると、X（Twitter）の投稿をインタラクティブなスライドショー形式で表示できます。

訪問者は、あなたのサイトに関与する別の方法を持つことになります。

フィードレイアウトを選択したら、「保存」 ボタンをクリックします。

次に、「カスタマイズ」ボタンを クリックして、X（Twitter）のフィードの表示設定をさらにカスタマイズしてください。

今回、レスポンシブ対応のX（Twitter）フィードの色をお選びいただけます。

まず、配色 オプションをクリックする。

「X (Twitter) Feed Pro」には、4種類のカラースキームが用意されており、これらを試すことができます：

• テーマから継承： WordPressテーマの色をXの投稿に反映させる
• 明るい：暗い文字色に明るい背景
• Dark：暗い背景と明るい色のフォント
• カスタム： すべての色を手動で選択

続行するには、配色を選択し、[保存]をクリックします。

X（Twitter）の埋め込みをさらにカスタマイズしたいですか？残りのボタンを使用して、ヘッダーのスタイル、ボタンのデザイン、Xの投稿数、フィードのサイズなどを設定できます。

最後に、「保存」をクリックして、X（Twitter）フィードの新しいデザインを確定してください。

手順5では、このプラグインを使って、ついにこのX（Twitter）フィードをWordPressサイトに埋め込むことができます。

ステップ5：ウェブサイトにResponsive X（Twitter）の埋め込みコードを追加する

「X (Twitter) Feed Pro」を利用すれば、X (Twitter) のコンテンツをウェブサイトに埋め込む方法は2つあります：

• WebページにレスポンシブなX（Twitter）の埋め込みを追加する
• ウェブサイトのサイドバーまたはフッターに、レスポンシブ対応のX（Twitter）埋め込みを追加する

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

このプラグインはとても使いやすいので、ライブフィードエディタから直接、X（Twitter）のフィードを埋め込むことができます。

まず、エディター上部の埋め込み ボタンをクリックします。

その操作を行うと、プラグインからポップアップが表示され、X（Twitter）のフィードを埋め込むさまざまな方法が示されます。

ポップアップのページに 追加をクリックして続行します。

フィードを表示するWordPressページを選択できます。

ポップアップでページを選択した後、Addボタンをクリックして次に進みます。

そうすると、プラグインがWordPressのエディタでページを開き、フィードを埋め込むことができます。

次に、プラスアイコン（＋）をクリックして新しいコンテンツブロックを追加します。

上部の検索バーを使って「Twitterフィード」ブロックを探し、その下の「X（Twitter）フィード 」ブロックをクリックしてください。

すると、WordPressのエディタにX（Twitter）の埋め込みが表示されます。

最後に、「更新」ボタンをクリックすると、X（Twitter）のフィードがオンラインになります。

ウェブページを開けば、レスポンシブ対応のX（Twitter）埋め込みがどのように表示されるかを確認できます。

ご覧の通り、「X (Twitter) Feed Pro」を使えば、モバイル対応のX（Twitter）コンテンツをウェブサイトに表示するのがとても簡単になります。

それでは、X（Twitter）のフィードを埋め込む次の方法を見ていきましょう。

ウェブサイトのサイドバーまたはフッターに「Responsive X（Twitter）」の埋め込みを追加する

次の方法は、X（Twitter）ウィジェットを使用して、ウェブサイトのサイドバーやフッター部分にレスポンシブ対応のXの投稿を表示することです。

前回の方法と同様、今回もライブエディターを使うことができる。

ライブフィードエディタでフィードを再度開きたい場合は、まずWordPressのダッシュボードから「X（Twitter）フィード」»「すべてのフィード」メニュー を開いてください。

それが終わったら、埋め込みたいX（Twitter）のフィードをクリックしてください。

ご覧の通り、ライブフィードエディタでX（Twitter）のフィードを再度開くのはとても簡単です。

そこから、上部にある埋め込みボタンをクリックして始めてください。

ポップアップを使用して、レスポンシブなX（Twitter）の投稿を表示する新しいX（Twitter）ウィジェットを作成できるようになりました。

次に、ポップアップ上の「ウィジェットに追加」 ボタンをクリックします。

これで、プラグインによってサイトのウィジェットページが開き、そこでX（Twitter）フィードのウィジェットを追加できるようになります。

そのページにアクセスしたら、Xへの投稿の掲載場所を選択できます。

サイドバーにレスポンシブなX（Twitter）の埋め込みを表示したい場合は、「サイドバー」パネル をクリックしてください。

または、「フッター」をクリックすると、ウェブサイトのフッターにX件の投稿が表示されるようになります。

この例では、WordPressのサイドバーを使います。

新しいウィジェットを追加するには、下部にあるプラスアイコン（+）を クリックします。

その操作が完了したら、表示される選択肢から「X（Twitter）フィード」ウィジェットを選択して、次の手順に進んでください。

「更新」ボタンをクリックすると、X（Twitter）フィードの埋め込みを完了できます。

これだけで、サイドバーやフッターにレスポンシブ対応のX（Twitter）埋め込みフィードを表示できるようになります。

そうだ！

ご覧の通り、「X (Twitter) Feed Pro」を使えば、レスポンシブなX（Twitter）の埋め込みをサイトに追加するのはとても簡単です。

これで、訪問者の関心を維持したり、X（Twitter）のフォロワーを増やしたり、コンバージョン率を向上させたりするなど、さまざまな効果を得るために、関連性の高いXの投稿を表示できるようになりました。

レスポンシブ対応のX（Twitter）フィードを埋め込みたいですか？こちらをクリックして、サイトに「X（Twitter）Feed Pro」を導入しましょう！

このサイトをご覧の際は、X（Twitter）で稼ぐための最良の方法を紹介したこのリストもぜひチェックしてみてください。

この情報が役に立ったなら、Facebook とX（Twitter）でフォローしてみませんか？さらに役立つソーシャルメディアのコツやテクニックをお届けします。