WordPressでInstagramのフィードを横向きに表示したいですか？
洗練されたInstagramの水平フィードは、あなたのサイトのデザインを向上させ、訪問者があなたのInstagramのフォロワーやファンになるように、連絡を取り合うように誘う！
この記事では、いくつかの簡単なステップで、WordPressでInstagramのフィードを水平に表示する方法を紹介します。
目次はこちら：
- Instagram Feedプラグインをインストールする
- インスタグラムのフィードを作成する
- インスタグラムのアカウントに接続する
- 横送りレイアウトを選択する
- フィードのデザインをカスタマイズする
- WordPressでフィードを公開する
Instagramの横長フィードを使ってビジネスを成長させる準備はできていますか？さあ、飛び込もう。
なぜWordPressでInstagramの横並びフィードを追加するのか？
インスタグラムの横長フィードは、サイト上の単なる美的要素ではありません。適切な方法で使用することで、売上を伸ばし、ビジネスを成長させるための優れた戦術的ツールとなる。
また、インスタグラムの写真を一か所に表示しながら、ユーザーが自分のペースでコンテンツをスクロールできるようにするのもいい方法だ。
インスタグラムの横長フィードは、さまざまな使い方ができる：
- 水平フィードは、WordPressでInstagramのハッシュタグフィードを表示するのに役立ちます。例えば、アバウトページのブランド写真や、トピックに関連するハッシュタグが付いたブログ投稿写真など。
- 適切なプラグインを使用すれば、Instagramの水平フィードをWordPressに追加して、ウェブサイトのSEOを強化することもできる。
- 水平フィードはEコマースサイトで使用されるカルーセルに似ているため、インスタグラムでショッピング体験を作り出すために使用することができる。
- さらに、ユーザー生成コンテンツによるインスタグラムのフィードには、社会的証明もある。そのため、サイト訪問者にあなたから購入するよう説得するために使うことができる。
WordPressでInstagramのフィードを横向きに表示する方法
WordPressでInstagramの横長フィードを表示する最も簡単な方法は、Instagram Feed ProのようなWordPressプラグインを使うことだ。
それは、インスタグラムがデフォルトの埋め込み方法で水平方向の効果を得るための簡単なオプションを提供していないからだ。
Instagramの投稿をプラグインなしでWordPressに埋め込む場合、単一の投稿しか挿入できない。
しかし、Instagram Feed ProのようなWordPressプラグインを使えば、水平カルーセルフィードを含む複数のレイアウトオプションで、投稿の全フィードを埋め込むことができる。
このチュートリアルでは、必要なデザインとレイアウトを得るために、このInstagramフィードプラグインを使用する。
Smash BalloonのInstagram Feed Proは、WordPress用のInstagramフィードプラグインの中で最も高い評価を受けている。1,000,000人以上のアクティブユーザーから 4.9/5つ星の評価を得ていることが、このプラグインの品質の高さを物語っている。
使いやすいインターフェイスで、わずか数クリックで、コーディング不要のインスタグラム・コンテンツを思い通りに仕上げることができる。
さらに、フィードのデザインを完全にカスタマイズし、ハッシュタグフィード、フォトフィード、ショッパブルフィード、インスタグラムリールなどを表示するためにコンテンツをフィルタリングすることができる。
最高なのは？
アカウントをプラグインに接続すると、自動的にInstagram APIと通信するので、技術に詳しくない人でも簡単にInstagramの横長フィードを表示することができる。
インスタグラム・フィード・プロは、初心者にやさしく、高速で、信頼できる-それが、世界最大級のブランドから信頼されている理由です：
ステップ1：Smash BalloonによるInstagram Feedプラグインをインストールする
Instagramを横向きに表示するには、まずInstagram Feed Proを入手し、プラグインをコンピュータにダウンロードすることから始めることができる。
それができたら、プラグインをアップロードし、WordPressウェブサイトにインストールしてください。プラグインをインストールする際に少し手助けが必要な場合は、WordPressプラグインをインストールするための便利なガイドをご覧ください。
ステップ2：横長のインスタグラムフィードを作成する
次のステップは、プラグインを使ってインスタグラムのフィードを作成することだ。
それを簡単に行うには、ダッシュボードのInstagram Feed メニューに行き、Add Newをクリックする。
次に、どのタイプのInstagramフィードをウェブサイトに掲載するかを選択できます。ご覧のように、3つのオプションから選ぶことができます：
- ユーザーのタイムライン： Instagramの横のフィードに自分の投稿を表示する
- 公開ハッシュタグ： 選択した公開ハッシュタグを持つInstagramの投稿を表示します。
- タグ付けされた投稿 フィードを使用して、あなたのInstagramアカウントに言及した投稿を表示します。
さらに、ここで1つ以上のオプションを選択して、異なるインスタグラムのフィードタイプを1つのフィードにまとめることができる。
インスタグラムのフィードの種類を選んだら、「次へ」をクリックする。
ステップ3：インスタグラムのアカウントに接続する
次のステップでは、数クリックで新しいフィードをインスタグラムのアカウントに接続できる。
まず、ソースの追加 ボタンをクリックします。
その後、プラグインが個人 アカウントとビジネス アカウントのどちらを接続するかを尋ねてくる。
プラグインに含まれるフィードタイプの中には、特定のハッシュタグでフィルタリングされたフィード、インスタグラムストーリーの表示、オンラインストアにリンクする「ショッピングフィード」の作成など、ビジネスアカウントが必要なものもある。
インスタグラムのアカウントをビジネスプロフィールに変換する方法を学ぶのに助けが必要な場合は、この記事をご覧ください。
続行するには、Instagramのアカウントの種類を選択し、Instagramでログインをクリックします。
このチュートリアルでは、個人 アカウントを使用します。
その後、プラグインはInstagramを開くので、Instagram Feed Proに読み取り専用アクセス権を与えることができる。
このアクセスにより、プラグインはインスタグラムの情報を表示し、インスタグラムのフィードに写真や動画を表示することができる。
その一方で、実際に変更を加えることはできないので、使用してもまったく問題ない。
続行するには、ポップアップの「許可」 ボタンをクリックしてください。
読み取り専用アクセス権を与えた後、プラグインはあなたのWordPressサイトにあなたを戻すので、アカウントの接続を完了することができます。
次へ」 ボタンをクリックしてください。
ステップ4：横カルーセルのレイアウトを選択する
Instagramの横長フィードのデザインに興味がありますか？素晴らしい！Instagram Feed Proは、あなたが選択できる多くのカスタマイズオプションを持つライブフィードエディタを持っています。
左側のパネルでは、フィードのレイアウト、カラースキーム、ヘッダーデザイン、投稿スタイル、背景などを変更することができます。
あなたの変更を追跡するために、右側にあなたのInstagramフィードのリアルタイムプレビューを見ることができます。
次のステップでは、画面左のフィードレイアウトオプションをクリックします。
ここでは、グリッド、カルーセル、メイソンリー、ハイライトの4つのオプションから選択できる、インスタグラムフィードのレイアウトオプションを見つけることができます。
これらのレイアウトはそれぞれ異なる視覚効果を生み出す。
そして、WordPressでInstagramのフィードを横向きに表示したいので、Carouselオプションを選択しよう。
このオプションは、あなたの投稿を水平方向にスクロールするスライドショーのカルーセルでフィードを表示します。
カルーセル・レイアウトをクリックすると、デザインを微調整するための設定がいくつか表示されます。
ディスプレイ設定をもう少し詳しく見てみよう：
- 列： 横送りの行数を1行または2行から選択します。
- ループタイプ： 巻き戻し」または「無限ループ」のいずれかを選択します。無限ループでは、訪問者がフィード内のすべての写真を循環させることができます。一方、巻き戻しは設定した枚数の写真を循環させます。
- インターバル時間： 各写真サイクル間の時間を指定できます。
- ナビゲーション矢印を表示： フィードを前後に移動するための矢印を追加できます。
- ページネーションを表示します： スライドショーの下に、フィード内の写真の枚数を示すドットアイコンが表示されます。
- 自動再生を有効にする： カルーセル内のインスタグラム投稿を自動的に再生します。
これらのオプションでは、フィードのカラム数とインスタグラム画像の数を選択し、パディングをピクセル単位で設定できる。
インスタグラムをウェブサイトに横向きに埋め込むと、これらの設定がどのように見えるかの例です。
1行を選択し、フィードのページネーションとナビゲーション矢印を有効にしました。
フィードのレイアウトオプションを選択したら、「保存」 ボタンをクリックします。
このように、インスタグラムのフィードで横型カルーセルレイアウトを簡単に有効にすることができる。
ステップ5：横型インスタグラムフィードのデザインをカスタマイズする
横長のインスタグラムフィードの残りの部分をカスタマイズするには、上部にあるカスタマイズ ボタンをクリックする。
ここから、配色 オプションをクリックして、フィードの色を設定することができます。
カラーオプションに関しては、Instagram Feed Proには4つの異なるカラースキームが用意されており、その中から選ぶことができる：
- テーマからの継承：ウェブサイトのテーマと同じ色を使いたい場合
- ライトフィードの背景を明るくし、フォントの色を濃くします。
- Dark：代わりに暗い背景と明るい色のフォントを表示できます。
- カスタム：フィードのすべての色を手動で選択できます。
配色を選んだら、「保存 」をクリックして変更を確定します。
そして、このライブフィードエディターで、投稿デザイン、ヘッダーレイアウト、ボタンスタイル、フィードサイズなどを編集することができます。
設定が完了したら、ページ上部の「保存」 ボタンを忘れずにクリックしてください。
ステップ6：WordPressで横長のInstagramフィードを公開する
Instagram Feed Proプラグインは、WordPressでInstagramの水平フィードを表示するためのいくつかの方法を提供します。
さまざまな方法がある：
- WordPressのページに水平フィードを追加する
- Instagramのフィードウィジェットを使って、WordPressのサイドバーやフッターにフィードを表示しましょう。
それぞれの方法を以下に紹介しよう：
WordPressのページにInstagramの横型フィードを追加する
インスタグラムのフィードをページに追加するには、まず上部にある埋め込み ボタンをクリックします。
このポップアップが開き、インスタグラムの横向きフィードの場所を設定できる。
続行するには、ポップアップの「ページに 追加」オプションをクリックします。
その後、ポップアップでWordPressページのリストが表示されるので、オプションからページを選択する。
そして、追加 ボタンをクリックして、そのページにフィードを埋め込みます。
これでWordPressのエディターでそのページが開き、横長のInstagramフィードを埋め込むことができる。
そのためには、プラス（+）アイコンをクリックして、新しいWordPressコンテンツブロックを追加します。
検索バーに"Instagram "と入力し、Instagram Feedブロックをクリックしてページに追加する。
WordPressはフィードのプレビューを生成するので、公開をクリックする前に変更を加えることができます。
これで訪問者は、あなたのウェブサイト上で見事な横長のインスタグラムフィードをライブで見ることができる。
ご覧の通り、コーディングは一切必要なく、数クリックで横長のInstagramフィードを埋め込むことができる。
WordPressのサイドバーやフッターにInstagramの横型フィードを追加する
始めるには、WordPressのダッシュボードからInstagramのフィード " すべてのフィードメニューに向かいます。
次に、先ほど作成したInstagramの横長のフィードをクリックする。
これにより、ライブフィードエディターで再びフィードが開きます。続けるには、上部の埋め込み ボタンをもう一度クリックしてください。
そのポップアップから、Add to a Widget ボタンをクリックして、サイドバーやフッターにInstagramフィードの埋め込みを開始する。
ウィジェットを 追加、削除、管理することができます。
インスタグラムのフィードをサイドバーに追加したいですか？こちらのサイドバーパネルを クリックしてください。
代わりに、フッターパネルを クリックし、WordPressのフッターに横長のInstagramフィードを埋め込むことができます。
このチュートリアルではフッターを選びます。
プラス（+）アイコ ンをクリックして新しいウィジェットを追加し、ここのオプションからInstagramフィードウィジェットを 選択します。
最後に、更新 ボタンをクリックして、この新しいWordPressウィジェットを確認する。
これで、ウェブサイトのフロントに移動すると、Instagramのフィードがサイドバーに水平に表示されます。
そうだ！
この記事が、WordPressウェブサイトでInstagramのフィードを横並びに表示する方法を簡単に学ぶのにお役に立てば幸いです。
あとは、あなたのサイトに1つ埋め込むだけで、視聴者の関心を引き、彼らを忠実なファンや潜在顧客に変えることができる。
Instagramの横長フィードをサイトに表示したいですか？ここからInstagram Feed Proを始めましょう。
インスタグラムの存在感を高めたいなら、インスタグラムの購読者を増やす方法について、このガイドをチェックしてみよう。
Elementorをお持ちですか？ほんの数クリックであなたのサイトにElementorのInstagramフィードを追加する方法をご紹介します。
また、Facebookや Twitterをフォローして、ソーシャルネットワークでビジネスを成功させる方法に関する最新記事を入手することもお忘れなく。
