特定のインスタ記事を読み込む

特定のインスタ記事を読み込む（2026/02/01）

以下のリンク先のInstagramアカウントはデモ用に作ったものです。

注意点

• 自動で記事が読み込まれていく方法ではありません。Instagramから任意の記事をhtmlに書き込んで表示させる方法です。
• 読み込みは少なめ（３件など）にして下さい。多いとページの表示が重くなります。
• ローカルでは表示できないので、プレビューはサーバー上で行って下さい。

手順

1. インスタ記事を読み込む為の外枠のhtmlとcssをテンプレにコピペします。
   
   ↓ htmlコード。
   <div class="igGrid"> ここにインスタ記事のコードをコピペします。 </div> ↓ cssコード。
   /*インスタ埋め込み設定 ---------------------------------------------------------------------------*/ .igGrid{ display:grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; } .igGrid .instagram-media{ width: 100% !important; max-width: 100% !important; margin: 0 !important; min-width: 0 !important; }
2. Instagramページを開き、サイトに組み込みたい記事をクリック。
   
3. 「…」をクリック。
   
4. 「埋め込み」をクリック。
   
5. 「埋め込みコードをコピー」をクリック。
   
6. 最初のステップで準備していたhtml側の「ここにインスタ記事のコードをコピペします」の部分にインスタのコードを貼り付けます。
   この画面だと右側をカットしているのですが、かなりのコード量です。なので、冒頭に書いたように、記事数は少なめを推奨します。
   
7. 他の記事も読み込みたい場合は、引き続き作業しますが、コピペで最後に入っているscriptの行は、インスタ記事の読み込みの一番最後に１つだけ入っていればOKです。