ブログ

ブログにインスタグラムの投稿を表示させるには

instagram

 

Instagramに投稿している写真をブログに載せたい!
ヒカルコ

そんな時は、どうしたらよいのでしょうか?

 

ズバリ!

Instagramの「埋め込み」機能を使います

 

インスタグラムをブログに表示させる方法(WordPress)

①自分のプロフィール画面を表示させる

ブラウザでInstagramを開き、画面右上のアイコンをクリック。

プロフィール画面を表示させる。

 

insta1

 

 

公開アカウントであれば他人の投稿を選択することも可能なので、②からは、「地球の歩き方」さんの公式アカウントを表示させてみます。

②ブログに表示させたい投稿を選択し、【・・・】をクリック。

ブログに表示させたい(埋め込みたい)投稿をクリックし、画面右上のメニューボタン【・・・】をクリック。

【・・・】をクリックすると、下記のポップ画面が表示されますので「埋め込み」を選択する。

insta2

 

 

③ブログに貼り付けるソースをコピー

「埋め込み」を選択すると、「埋め込みコードをコピー」を選択できる画面が表示されるので、「埋め込みコードをコピー」をクリックしてソースをコピーする。

insta3

 

「キャプションを追加」で、投稿文の内容を表示させるかの有無を選択できる。投稿内容を表示させたい場合は、チェックボックスにレ点を入れる。

 

 

④ブログのテキスト画面に貼り付け

ブログのテキストエディターをテキスト画面にする。

埋め込みコードをコピーしたら、テキスト画面に貼り付ける。

insta4

 

プレビューすると、ブログに投稿画面が表示されました。

 

ちょっと画面が大きい気がする・・・
ヒカルコ

 

 

投稿画面のサイズ変更

埋め込みコードをコピーして、ブログに貼り付けた場合、上記のようにInstagramの投稿内容が表示される。

ちょっと大きいので、サイズを小さくしてみます。

 

 

ブログのテキストエディターをテキスト画面にする。

貼り付けたソースの上部にあるmax-width: 540px; min-width:326px を変更する。

insta5

max-widthは、横幅を表し、min-widthは、縦幅を表している。

 

サイズ変更

  • max-width:540px ➡300px
  • min-width:326px ➡400px  

サイズが小さくなりバランスがよくなりました。

 

まとめ

埋め込み機能を使えば、簡単にインスタグラムの投稿をブログへ表示させることができます。

-ブログ