インスタグラムの投稿をブログに表示させる方法!
インファクト京都オフィスの山井です。
インスタグラムを活用されている方で、インスタグラムに投稿している写真には拘っている方が多いと思います。
その中で、「せっかく拘った写真だからそのままブログにも載せたい・・」と思われた方はおられませんか?
実は、インスタグラムに投稿した写真を簡単にブログに埋め込ませて表示ができちゃいます。
今回は、インスタグラムの写真をブログへ簡単に表示できる方法をご紹介します!
インスタグラムをブログに表示させる方法
それでは、早速インスタグラムをブログに表示させる方法をご紹介します!
※今回はWordPressを使いご説明していきます。
①表示させたいアカウントを開く
まずは、ブログに表示させたいアカウントをブラウザ(ChromeやIE)で開いてください。
そして、ブログに表示させたい投稿を選択して「・・・」をタップします。
②ブログに貼り付けるソースをコピー
「・・・」をタップすると、下記のポップ画面が表示されますので「埋め込み」を選択します。
「埋め込み」を選択すると、「埋め込みコードをコピー」を選択できる画面が表示されますので、「埋め込みコードをコピー」をタップしてソースをコピーしてください。
※「キャプションを追加」は、投稿文の内容を表示させるかの有無を選択できますので、投稿内容を表示させたい場合は、チェックボックスにレ点を入れてください。
③ブログのテキスト画面に貼り付け
ソースをコピーした後は、ブログのテキストエディターのテキスト画面に貼り付けます。
※必ず入力画面を「テキスト」に切り替えてからソースを貼り付けてください。
これでプレビューをしてみると、
ブログにインスタグラムの投稿内容が表示されています!
実際に、下記へインスタグラムを表示させてみます。
この投稿をInstagramで見る
京都で有名なお茶屋「一保堂」さんの公式アカウントを表示させてみました。
インスタグラムの投稿内容がそのままブログに表示されており、プロフィールや投稿内容に遷移することができます。
表示サイズを変更したい場合
ソースをコピーしてブログに貼り付けた場合、上記のようにかなり大きいサイズでインスタグラムの投稿内容が表示されます。
サイズを小さくしたい方は、ソースを貼り付けた際にソースの上部にある下記の数値を変更してください。
max-width: (横幅)
min-width: (縦幅)
max-width:300 min-width:400に修正してサイズを小さくしたものを下記に表示させてみました。
この投稿をInstagramで見る
先ほどよりも、サイズが小さくなりバランスが良くなったかと思います。
注意点として、数字以外のソースを修正すると表示が崩れますので、数字以外は修正しないように気をつけてください!
まとめ
いかがでしたでしょうか?
インスタグラムの投稿を簡単にブログへ表示させることができました。
インスタグラムとブログを連携することで、誘導や集客UPにも繋がりますので、ぜひご活用ください!
インファクト編集部
最新記事 by インファクト編集部 (全て見る)
- 【Google Chat】グーグルチャットツールの使い方|Google Workspace - 2024年1月19日
- 【最新】Canva Docsの使い方|おしゃれで見やすい文章作成ツール - 2023年9月1日
- 【パラメーターとは】Googleアナリティクスでパラメーターの表示方法 - 2023年8月16日