🌟 やり方②：自動で最新の投稿を表示させたい（ちょっとだけ手間あり）

2025.04.18

これは Instagramフィードを表示させる専用のプラグイン を使います。

▶ 手順（プラグイン使用）

① プラグインを入れる

  1. WordPressの管理画面へ
  2. 左メニューから「プラグイン」→「新規追加」
  3. 検索ボックスに「Smash Balloon Instagram Feed」と入力
  4. 「Instagram Feed by Smash Balloon」をインストール → 有効化！

② Instagramとつなげる

  1. 「Instagram Feed」というメニューが追加されているのでクリック
  2. 「Connect an Instagram Account」で自分のアカウントと接続
    （画面の指示にしたがえばOK！）

③ 表示の設定をする

  1. 表示したい投稿のデザイン（グリッドなど）を選びます
  2. ショートコード（例： ）が表示されるのでコピー！

④ 固定ページに貼る

  1. WordPressの固定ページを開く
  2. 「ショートコードブロック」を追加
  3. コピーした を貼るだけでOK！

✨ できあがり！

  • 自分のInstagramの最新投稿が自動で表示されるようになります
  • 見た目のデザインも設定で変えられますよ🙆

🔍 注意点

  • Instagramが「非公開」設定だと表示できません
  • ブラウザでInstagramを開いて、ログイン状態で「投稿を共有」してください

不安だったら一緒に設定のお手伝いもできるので、言ってくださいね😊💕

あなた:
画像をアップロードしました

これはどれを選べばよいですか？

ChatGPT:

いいですね！その画面は「Smash Balloon Instagram Feed」でInstagramのアカウントをつなげる設定画面です😊
では、以下のように選びましょう：

✅ どちらを選べばいい？

**👈左側の「Business Basic」**を選べばOKです！

✔ Business Basicのポイント：

  • Instagramの ビジネスアカウント or クリエイターアカウントが必要
  • Facebookページは不要（←これが楽✨）
  • 自分の投稿（写真・動画）を表示する目的ならこれで十分！

❗注意：もし今使ってるInstagramが「個人アカウント」のままなら…

Instagramアプリの中で、以下のように切り替えてください：

  1. Instagramを開く
  2. プロフィール画面の右上メニューから「設定」へ
  3. 「アカウント」→「プロアカウントに切り替える」
  4. 「ビジネス」または「クリエイター」を選ぶ
  5. 連携したくない場合は Facebook連携はスキップでもOK！

次にやること

✅「Business Basic」が選ばれている状態で、
👉青い「Connect」ボタンをクリックして進めてください！

接続が終わったら、ショートコード

を使って固定ページに表示できますよ😊
何かうまくいかないことがあればスクショ送ってもらえればサポートします！

あなた:
画像をアップロードしました

これはなんでしょう？

ChatGPT:

これは Smash Balloon（Instagram Feedプラグイン）からのセキュリティ確認画面 です🔐

🔎内容の意味は？

「https://r-h.jp に、Instagramの情報へのアクセスを許可します。これはあなたのドメイン（自分のサイト）ですか？」
と聞かれています。

✅何をすればいいの？

表示されている「https://r-h.jp」が**あなたのサイト（WordPressで使っているドメイン）であれば**、
👉 「Yes, it is my domain」 をクリックすればOKです！

❗もし違うドメインが出てきたら？

  • 自分のサイトじゃない場合 → 「No, this is not my domain」を選んでやり直します。
  • その場合、WordPressのURL設定やプラグインの設定を確認する必要があります。

💡この確認はなぜあるの？

Instagramはセキュリティが厳しいので、**「このドメインとInstagramをつなぐのは本当に正しいか？」**というチェックをしているんです。

もし https://r-h.jp があなたのサイトなら、自信を持って
👉 「Yes, it is my domain」 を押してください😊

あなた:

別のインスタのアカウントとつながってしまいましたが、ログインしてないアカウントとつなげるにはどうしたらよいですか？

ChatGPT:

インスタで「ログインしていないアカウント（別のアカウント）」と Smash Balloon をつなぐには、下記の手順で一度InstagramとFacebookのログイン状態をリセットし、接続し直す必要があります。

🔁 接続アカウントを切り替える手順（Smash Balloon）

✅ ① 現在の接続を一旦解除する

  1. WordPress管理画面 → Instagram Feed（Smash Balloon）→ 設定（Settings） に移動
  2. 現在つながっているInstagramアカウントの「Disconnect（切断）」ボタンをクリック

✅ ② FacebookとInstagramからログアウトする

1. パソコンのブラウザで以下を行います：

2. ブラウザの「シークレットモード」や「プライベートブラウズ」で開くと確実です

（ログイン状態がリセットされていて安心です）

✅ ③ 接続したいInstagramアカウントでログインし直す

  1. Instagramに接続したいアカウントでログインします
  2. Smash Balloon の設定画面に戻って「新しいアカウントを接続」
    • 「Business Basic」または「Business Advanced」を選び
    • 表示されたログイン画面で接続したいInstagramアカウントの情報を入力

✨補足

  • Instagramを ビジネスアカウント or クリエイターアカウント にしておくと、より多くの情報を表示できます。
  • 複数アカウントの切り替えは、ブラウザで誰でログインしているかがカギです。

必要なら一緒に確認しながら進めるので、いつでも言ってくださいね😊

あなた:
画像をアップロードしました

繋がりました。この画面はどうしたらよいですか？

ChatGPT:

接続おめでとうございます！🎉
この画面は「Instagramの表示方法」や「機能」の設定ステップです。特にこだわりがなければ、そのまま進めてOKです。

✅ この画面の意味とおすすめ設定

🌟 上の部分（基本機能）

項目名説明おすすめ設定
Instagram ユーザーフィードInstagramの投稿を表示✅ ONのままでOK
ダウンタイムの防止表示エラー時のバックアップ表示✅ ON推奨
画像の最適化ページ表示を高速化✅ ON推奨
ソーシャルフィードコレクションFacebook・YouTubeなども表示可能❌オフでもOK（Instagramだけなら）
カスタマーレビュープラグインGoogle/Yelpのレビューを表示❌レビューを使わないならオフでOK

🔒 下の部分（Pro機能）※有料のみ

  • ハッシュタグフィード
  • タグ付けされたフィード
  • Lightbox（写真拡大ポップアップ）

👉 無料プランではこれらは使えないので、そのままで大丈夫です（オフのままでOK）。

✅ 進み方

右下の青いボタン【Next】をクリックして次へ進んでください！

このあとのステップで「表示デザインのカスタマイズ」や「ショートコードの取得（ページに貼り付けるコード）」ができます 😊

次の画面に進んだらスクショを送ってくれたら、続きも一緒に進めますよ✨

あなた:
画像をアップロードしました
ChatGPT:

この画面は GDPR（ヨーロッパの個人情報保護ルール）に対応するためのプラグイン「WPConsent」 をインストールするかどうかを聞かれています。

✅ どうすればいい？

もしあなたのサイトが：

  • 主に 日本のユーザー向け のサイトで、
  • ヨーロッパの法律（GDPR）に 特に対応の必要がない 場合、

👉 そのままスキップして大丈夫です。

🔘 対応方法は2つ：

① GDPRプラグインを使わない場合（おすすめ）

  • 右下の【Install Selected Plugins】のトグルをOFFにする
  • そのまま【Next】をクリック

② GDPR対応したい場合

  • トグルがONのまま → 【Install Selected Plugins】をクリック
  • 自動で「WPConsent」プラグインがインストールされます

💡日本国内での使用がメインであれば、GDPRプラグインは無くても問題ありません。

次に進んで「埋め込みコード（ショートコード）」を取得する画面に行けますので、そこまで進んでみてくださいね 😊
またその画面が出たら教えてくれたら、貼り方を一緒に進めます✨

あなた:
画像をアップロードしました
ChatGPT:

この画面は、Smash Balloon の初期設定がすべて完了したという確認画面です✨
ここから先は、有料版へのアップグレードを勧める案内ですが、無料のままでも使えます！

✅ やるべきことはここ！

👉 一番下の
「Complete Setup Without Upgrading」
（アップグレードせずにセットアップを完了する）をクリックすればOKです。

✅ 次のステップ（Instagramの投稿を表示する方法）

  1. WordPressの管理画面で
    「Instagram Feed」→「All Feeds（すべてのフィード）」 を開く
  2. 作成済みのフィードが表示されているので、
    [Embed] ボタンをクリック
  3. 表示される ショートコード をコピー
  4. 固定ページや投稿ページに貼り付けて保存！

これでInstagram投稿の埋め込み完了です📸✨

必要なら「ブロックエディター（Gutenberg）」で「ショートコードブロック」に貼っても使えます😊
進めてみて、つまずいたところがあれば気軽に聞いてくださいね❗

2/2

あなた:
画像をアップロードしました
画像をアップロードしました

細かい設定方法を教えてください

ChatGPT:

ありがとうございます！😊
Smash Balloon Instagram Feed の細かい設定について、画像の画面に基づいて、以下のように解説していきますね。Instagramの投稿を固定ページなどにきれいに表示するためのカスタマイズ手順です。

🔧 ①「カスタマイズ」タブ：見た目を調整

【📐 フィードレイアウト】

ここで「何列で表示するか」などを決められます。

  • レイアウトタイプ：グリッド、カルーセルなどから選べます（Lite版は「グリッド」のみ）
  • 列数（Columns）：
    • PC：4列
    • タブレット：3列
    • スマホ：2列 が見やすいです
  • 投稿間のスペース（Gutter）：5〜10px程度がおすすめ

【🎨 カラースキーム】

全体の色合いを調整します。

  • ライト／ダークモードなどを選択可能。
  • テーマに合わせて「ライト（白背景）」がおすすめ。

【🧾 ヘッダー】

Instagramプロフィール情報の表示設定です。

  • 表示／非表示切り替え可能。
  • 店舗情報や世界観が伝わるので「表示する」のがおすすめ！

【🖼 投稿】

投稿そのものの表示に関する設定です。

  • キャプション表示：ONにすると写真の下に説明文が表示されます
  • いいね数・コメント数：非表示にすることも可能です（Lite版は制限あり）

【🔘もっと読み込むボタン】

「Load More」ボタンの見た目を調整します。

  • ボタンのテキスト変更：「さらに表示する」などにできます
  • ボタンの色やスタイル：無料版では変更できる範囲は少ないですが、CSSで調整可能です

【👣 フォローボタン】

Instagramへ誘導する「Follow on Instagram」ボタン。

  • ボタンの表示／非表示選べます
  • リンク先：Instagramのアカウントページへジャンプします

⚙️ ②「設定」タブ：表示内容の制御

【📤 ソース】

どのInstagramアカウントの投稿を表示するかを設定。

【🔎 フィルターと承認】

投稿にフィルター（特定の文字やハッシュタグを含む投稿のみ表示）をかけたいときに使用します。（Pro機能）

【⬆️ ソート】

新しい順、古い順など並び順を変更できます。

💾 保存＆埋め込み方法

  1. 画面右上の赤い「保存（Save）」ボタンをクリック
  2. 画面下に表示されるショートコード（例： ）をコピー
  3. WordPressの固定ページや投稿ページのブロックエディタにペースト（ショートコードブロックを使います）

💡補足：CSSで見た目を調整したい場合

ボタンの色や文字サイズを調整したい場合は、追加CSSにて細かく調整可能です。 必要であれば、デザインに合わせたCSSもご用意できます！

引き続き、埋め込みたい場所や希望のデザイン（ボタンの色やサイズ感など）を教えてもらえれば、コードまで含めてお手伝いしますよ😊

あなた:

フィードの高さ　パディング　はなんでしょう？

ChatGPT:

いい質問です😊
「フィードの高さ」と「パディング」は、Instagram投稿の見た目の余白や高さに関係する設定です。以下のように考えると分かりやすいです👇

🧱 フィードの高さ（Height）

これは、Instagramフィード全体の高さのことで、スクロールする量や見える範囲をコントロールします。

  • 例えば「600px」にすると、その高さの中に投稿が表示されます。
  • 高さを指定しない場合（空欄や「auto」）、投稿が縦にどんどん並ぶ自然なレイアウトになります。
  • ✅ 通常は 「未設定（auto）」でOKです。スマホでも崩れにくいです。

📏 パディング（Padding）

これは、Instagramフィードの周囲（内側）の余白を指します。

  • フィードの「上下左右」にスペースをあけたいときに使います。
  • 例：「20px」と書くと、全体のまわりに20ピクセルの内側余白ができます。
  • ✅ おすすめ設定： cssコピーする編集するpadding: 10px 15px; 上下10px、左右15pxの余白で、きれいに見えます。

💡まとめると…

設定名意味おすすめ設定
フィードの高さ表示されるエリアの縦の長さ未設定（auto）
パディングフィード全体の内側の余白padding: 10px 15px;

もし、フィードがページにピッタリ貼り付きすぎている感じがする場合は、パディングを調整するとスッキリ整って見えますよ✨

希望の見た目に合わせてCSSの例も出せますので、必要あればお気軽にどうぞ〜！

あなた:
画像をアップロードしました

こうなっています

ChatGPT:

画像ありがとうございます！🙏
設定は以下のようになっていますね👇

✅ 現在の設定内容

項目設定値意味
フィードの高さ（空欄）高さは**自動（auto）**で、投稿に応じて伸縮します。
Aspect RatioSquare (1:1)投稿画像の比率は「正方形」。インスタらしい見た目です。
パディング5pxフィードの上下左右の内側に5pxの余白があります。

✨ おすすめアドバイス

  • フィードの高さ：このまま「空欄（自動）」でOK！スマホでも見やすいです。
  • パディング：
    • 今のままでもOKですが、もう少し余白が欲しいなら： コピーする編集する10（やや余裕あり）～15px（ふんわりした感じ）がおすすめです。 例：15 と入力 → 画像がギュウギュウにならず、きれいに見えます😊

💡カスタマイズ例（もっとスッキリ見せたいとき）

  • 画像をちょっとだけ小さめに詰めて一覧性を高めたい場合は：
    • Aspect Ratio: Square (1:1) のまま
    • Padding: 5px（現状のまま）
    • Columns（列数）があれば スマホで2列、PCで4列以上に設定もおすすめ！

何か「こうしたい！」というイメージがあれば、それに合わせて具体的な数値やCSSもご提案できますよー🙌

ホーム
🧪🧪色々な設定方法などのページへのリンク