ElementorでSmash BalloonのInstagramフィードを活用する方法(2026年版)
ホーム ブログ 私が「Smash Balloon Instagram Feed for Elementor」をこう活用しています(2026年)

私が「Smash Balloon Instagram Feed for Elementor」をこう活用しています(2026年)

Smash Balloon Instagram Feed for Elementorの使い方

簡単な答え:「Smash Balloon Instagram Feed Proは、Elementorに独自のウィジェットを追加します。プラグイン内でフィードを作成し、Elementorでページを開いて、ウィジェット検索欄に「instagram」と入力し、そのウィジェットをページ上にドラッグ&ドロップして、ドロップダウンメニューからフィードを選択してください。

すでに設定済みのデザインに自然に溶け込みます。フィードはテーマの色を反映し、配置した列の幅に合わせて表示されるため、ページの一部のように自然に馴染みます。

手順1~4はプラグイン内で実行されます。手順5はElementor内で実行されます。以下に両方の手順を示します。

満足のいくページができあがっていますね。たいてい、ここで人々が躊躇してしまうのは、そのせいなのです。

自分で作成したサイトにソーシャルフィードを追加するのは、テンプレートに追加する場合とは感覚が異なります。どのセクションを完成させるのに3回も試行錯誤したか分かっているだけに、その真ん中にサードパーティ製のプラグインを組み込むのは、その努力を台無しにしてしまうような気がしてしまうのです。

この場合はそうではありません。「Instagram Feed Pro」はElementorパネルにウィジェットを追加し、フィードはテーマの色や列の幅を自動的に反映します。ページ上の他の要素を配置するのと同じ方法で配置するだけです。

まずはフィードの作成方法、次に配置方法について順を追って説明し、それがデザインの一部のように見えるか、それともその上にただ置かれたように見えるかを決める2つの設定について解説します。

この記事の中で

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

Elementor用のInstagramフィードを始めたいなら、簡単なオプションがあります:Smash BalloonのInstagram Feed Proです。

市場で最高のInstagramフィードプラグインであり、簡単に美しいInstagramフィードを作成、カスタマイズ、投稿できる。

このプラグインはとてもユーザーフレンドリーなので、コードを一行も触ることなくインスタグラムのフィードを作成することができる。

Smash BalloonはElementorで動作するのでしょうか?

Instagram Feed ProはElementorと完全に互換性があるので、Elementorのビジュアルなドラッグ&ドロップエディターを使ってInstagramのフィードを追加することができます。

何百万人もの人々がInstagram Feed Proを始める理由のトップは以下の通りです:

  • ユーザーフレンドリー: 数回クリックするだけで、インスタグラムのフィードを作成、カスタマイズ、投稿することができます。
  • フィードの種類: このプラグインでは、ハッシュタグフィード、ショッピングフィード、プロフィールフィード、Instagramリールなど、さまざまな 種類のフィードを利用できます。
  • ライブカスタマイザー:魅力的なInstagramフィードを簡単に作成できるよう、変更内容をリアルタイムで確認できるライブカスタマイザーをご利用いただけます。
インスタグラムのフィードのライブプレビュー
  • あなたのブランディングにマッチします:このプラグインは、あなたのウェブサイトの外観を自動的にコピーします。その結果、インスタグラムのフィードはあなたのブランディングに完璧にマッチします。
  • 光速:Smash BalloonのInstagram Feed Proはスピードに最適化されているため、Instagramの写真や動画はすべて超高速で読み込まれます。また、より高速なサイトはSEOの向上にも役立ちます
  • カスタマーサポート:そして一番の利点は?WordPressの専門家チームが、このプラグインをスムーズに使用できるようにサポートします。

これらの機能により、Instagram Feed Proは最高のInstagramフィードプラグインとなった。現在、1,000,000人以上のアクティブユーザーを持ち、5つ星のうち4.9の評価を得ている。

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

ご覧のように、このプラグインがあなたにとって最良の選択肢である理由はたくさんあります。ElementorでInstagramのコンテンツを表示する準備はできましたか?今すぐInstagram Feed Proを始めましょう

それでは、Smash BalloonのInstagram Feed ProをElementorで使う方法を紹介しよう。

Smash Balloon Instagram Feed Pro for Elementorの使い方

この作業は明確に2つに分かれます。ステップ1から4はプラグイン内で実行され、そこでフィードを作成し、その表示方法を決定します。ステップ5はElementor内で実行され、そこでフィードを配置します。

ステップ1:Instagram Feed Proプラグインをインストールして有効化する

最初のステップは、Smash BalloonのInstagram Feed Proを入手することです。その後、あなたのウェブサイトにインストールして有効化します。

その方法がわからない場合は、WordPressプラグインのインストール方法をご覧ください。

これをインストールしても、すでに作成済みのページには何の影響もありません。

これは、パネルに1つのウィジェットを追加する独立したプラグインであるため、テーマファイルを編集する必要はなく、既存のElementorレイアウトに影響を与えることもありません。

ステップ2: Elementor Instagramフィードを作成する

次に、プラグインをInstagramアカウントに接続する必要があります。これを行うには、まず、ダッシュボードからInstagramのフィード " すべてのフィードに移動します。

ここで新規追加 ボタンをクリックする。

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

ここから、Elementorサイトに作成したいInstagramフィードのタイプを選択できます。

あなたは次の中から選ぶことができる:

  • ユーザーのタイムライン: フィードを使って自分のInstagram投稿を表示
  • パブリックハッシュタグ特定のハッシュタグを含むInstagramの投稿を表示する
  • タグ付けされた投稿 あなたのInstagramアカウントにタグ付けされた写真や動画を表示します。

ここで複数のオプションを選択すると、複数のフィードタイプを1つのフィードにまとめることができます。

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

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

上記の「複数のフィードタイプ」オプションは、見落としがちですが、後から追加するのは難しいものです。

自分の投稿とハッシュタグのフィードを、2つのウィジェットではなく1つのウィジェットにまとめて表示したい場合は、後で2つ目のフィードを作成するのではなく、ここで両方を選択してください。

ステップ3:インスタグラムのアカウントに接続する

このステップでは、このフィードをインスタグラムに接続し、写真や動画をサイトに表示できるようにする。

そのためには、ここでソースの追加 ボタンをクリックする。

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

プラグインにより、ポップアップが表示され、「Business Basic」接続と「Business Advanced」接続のどちらかを選択できるようになります。

どう違うのか分からない?簡単なことです:

  • Business Basic:プロフィールに、自動的に更新され、Smash Balloonの標準機能を備えたInstagramフィードを作成できます。
  • ビジネスプロフィール:プロフィールフィードに加え、ハッシュタグフィード、ショッピング機能付きフィード、メンションフィードなど、さらにさまざまな種類のInstagramフィードを作成することができます。

この2つの選択肢からご希望のものを選び、「接続」をクリックしてください

インスタグラムの接続タイプを選択する

その後、プラグインはあなたのInstagramアカウントへの読み取り専用 アクセスを要求します。

アクセスは読み取り専用なので、プラグインは実際に変更を加えることはできず、インスタグラムのデータを読み取るだけです。そのため、Smash Balloonは完全に安全です

続行するには、「許可」をクリックします。

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

最後に「Next」 ボタンをクリックする。

これであなたのInstagramアカウントはプラグインに接続された。

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

この選択は、将来何を作成できるかをひっそりと決定づけます。個人プロフィールには、ご自身の投稿が表示されます。

ハッシュタグフィード、ショッピングフィード、メンションフィードを利用するには、いずれもビジネスプロフィールが必要です。これらの導入を計画している場合は、今すぐビジネスアカウントを連携させてください。

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

インスタグラムのアカウントに接続したら、フィードのカスタマイズを始めましょう。

このプラグインは、すべてのカスタマイズオプションを含むライブフィードエディタを表示します。

左側のオプションを使って、フィードのレイアウト、配色、ヘッダーのスタイル、ボタンなどを設定できます。

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

右側には、インスタグラムのフィードのライブプレビューが表示され、リアルタイムで変化を追跡できる。

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

次に、左側の「フィード・レイアウト」 セクションをクリックする。

レイアウトオプションの 下に、インスタグラムフィード用の4つの異なるレイアウトを見つけることができます:グリッド、カルーセル、メイソンリー ハイライトです。

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

インスタグラムの投稿を行と列のシンプルなグリッドで表示するには、グリッド オプションがあります。一度にたくさんのインスタグラム投稿をフィードに表示するのに最適な方法です。

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

また、Instagramのカルーセルスライダーを表示することで、訪問者があなたのサイトと交流できるようにすることもできる。

そのためには、カルーセル・レイアウトを 選べばいい。

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

写真やビデオをそのままのプロポーションで見せたいですか?それなら、石積みの レイアウトがお役に立ちます。

インスタグラム用石積みレイアウト

また、写真や動画をより見やすくしたい場合は、ハイライト オプションがあります。このレイアウトは、インスタグラムの投稿サイズを4倍アップさせます

インスタグラムのハイライトレイアウト

インスタグラムのフィードレイアウトを選択したら、「保存 」をクリックして次に進む。

上部にある小さなカスタマイズ ボタンをクリックし、メインのカスタマイズオプションに戻ります。

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

ここから、配色 オプションを使ってインスタグラムフィードの色を設定できる。

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

インスタグラム・フィード・プロには、4つの配色オプションがある:

  • テーマから継承:インスタグラムのフィードにウェブサイトの色を使う
  • 明るい:明るい背景に暗いフォントでInstagramのフィードを表示する
  • ダーク:インスタグラムのフィードには、ダークな背景とともにライトなフォントを使用する。
  • カスタム:Instagramフィードのすべての色を手動で選ぶ

好みの配色を選んで「保存」をクリックするだけ。

配色エレメントを選ぶ

」テーマを継承する設定が、Elementorのウェブサイトには最も適しています。そうすることで、Instagramの投稿が、外部から貼り付けられたパネルではなく、ページの一部として自然に溶け込むようになります。

その後、ここにある他のカスタマイズオプションを使って、インスタグラムのフィードの見え方を変えることができる。フィードのサイズ、投稿数、フォント、余白、背景、その他もろもろを設定できる。

最後に、もう一度「保存 」をクリックして変更を確定します。

ステップ5:スマッシュ・バルーンのインスタグラム・フィードをElementorに追加する

最後に、InstagramのフィードをElementorのページに追加します。

まず、ダッシュボードから「ページ」»「新規追加」メニューを開き、新しいWordPressページを作成します。

その新しいページで、Elementorで編集 ボタンをクリックします。

新しいワードプレスページを作成する

WordPressの投稿を使いたい場合は、ダッシュボードの「投稿」→「新規追加 」で代用してください。

そして、Elementorで編集を選択します

ワードプレスの新規投稿を作成する

そうすると、Elementorエディタが開き、左側にすべてのコンテンツウィジェットが表示されます。

画面の右側にはElementorページのライブプレビューがあります。変更を加えると、いつでもここでどのように見えるかを確認できます。

続けるには、左側の検索フィールドを 探し、そこに「instagram」と 記入する。

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

その後、下の検索結果にInstagram Feed ウィジェットが表示されます。

続行するには、ウィジェットをドラッグして 右側にドロップ するだけです。

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

これで、このウィジェットを使ってInstagramフィードの設定を終えることができる。

そのためには、ドロップダウンメニューを使って埋め込みたいインスタグラムのフィードを選択するだけです。

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

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

ウィジェットの設定には、「新しいフィードを作成」リンクと「このフィードを編集」リンクもあります。

どちらも新しいタブで開きますが、これは一見した以上に重要な点です。フィードのデザインを調整しても、読み進めていた箇所を途切れさせることなく、元のページに戻ることができます。

Elementor による各 Instagram フィードのオプションをさらに充実させる

これであなたのElementorページにスマッシュバルーンのインスタグラムフィードができました。どのように見えるか確認したい場合は、ウェブサイトを開いて見てください。

ウィジェットを配置する列によってフィードの幅が決まるため、狭いサイドバーの列に配置したフィードと、同じフィードを全幅で表示した場合では、動作が異なります。

見た目を判断する前に、実際に配置したい列にドラッグして入れてみてください。

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

それで終わりだ!

Smash BalloonのInstagram Feed ProプラグインをElementorで使用する方法はお分かりいただけたと思います。

これを使えば、美しいInstagramのフィードを追加して、訪問者を魅了し、売り上げを伸ばし、Instagramのフォロワーを増やすのはとても簡単だ。

すでに作成したデザインにマッチするInstagramのフィード

テーマの色、列の幅、レイアウト。フィードはページに合わせて調整され、その逆ではありません。

Instagramフィードプロを入手

あなたがデザインしたページにおいて、Instagramのフィードが果たす役割とは

このページを作成したのはあなたです。ここでは、別の画像ブロックにはない、フィードならではの利点について説明します。

ストックフォトの代わりになります。Elementorで作成されたページの多くは、ライブラリから取得された画像で埋め尽くされたセクションを少なくとも1つ含んでおり、それらの画像はどの企業のものでもおかしくないようなものです

あなたのInstagramの投稿は、すべて同じ形とサイズで、実際にあなた自身が投稿したものです。訪問者は、その理由を言葉では説明できなくても、その違いを見分けることができます。

意思決定が行われる場所に配置することができます。フィードは、必ずしもホームページの下部に横一列に表示される必要はありません。商品説明の横のコラムや、サービスセクションの下、あるいはランディングページのサイドバーなどに配置してみましょう。

サイドバーに表示されるInstagramフィードの例

同じコンテンツでも、相手に「はい」と言ってもらいたい内容のすぐ隣に配置すると、より大きな効果を発揮します。そのため、ソーシャルプルーフの配置は、その量よりも重要になる傾向があります。

スライダープラグインを使わずに、ページに動きを与えることができます。セクションが単調に見えないように、アニメーションやカルーセルを追加した経験があるなら、フィードならエフェクトではなく実際のコンテンツを使ってその役割を果たし、さらにページに別のプラグインを読み込む必要もありません。

これにより、訪問者をプロフィールから遠ざけるのではなく、プロフィールへと誘導することができます。表示された内容に好感を持った人は、現在閲覧しているページからそのままあなたをフォローすることができますこれは、通常求められるコンバージョンに比べてハードルが低く、ウェブサイトがInstagramのフォロワーを増やすきっかけとなるのです。単にInstagramからウェブサイトへ誘導するだけでなく、その逆の仕組みも機能するのです。

よくある質問

Smash BalloonのInstagramフィードはElementorで動作しますか?

はい、しかも単なる回避策ではありません。このプラグインは実際のElementorウィジェットとして登録されるため、テキストブロックにショートコードを貼り付ける必要はなく、「見出し」や「画像」の隣にパネル上に表示されます。Divi、Beaver Builder、Thrive Architectでも同様に機能します。

フィードのスタイル設定は、Elementorで行うべきですか、それともプラグインで行うべきですか?

どちらもそうですが、それぞれ担当する範囲が異なります。色、レイアウト、投稿数、ヘッダー、ボタンのデザインなどはすべて、プラグインのカスタマイザーで設定します。幅、余白、フィードがページ上のどこに配置されるかなどは、Elementorの役割です。もし、一方の設定画面内で他方の設定と競合していることに気づいた場合は、おそらく設定する場所を間違えている可能性があります。

1つのウィジェット内で、自分の投稿とハッシュタグのフィードを同時に表示することはできますか?

はい、手順2で設定しておけば可能です。そこで複数のフィードタイプを選択すると、それらが1つのフィードに統合され、Elementorのドロップダウンメニューに1つの選択肢として表示されます。後から設定する場合は、2つ目のフィードを作成し、2つ目のウィジェットを配置する必要があります。

Elementorのテンプレートやテーマを変更した場合、フィードはどうなりますか?

以下にフィードが表示されます。デフォルトでは配色がテーマから継承されるよう設定されているため、サイトの色を変更するとフィードの色も更新されます。代わりに手順4でカスタムカラーを設定した場合は、その設定が固定されるため、フィードの色を合わせるにはカスタマイザーに戻って調整する必要があります。

このウィジェットは、Elementorのテンプレートやポップアップ内でも動作しますか?

はい。他のウィジェットと同様に動作するため、保存済みのテンプレートやヘッダー、フッター、ポップアップなどに配置できます。すべてのコピーは同じフィードを指しているため、プラグインで1か所を編集するだけで、すべてのコピーが一括で更新されます。

今すぐElementor用Smash Balloon Instagramフィードを使い始めましょう

Elementorを使用する場合、ウェブサイトは計画通りに正確に表示されることを望みます。

Smash Balloon Instagram Feed Proは、デザインを崩さずに写真を追加する最良の方法だとわかりました。Elementor内で直接動作するため、新しい技術スキルを習得する必要はありません。

始める方法は以下の通りです:

  • Instagram Feed Proをこちらから入手し、14日間リスクフリーでお試しください。ElementorにSmash BalloonのInstagramフィードを追加する作業を始めましょう。
  • シンプルなエディターでElementorのInstagramフィードの見た目を変更し、ウェブサイトの他の部分とスタイルを統一しましょう。
  • InstagramフィードをElementorページに追加するには、ウィジェットを目的の場所にドラッグするだけです。
  • 新しいInstagram投稿を自動的に表示し、ウェブサイトに常に訪問者が見られる新しいコンテンツを提供します。

ウェブサイトはプロフェッショナルに見えるべきであり、ソーシャルメディアの写真もその一部です。このプラグインを使えば、それを素早く実現できるので、他のことに集中できます。

Instagramマーケティングを始めたいですか?インスタグラムのフォロワーを増やす方法について、役立つガイドをご用意しました。

この記事がお役に立ちましたら、X(Twitter)Facebookでフォローし、ソーシャルメディアマーケティングのコツやテクニックを今後もご期待ください。

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

コメントを追加する

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