Instagram の投稿をウェブサイトに埋め込む方法。中央寄せの方法は CSS で対応する

公開日:
Instagram の投稿をウェブサイトに埋め込む方法。中央寄せの方法は CSS で対応する

Web サイトを見ていると、記事の中にインスタグラムの投稿が埋め込まれているケースがあります。

これは Instagram から提供される「埋め込み」の機能を使って、HTML のコードを取得すれば実現できます。その手順について、わかりやすく解説していきます。

インスタ投稿をウェブサイトに埋め込む方法

  1. ブラウザから Instragram を開く
  2. 埋め込みたい投稿を開く
  3. 右上のアイコンからメニューを開く
  4. 「埋め込み」を選択
  5. キャプション有無を選ぶ
  6. 埋め込み用コードをコピー
  7. 埋め込みたい場所にコードを貼り付ける

ここで紹介する手順は、パソコン・スマホ・タブレット、どの端末でも同じ手順で行えます。ただし Instragram のアプリではなく、ブラウザから実施する必要があります。

まずはブラウザで Instagram を開きます。そしてウェブサイトに埋め込みたい投稿を開きます。

ウェブサイトに埋め込みたいインスタ投稿

投稿の右上にある アイコンからメニューを開きます。パソコンから開く場合は、必ず右側にキャプションが表示されている状態にして実行してください。下の画面と同じように表示されていれば問題ありません。)

開いたインスタ投稿のメニューを開く【パソコンの場合】

スマホやタブレットだと、このような表示になります。

開いたインスタ投稿のメニューを開く【スマホの場合】

表示されたメニューから「埋め込み」を選択。

埋め込み用コードが表示されるので、キャプションの有無を選択して、埋め込みコードをコピーします。キャプションとは画像と共に投稿された文章のこと。埋め込み時に表示させるかどうか、ここで選択できます。

インスタ投稿の埋め込み用コードをコピーする

あとはコピーしたコードを、HTML のソースコードに貼り付けるだけです。

キャプションありの貼り付け例

キャプションなしの貼り付け例

インスタの埋め込みを中央寄せする方法

埋め込んだインスタ投稿は、そのままだと中央寄せになりません。左寄せではなく中央寄せにしたい場合、次のようにソースコードを書き加えて CSS を反映させます。

HTML はクラスを指定した div タグで囲みます。

【HTML】貼付ける時のソースコード
<div class="instagram-post">
(コピーしたソースコード)
</div>

そしてスタイルシートに次のコードを追加します。

【HTML】貼付ける時のソースコード
.instagram-post iframe {
  margin-left: auto!important;
  margin-right: auto!important;
}

インスタ投稿を中央寄せにした結果

埋め込み用ソースコードの前後に div タグを加えて、スタイルシートを反映すると、先ほど左寄せになっていたインスタ投稿もこのように中央寄せになります。

以上、インスタグラムの投稿をウェブサイトに埋め込む方法でした。

この記事をシェアする

このブログの運営者

NJ

元システムエンジニア。個人事業主として独立して Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりしています。