ElementorにSmash Balloon Instagramフィードを追加する方法(2026年版)
ホーム ブログ ElementorにSmash Balloon Instagramフィードを追加する方法(2026年版)

ElementorにSmash Balloon Instagramフィードを追加する方法(2026年版)

スマッシュバルーンのInstagramフィードをElementorに追加する方法

Smash BalloonのInstagramフィードをElementorに追加する方法をお探しですか?

最も人気のあるページビルダーとして、Elementorは自分のサイトに美しいページを作りたい多くの人に選ばれています。

そして、インスタグラムのフィードを追加することは、それらのページを訪問者にとってさらに魅力的なものにする簡単な方法である。

今日は、ElementorにInstagramのフィードを追加する最も簡単な方法をご紹介します。

なぜElementorでInstagramフィードを使うのか?

Elementorは、WordPressサイトのページを作成できるページビルダープラグインです。すべてドラッグ&ドロップエディターで行うので、ページを作るためにコードを一行も触る必要はありません。

しかし、すべてのElementorページをさらに良くしたいのであれば、簡単な方法があります。

TikTokの動画を埋め込むのと同じように、関連するInstagramの投稿をサイトに追加することで、より魅力的なサイトにし、コンバージョンを高め、同時にソーシャルメディアのフォロワーを増やすことができる。

インスタグラムのフィードをサイトに追加することで得られるものは以下の通りだ:

  • インスタグラムでは、実際に商品を楽しんでいる人や宣伝している人の投稿を見せることができる。この社会的証明によって、サイト訪問者に購入を決意させることができる。
  • インスタグラムのフィードを追加することで、サイトにアップロードする手間をかけずに、関連する画像やインスタグラムのリール動画を表示することができます。
  • あなたのサイトにインスタグラムのフィードがあれば、訪問者からより多くのフォロワーを得ることができる。だから、ソーシャルメディア・マーケティングがより簡単になる。
  • 買い物可能なインスタグラムフィードを埋め込むことで、インスタグラムの投稿を販売ページにリンクさせ、インスタグラムフィードから直接購入できるようにすることもできる。

ElementorにInstagramフィードを追加する最も簡単な方法

ベスト・インスタグラム・フィード・プロ・プラグイン

Smash BalloonのInstagram Feed Proを使えば、あなたのElementorサイトにInstagramのフィードを手間なく埋め込むことができます。

ユーザーフレンドリーな設計で、WordPress初心者でも好きなフィードを追加できる。

Smash BalloonはElementorに対応していますか?

個人的には、Instagram Feed ProがElementorと完全に互換性があるので、Elementorのドラッグ&ドロップエディタを使って美しいInstagramフィードを追加できるという点が気に入っている。

使いやすさに加えて、インスタグラム・フィード・プロには他にもたくさんの機能がついている。実際に、いくつかのハイライトを紹介しよう:

  • 超簡単&クイックセットアップ: 複雑なコーディングは必要ありません。
  • 様々なインスタグラムフィードタイプ: Instagram Feed Proを使えば、買い物可能なInstagram投稿からハッシュタグフィード、さらにはInstagramリールの埋め込みまで、様々なタイプのフィードを追加することができます。
  • ブランディングに合わせる:Instagram Feed Proのフィードはすべて、あなたのウェブサイトの既存のデザインと自動的にマッチします。そのため、インスタグラムのフィードはあなたのブランディングに完璧にフィットします。
  • 簡単なカスタマイズ: フィードのサイズ、余白、色、フォント、レイアウトなど、素晴らしいライブフィードエディタを使用して、数回クリックするだけで、フィードをカスタマイズすることもできます。
インスタグラム・フィード・プロ用ライブ・フィード・エディター
  • 光速:あなたのウェブサイトにインスタグラムの写真や動画がたくさんあるにもかかわらず、このプラグインは軽量なので、フィードの読み込みは超高速です。そして、高速なウェブサイトはSEO対策にも効果的です。
  • カスタマーサポートSmash BalloonのInstagram Feed Proには、WordPressの専門家チームが付属しており、フィードの構築をよりスムーズに行うことができます。

WordPressのための最高のInstagramフィードプラグインとして、Instagram Feed Proは、Elementorや、Divi、Thrive Architect、Beever Builderなどの他の人気のあるページビルダーと互換性があります。

プロからのアドバイス:他のウェブサイトビルダーにInstagramのコンテンツを埋め込むことにも興味がありますか?DiviにInstagramのフィードを埋め込む方法をご紹介します。

アクティブユーザー数は100万人を超え、評価は4.9/5つ星と、ユーザーの間でヒットしている。

レビュー・インスタグラム・フィード・プロ・プラグイン

さらに、Instagram Feed Proは、世界最大のブランドのいくつかによって信頼されています。あなたのサイトにInstagramのフィードを追加したいのであれば、Instagram Feed Proは本当に最高の選択肢です。

今日は、Smash BalloonのInstagram Feed Proプラグインをインストールして、Elementorにフィードを追加する方法をご紹介します。

スマッシュバルーンのInstagramフィードをElementorに追加する方法

以下のステップに従うだけで、あなたのElementor WordPressサイトに美しいInstagramフィードをすぐに設置することができます。

始めよう!

ステップ1:Instagram Feed Proのインストールと有効化

まず、こちらからInstagram Feed Proを入手してください。そして、あなたのサイトにインストールして有効化するだけです。

どうやってインストールするのかわからない?WordPressのプラグインをインストールする方法についての便利な記事があります。

ステップ2:新しいインスタグラムフィードを作成する

プラグインをインストールして有効化したら、WordPressのダッシュボードからInstagram Feed " All Feedsにアクセスしてください。

このページで、新規追加 ボタンをクリックします。

インスタグラムフィードプロ

あなたのサイトに作成したいInstagramフィードのタイプを選択することができます。3つのオプションから選ぶことができます:

  • ユーザーのタイムライン: 自分のアカウントからの投稿を表示するInstagramのライブフィードを作成する
  • 公開ハッシュタグインスタグラムのフィードを使用して、特定のハッシュタグが付いた投稿を表示する。
  • タグ付き投稿: あなたのInstagramアカウントがタグ付けされたすべての投稿を埋め込む

おまけに、複数のInstagramフィードを一度に表示することもできる。そうすれば、異なるタイプのコンテンツで1つのフィードを作ることができる。

次に進むには、インスタグラムのフィードタイプを選択し、「次へ」をクリックします。

このチュートリアルでは、ここでユーザーのタイムラインを選ぶことにする。

フィードタイプを選択 instagramフィードプロ

ステップ3:新しいフィードをInstagramに接続する

Instagramのフィードを作成した後、プラグインはInstagramのコンテンツを表示できるようにソースに接続するよう求める。

そのためには、自分のインスタグラム・アカウントをソースとして接続すればいい。

このページでAdd Sourceをクリックし、Instagramアカウントとの接続を開始する。

インスタグラム、フィードにソースを追加

ポップアップが表示され、ビジネスプロフィールか 個人プロフィールを選択できます。

Instagramの個人プロフィールでは、Instagramで通常使用するすべての機能を使用できます。Instagram Feed Proでは、自分のInstagramアカウントからフィードを追加できる。

ビジネス用のインスタグラム・プロフィールがあれば、アナリティクスや連絡ボタンにアクセスでき、ビジネスに役立てることができる。

また、このプラグインを使って、ハッシュタグフィード、Instagram TV(IGTV)ビデオ、ショッパブルフィードなど、あらゆる種類のInstagramフィードを追加することができる。

お好みのオプションを選択し、Instagramでログインをクリックします

このチュートリアルでは個人プロフィールを使用します。

インスタグラムのアカウントタイプを選択するポップアップ

これでInstagram Feed Proは、あなたのアカウントへの読み取り専用 アクセスを要求します。プラグインはInstagramの情報を表示するためにそのアクセス権を使用し、それは全く変更を加えることはできません。

つまり、スマッシュバルーンをウェブサイトに使用しても全く問題ありません。

読み取り専用のアクセス権を与えるには、「許可」をクリックすればいい。

インスタグラムアカウントへのアクセスを許可する フィードを作成する

最後に、「次へ」 ボタンをクリックして、インスタグラムのアカウントをフィードのソースとして確認する。

インスタグラムのフィードのソースとしてアカウントを確認する

ステップ4に進み、インスタグラムのフィードのデザインをカスタマイズしましょう。

ステップ4:インスタグラムのフィードをカスタマイズする

インスタグラム・フィード・プロのライブ・フィード・エディターで、フィードのデザインをカスタマイズできるようになりました。

エディタの左側には、使用できるすべてのカスタマイズオプションが表示されます。フィードレイアウト、カラースキーム、投稿レイアウト、ヘッダーデザインなどを編集できます。

変更を加えるたびに、右側のライブ・プレビューで見た目を確認することができます。

ライブフィードエディタ インスタグラムフィード

インスタグラムのフィードのカスタマイズを始めるには、左側のフィードレイアウトセクションを クリックします。

インスタグラムのカルーセルのレイアウトを編集する

ここから、インスタグラムフィードのレイアウトを4種類から選ぶことができる:グリッド、カルーセル、メイソンリー ハイライト。

フィードレイアウトオプション instagramフィードをelementorに追加する

グリッド オプションを使えば、シンプルな行と列でインスタグラムの投稿をきれいに表示できる。このきれいなレイアウトで、一度に大量の投稿を表示することができます。

個人的には、Elementorインスタグラムのフィードにこのレイアウトを使うのが好きだ。

インスタグラムフィードのグリッドレイアウト

Instagramカルーセルを使えば 、Instagramの投稿をスライダー上に配置してダイナミックに見せることができます。さらに、ページがよりインタラクティブになります。

カルーセルレイアウトでインスタグラムをelementorに追加する

インスタグラムの画像を元の寸法のままにしたいですか?その場合、石積みの レイアウトがあなたのためにそれを行うことができます。

そうすれば、何も切り取ることなくインスタグラムのコンテンツを表示できる。

インスタグラム・ショッピング

また、インスタグラムの投稿をより目立たせたい場合は、投稿サイズを4 倍に拡大するハイライト オプションがある。

このレイアウトは、フィードから特定のインスタグラム投稿を強調したい場合に役立つ。

ハイライト・レイアウト・インスタグラム・フィード

フィードのレイアウトを選んだら、「保存」をクリックします。

インスタグラムフィードのデザインの編集を続けるには、上部にある小さなカスタマイズ ボタンをクリックする。

主なカスタマイズオプションに戻る

左側の配色 オプションをクリックして、Instagramフィードの色を変更する。

配色オプションをクリック

新しいインスタグラムのフィードは、4つの異なるカラースキームから選ぶことができる:

  • テーマからの継承: ウェブサイトのテーマカラーを素早くコピー
  • 明るい:暗い色のフォントとともに明るい背景を表示する。
  • ダーク:背景に濃い色を選び、フォントを薄くする。
  • カスタム:Instagramのフィードのすべての色を手動で選択する
インスタグラム・フィード・プロの配色オプション

配色に満足したら、「保存」 ボタンをクリックします。

それだけではない。このライブフィードエディタを使用して、フィードサイズ、ヘッダスタイル、ボタンデザイン、ライトボックススタイルなどの他のカスタマイズオプションを設定することもできます。

プラグインの簡単なカスタマイズオプションのおかげで、インスタグラムのフィードの見栄えをよりコントロールできる。

最後に「Save 」をクリックして変更を確定し、以下の最終ステップに進みます。

ステップ5:InstagramのフィードをElementorに追加する

最後に、Smash Balloon Instagram FeedをElementorに追加します。

始めるには、ページ " 新規追加に 進み、WordPressエディターで新しいページを開きます。

ここで、上部にある「Elementorで編集 」ボタンをクリックします。

インスタグラムを追加するためにelementorで編集する

WordPressの投稿を使いたい場合は、Posts " Add Newから Elementorで編集をクリックしてください。

この例ではWordPressのページを使用する。

インスタグラムのフィードをワードプレスの投稿に追加する

Elementorエディタが開きます。左側のパネルにElementorのウィジェットが配置されています。

検索フィールドに 「instagram」と 入力すれば、検索結果にInstagram Feedウィジェットが 表示されるはずだ。

インスタグラムフィードウィジェットを検索 elementor

インスタグラム・ウィジェットをドラッグして、ページの右側にドロップするだけ。

インスタグラムのフィード・ウィジェットをページにドラッグする

Instagramフィードウィジェットをページに追加した後、どのフィードを表示するかを選択できる。

ドロップダウンメニューを使って、先ほど作成したInstagramのフィードを選択します。

インスタグラムのフィードを選択する

最後に、Publish ボタンをクリックして変更を保存します。

これでSmash BalloonのInstagramフィードがElementorに追加されました。

あなたのウェブサイトをチェックして、フロントエンドでどのように見えるか見てください。

elementorでのインスタグラムフィードの例

それで終わりだ!

さて、Smash BalloonのInstagramフィードをElementorのページに埋め込む方法を知っているはずです。このプラグインを使えば、簡単なステップでInstagramフィードを作成、カスタマイズ、埋め込むことができます。

ウェブサイトに美しいインスタグラムのフィードを掲載することで、訪問者を惹きつけ、簡単にフォロワーを増やすことができる。

あなたのElementorサイトにInstagramのコンテンツを追加したいですか?今すぐInstagram Feed Proを手に入れよう

インスタグラムの存在感を高める方法をお探しですか?インスタグラムのフォロワーを増やす方法に関する私たちの投稿をチェックしてみませんか?

また、Elementorに表示したい他のソーシャルメディアフィードがある場合は、ElementorウェブサイトにGoogleレビューを追加する方法についてのチュートリアルをご覧ください。

この記事がお役に立ったなら、Twitterや Facebookをフォローしてください。

著者アバター
サジャン・シャルマ シニアライター
WordPress、ソーシャルメディアマーケティング、オンラインビジネスについて10年以上執筆。専門分野はインフルエンサーマーケティング、コンテンツキュレーション、デジタルマーケティング戦略など多岐にわたる。

コメント4

  1. マヌエル・エスコバル 3年前

    こんにちは、サラ、

    ご連絡ありがとうございます!この場合、プラグインのバージョンが最新かどうか、背景色にHex形式を使用しているかどうかを確認することをお勧めします。背景を透明にしたい場合は、この例のように#FFFFFF00を使用することができます。

    問題が解決しない場合は、弊社ウェブサイトのフォームを使用して、システム情報を含むサポートリクエストをお送りください。

    この情報を入手するには、このページの手順に従ってください。

    お役に立てれば幸いです!何か質問があれば言ってください。

    ありがとう! ᙂ。

    返信
  2. テッサ・ニコライ 3年前

    こんにちは、

    Instagramフィード・ウィジェットが見つかりません。私はastraテーマをelementorで使用しています。また、新しいフレックスボックスを使っています。

    助けてくれますか?テッサ

    返信
    1. マヌエル・エスコバル 3年前

      こんにちは、テッサ、

      ご連絡ありがとうございます!プラグインの最新バージョンがインストールされていることを確認することをお勧めします。そうすれば、こちらの例のように、ElementorにInstagramウィジェットが表示されるはずです。このウィジェットが表示されない場合は、Instagram Feed > All Feedsに移動して取得できるInstagram Shortcodeを埋め込むシンプルなテキストウィジェットを使用することができます。フィードの数は、作成したフィードの数によって異なる可能性があります。 

      それでもうまくいかない場合は、システム情報を明記の上、こちらのフォームからサポートリクエストをお送りください。

      この情報を入手するには、このページの手順に従ってください。

      システム情報には、他のウェブサイト情報や接続のためのアクセストークンが含まれているため、ここに掲載することはお勧めできません。

      ありがとう! ᙂ。

      返信
  3. マヌエル・エスコバル 3年前

    やあ、ケン、

    弊社ウェブサイトのフォームを使用して、システム情報を含むサポートリクエストをお送りください。

    この情報を入手するには、このページの手順に従ってください。

    システム情報には、他のウェブサイト情報や接続のためのアクセストークンが含まれているため、ここに掲載することはお勧めできません。

    ありがとう! ᙂ。

    返信

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。