Instagramに投稿している写真をブログに載せたい！
ヒカルコ
そんな時は、どうしたらよいのでしょうか？
ズバリ！
Instagramの「埋め込み」機能を使います
インスタグラムをブログに表示させる方法(WordPress）
①自分のプロフィール画面を表示させる
ブラウザでInstagramを開き、画面右上のアイコンをクリック。
プロフィール画面を表示させる。
公開アカウントであれば他人の投稿を選択することも可能なので、②からは、「地球の歩き方」さんの公式アカウントを表示させてみます。
②ブログに表示させたい投稿を選択し、【・・・】をクリック。
ブログに表示させたい（埋め込みたい）投稿をクリックし、画面右上のメニューボタン【・・・】をクリック。
【・・・】をクリックすると、下記のポップ画面が表示されますので「埋め込み」を選択する。
③ブログに貼り付けるソースをコピー
「埋め込み」を選択すると、「埋め込みコードをコピー」を選択できる画面が表示されるので、「埋め込みコードをコピー」をクリックしてソースをコピーする。
※「キャプションを追加」で、投稿文の内容を表示させるかの有無を選択できる。投稿内容を表示させたい場合は、チェックボックスにレ点を入れる。
④ブログのテキスト画面に貼り付け
ブログのテキストエディターをテキスト画面にする。
埋め込みコードをコピーしたら、テキスト画面に貼り付ける。
プレビューすると、ブログに投稿画面が表示されました。
この投稿をInstagramで見る
ちょっと画面が大きい気がする・・・
ヒカルコ
投稿画面のサイズ変更
埋め込みコードをコピーして、ブログに貼り付けた場合、上記のようにInstagramの投稿内容が表示される。
ちょっと大きいので、サイズを小さくしてみます。
ブログのテキストエディターをテキスト画面にする。
貼り付けたソースの上部にあるmax-width: 540px； min-width:326px を変更する。
max-widthは、横幅を表し、min-widthは、縦幅を表している。
サイズ変更
- max-width:540px ➡300px
- min-width:326px ➡400px
この投稿をInstagramで見る
サイズが小さくなりバランスがよくなりました。
まとめ
埋め込み機能を使えば、簡単にインスタグラムの投稿をブログへ表示させることができます。