ライフスタイル

【初心者向け】Instagramの埋め込み|サイズ変更と中央揃え  WordPress編

2020年5月31日

WordPressでのブログ更新をはじめて2週間たちました。

他の方のブログを見てると
Instagramの画像をブログの中に入れている方もたくさんいて
分かりやすいなって思っていました。

私もInstagramを真似をしていれてみたのですが

むちゃくちゃ大きく、長―くなってしまいました。。。

こんな感じ。。。

見づらいし、かっこう悪い(泣)

こんな同じ思いをされている方いらっしゃいますか?

今日は、Instagramをブログ本文に貼る方法と
バランスよく埋め込む方法についてご紹介します。

 

 

Instagramの記事を埋め込む方法

Instagramの記事をwordpressに埋め込む方法をご存じの方は
このページ飛ばしてくださいね。

 

step
1
ブログに埋め込みたい投稿を見つける

すると、このように拡大画面になります。

 

step
2
右上の3つ並んでいる●●●をクリックする

 

そうすると、下の画面が出てくるので「埋め込み」をクリックしてください。

 

 

 

step
3
青い部分をクリックする

青いボタンをクリックすればコードをすべてコピーできるので、そのままWordPressに貼りましょう。

 

ポイント

キャプションなしでブログに埋め込みたい場合はチェックボックスを外してください。

 

step
4
ブログに埋め込む

WordPressの場合「ビジュアル」タグではなく、「テキスト」タブに貼ってくださいね。

 

完成です!

 

この投稿をInstagramで見る

 

おすみ@アラフォー世代のための開運女子部(@osumi_sun)がシェアした投稿 -

でも、冒頭にご紹介したように、むちゃくちゃ大きいですよね。

次にサイズを変更していきます!

旅アテンダント
もう少しできれいにInstagramが貼れますよ!頑張りましょ!

サイズを調整する

次にこの大きい画像を小さくしていきます。
方法は、コードの数字を変えるだけです。

具体的に説明してきますね。

ここでは、ブログの「テキストタグ」で作業をしていきます。

これがさきほど埋め込んだInstagramのコードです。

<blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width: 540px; min-width: 326px; padding: 0; width: calc(100% - 2px);" data-instgrm-permalink="https://www.instagram.com/p/CAub07agVVo/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="12">
<div style="padding: 16px;">
ここからずっと続く。。。。

下のマーカーをひいた箇所
max-width: 540pxという数字を300
に変えます。

<blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width: 540px; min-width: 326px; padding: 0; width: calc(100% - 2px);" data-instgrm-permalink="https://www.instagram.com/p/CAub07agVVo/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="12">
<div style="padding: 16px;">
ここからずっと続く。。。。

 

この投稿をInstagramで見る

 

おすみ@アラフォー世代のための開運女子部(@osumi_sun)がシェアした投稿 -

どうですか?小さくなって、全体とのバランスのよくなりましたよね。
スマートフォンで表示した時も見やすくなりますよ。

 

あとは、この埋め込みを中央にもっていけば完璧ですね!

Instagramの埋め込みを中央揃えにする方法

次にこの小さくした画像を中央揃えにしていきます。
中央揃えにする方法は、これから説明するコードをコピペするだけでOK。

具体的に説明してきますね。

ここでも、引き続きブログの「テキストタグ」で作業をしていきます。

<div style="display: flex; justify-content: center;">

</div>

上のコードを埋め込んだInstagramの前後に埋め込んでください。
またはInstagramを張る前に、このコードを埋め込みたい場所に張り付けてください。

 

<div style="display: flex; justify-content: center;">

ここに埋め込んだコードを張り付ける

</div>

それでは実際に設定した画面です。

 

 

 

この投稿をInstagramで見る

 

おすみ@アラフォー世代のための開運女子部(@osumi_sun)がシェアした投稿 -

 

旅アテンダント
完成しましたね!

 

まとめ

いかがでしたでしょうか。

 

Instagramの埋め込み方ひとつで、ブログも見やすくなりますよね。

簡単なので、ぜひお試しください。

-ライフスタイル

© 2020 おとな開運女子部 Powered by AFFINGER5