ブログ運営

インスタグラムの投稿をブログの記事に貼り付ける方法

こんばんわ、はなあんママです。毎日インスタグラムに投稿しているのだからその投稿をこのブログにも貼ろう思い立ちました。

先日はサイドバーや記事内にインスタグラムのホーム画面を貼る方法をご紹介しましたが

WPのサイドバーや記事内にInstagramの埋め込みをする方法

今回はホーム画面ではなくインスタの投稿なのでひとつの投稿画面になります。

写真だけでなく動画の埋め込みも可能

インスタグラムには埋め込み機能というものがあるので、埋込コードを利用して簡単にブログに画像を表示させることができます

埋め込みコードで表示させる方法

埋め込みコードを使って表示させる場合は

  • 横幅を指定できる
  • 画像だけ表示(キャプションなし)

を自由に選べるのでこちらの方法がオススメです

写真の複数投稿も大丈夫

 
 
 
 
 
この投稿をInstagramで見る
 
 
 
 
 
 
 
 
 
 
 

はなことあんこ🌸さん(@tibigon)がシェアした投稿

動画も埋め込みでこのとおり

 
 
 
 
 
この投稿をInstagramで見る
 
 
 
 
 
 
 
 
 
 
 

はなことあんこ🌸さん(@tibigon)がシェアした投稿

ブログに埋め込みする手順

インスタグラムの投稿を開いて右上に表示される「・・・」をクリックします

「埋め込み」をクリックします

「埋め込みコードをコピー」をクリックします

「埋め込みコードがコピーされました」と表示されて、埋め込みコードのコピー完了です

ワードプレスのブログの記事作成画面で「テキスト」モードに変更して貼り付けます。

キャプションありなしの選択

写真や動画とともにキャプション(写真や動画についた説明やハッシュタグ)を付けるか付けないかも選択することができます。キャプションを外すと、画像や動画だけが表示されるのでスッキリとした見た目になります。

キャプションあり

キャプションなし

 
 
 
 
 
この投稿をInstagramで見る
 
 
 
 
 
 
 
 
 
 
 

はなことあんこ🌸さん(@tibigon)がシェアした投稿

ある無しで比べてみるとキャプションがないほうがとスッキリしましたよね。写真を見せるだけならこちらのほうがいいです。

キャプションのある無しを選択するには

キャプションを付けるか付けないかの選択は埋め込みコードをコピーするときにチェックボックスのチェックを外すだけです。

画像サイズを変更するには

スマホではわかりませんが、パソコンで表示する場合に上の画像では大きすぎるなと思ったらサイズも自由に変更することができます。

埋め込みコードのサイズを変更する

埋め込みソースコードの中をみて幅を指定している箇所を見つけましょう

max-width:540px; min-width:326px; と書かれている箇所をみつけました、この場合は最大の幅が540pxとなっているので、好みのサイズに変えることが出来ます。
max-width:320px; min-width:300px; に変更してみましょう。

 
 
 
 
 
この投稿をInstagramで見る
 
 
 
 
 
 
 
 
 
 
 

はなことあんこ🌸さん(@tibigon)がシェアした投稿

パソコン上では小さく表示されています。