WordPressでブログを運営されている方でInstagramもやられている方多いと思います。
ブログを書いているとInstagramで投稿した画像や動画を個別記事内でも紹介したいなんて場面も出てきます。
ブログ記事内で文章だけでは説明しづらい時がたまにありますが、Instagramに投稿した動画などを記事内にサクッと埋め込んでやると説明もしやすくなります。
YouTubeの動画を貼り付けれてやれば一番いいのですが（私はやっていないので）、Instagramの方がかかる手間も少なく、また関連する写真なども一緒に投稿していれば見ている方にも分かりやすくなります。
もともと私はSNSをあまり活用している方ではないのですが、TwitterやFacebookではタイムラインに興味のない情報も大量に流れ込んできます。
今でいうとコロナ関連の話でしょうか？
ニュースで見る情報で十分だし、ただでさえ暗い雰囲気になっているのにタイムラインにそんな話ばかり流れてくると・・・
そんな訳で最近SNSはInstagramを見ることが多くなりました。
興味ある（私の場合最近はドローンばかりですが）写真や動画見てるだけで楽しくなりますからね！
WordPressには標準でInstagramの埋め込み機能がありますが、CSSを編集した時に表示が崩れたりする場面がありました。（使っているテーマに依存するのかな？）
Instagram公式の埋め込みコードを取得して個別記事内に貼り付けた方が確実なようです！
そんな事から今回、WordPressで作成したブログの記事内にInstagram投稿を埋め込む一番簡単な方法をご紹介します。
ブログ記事内にInstagramの画像や動画を埋め込む方法！
Instagramの投稿をWordPressブログ内に表示させる場合、大きく分けて2つの方法があるかと思います。
- WordPressブログの個別記事内にInstagramの画像や動画を埋め込む
- プラグインを使用してサイドバーやフッターなどにタイムラインを埋め込む
WordPressのブログ記事内にInstagramの画像を埋め込む方法で一番簡単なのが、Instagram公式サイトから埋め込みコードを取得して記事内に貼り付ける方法だと思います。
個別記事内にInstagramの個別投稿を表示させたい時に便利となります。
またプラグインを使用すればサイドバーやフッターなどに表示させる事も出来ます。
ブログ記事内にInstagram投稿画像を表示させる！
Instagram公式サイトから埋め込みコードを取得させ記事内に埋め込みます。
記事内にこんな感じで表示されます。
Instagram公式のものなので、見た目もまさしくインスタって感じですね！
ユーザー名や［Instagramでもっと見る］ボタンも自動的に設置されます。
また、［いいね！］の件数もちゃんと自動的に更新されます。
埋め込み方法！
やり方は非常に簡単です！
PCでInstagramにログイン後、埋め込みたい投稿（画像）を選択し［・・・］をクリックします。
［埋め込み］をクリックし、
［埋め込みコードをコピー］でコードをコピーしておきます。
あとはコピーした埋め込みコードをブログ記事内に貼り付ければ完了です。
埋め込みコードの取得には、キャプションの有無を選択できます。
この投稿をInstagramで見る
サイズを変えて表示させる！
埋め込み画像の表示サイズは、標準では少し大きいかと思います。
【元の画像サイズ】
［横幅］max-width:540px;
［縦幅］min-width:326px;
埋め込みコードのこの部分を変更することにより画像サイズを変更することが出来ます。
【例】
max-width:450px; min-width:450px; を指定
センター合わせで表示させる！
標準では画像は左揃えになっています。
これをセンター合わせ（中央揃え）に変更したい場合なんですが、centerタグで囲ったりといろいろとやってみたのですが上手くいかずで・・・
こちらのサイトを参考にCSSを追加し対応させました。
参考 Instagram（インスタグラム）埋め込みのサイズの変更と中央揃えの方法正直、どーなん？毎回、画像サイズや中央揃えのために埋め込みコードを変更するのが面倒な場合はこの方法が一番いいかと思います。
WordPress管理画面から【追加CSS】の項目に以下のコードを追加します。
外観 → カスタマイズ → 追加CSS
1 2 3 4 | .instagram-center { margin:0 auto; max-width: 450px; } |
あとはInstagramで取得した埋め込みコードを以下に追加して記事内に貼り付ければ完了です！
1 | <div class="instagram-center">（Instagramで取得した埋め込みコード）</div> |
まとめ
以上、ブログ個別記事内にInstagramに投稿した画像や動画を埋め込む方法でした。
Instagramっていいですねぇ〜！
興味ある画像や動画見ているだけでテンション上がってきます。
コメントを残す