Instagramの埋め込む方法 & ”たった1行” で Instagramを中央寄せ するテクニックを解説
![nana](https://storage.googleapis.com/satori-net/2021/10/673be4f1-open-peeps-avatar-36-e1633421244993.png)
う〜〜〜ん
![satori](https://storage.googleapis.com/satori-net/2021/07/4858b5c7-open-peeps-avatar-11.png)
どうしたの?
![nana](https://storage.googleapis.com/satori-net/2021/10/673be4f1-open-peeps-avatar-36-e1633421244993.png)
WordPressにInstagramを貼り付けたいんだけど
何故か左側寄せになっちゃう…
![satori](https://storage.googleapis.com/satori-net/2021/07/52bfdcaf-open-peeps-avatar.png)
使ってるのは旧エディタ?
![nana](https://storage.googleapis.com/satori-net/2021/09/336e85cf-open-peeps-avatar-33-e1632642861775.png)
そうだよ
![satori](https://storage.googleapis.com/satori-net/2021/07/4858b5c7-open-peeps-avatar-11.png)
使っているエディタによってInstagramの調整難易度違うよ
![nana](https://storage.googleapis.com/satori-net/2021/07/832c87b7-c2oddvjigrzthqn1627632013_1627632026.png)
じゃあ別のエディタなら簡単ってこと?詳しく教えて〜!
![satori](https://storage.googleapis.com/satori-net/2021/09/9a679196-open-peeps-avatar-18.png)
OK!まかせて!!
今回はエディタ別のInstagramの埋め込み方と調整の仕方を解説するよ
GutenbergでInstagramを埋め込む
![nana](https://storage.googleapis.com/satori-net/2021/10/c94c7dd0-open-peeps-avatar-35-e1633421167376.png)
Gutenbergってちょっと使い難いやつだよね?
![satori](https://storage.googleapis.com/satori-net/2021/07/4858b5c7-open-peeps-avatar-11.png)
でもInstagram埋め込みと編集はすっごく簡単だよ
埋め込み方は投稿のURLを貼り付けるだけ!
![nana](https://storage.googleapis.com/satori-net/2021/08/4bcb63e8-open-peeps-avatar-14-e1629184008363.png)
うんうん
これは知ってるよ
![satori](https://storage.googleapis.com/satori-net/2021/09/9a679196-open-peeps-avatar-18.png)
じゃあ【Latest Instagram Posts】は知ってる??
![nana](https://storage.googleapis.com/satori-net/2021/08/ee2a8f67-open-peeps-avatar-13-e1629183837108.png)
Instagramのサムネイル表示ができるてる?!
これ良いね!どうやるの!?
![satori](https://storage.googleapis.com/satori-net/2021/07/4858b5c7-open-peeps-avatar-11.png)
ブロックを追加からLatest Instagram Postsを選択
表示数やレイアウトも決めることができるよ!
Instagram 中央寄せにする方法
![satori](https://storage.googleapis.com/satori-net/2021/09/9a679196-open-peeps-avatar-18.png)
そして中央配置だけど
なんとInstagram中央寄せはボタン1つでできる!!
![nana](https://storage.googleapis.com/satori-net/2021/08/ee2a8f67-open-peeps-avatar-13-e1629183837108.png)
プレビューでも中央寄せになってる!簡単!!
ポイント
![nana](https://storage.googleapis.com/satori-net/2021/09/336e85cf-open-peeps-avatar-33-e1632642861775.png)
すごく簡単にInstagram埋め込みできるね
それとLatest Instagram Postsは便利
![satori](https://storage.googleapis.com/satori-net/2021/07/4858b5c7-open-peeps-avatar-11.png)
直感的に操作ができるのがポイントかな
慣れたら使いやすいと思う
・Instagramを中央配置 :ボタン1つで簡単
・Latest Instagram Posts でサムネイル表示ができる
![nana](https://storage.googleapis.com/satori-net/2021/08/4bcb63e8-open-peeps-avatar-14-e1629184008363.png)
う〜ん便利だと思うけど…
旧エディタが気楽に書けて好きなんだ〜
![satori](https://storage.googleapis.com/satori-net/2021/07/52bfdcaf-open-peeps-avatar.png)
僕も旧エディタで作業してるよ
![nana](https://storage.googleapis.com/satori-net/2021/10/673be4f1-open-peeps-avatar-36-e1633421244993.png)
でも旧エディタだと中央寄せにできないんだ・・・
![satori](https://storage.googleapis.com/satori-net/2021/09/9a679196-open-peeps-avatar-18.png)
そんな事ないよ!便利なテクニックがあるんだ!
次は旧エディタの場合で解説するよ!!
Classic Editor(旧エディタ)でInstagramを埋め込む
![satori](https://storage.googleapis.com/satori-net/2021/07/4858b5c7-open-peeps-avatar-11.png)
まずInstagramを埋め込む方法だけど
Gutenberg同じで投稿URLを貼り付けるだけ!
![nana](https://storage.googleapis.com/satori-net/2021/09/336e85cf-open-peeps-avatar-33-e1632642861775.png)
うんこれは知ってる
でもGutenbergと違って強制的左寄せになっちゃうの
なぜ左寄せになるのか?
![nana](https://storage.googleapis.com/satori-net/2021/07/832c87b7-c2oddvjigrzthqn1627632013_1627632026.png)
少しはCSSの知識あるから
カスタマイズから追加CSSしたけど効かなくて・・・
![satori](https://storage.googleapis.com/satori-net/2021/07/4858b5c7-open-peeps-avatar-11.png)
おっ追加CSS!
ちなみにどうやって書いたの??
![nana](https://storage.googleapis.com/satori-net/2021/09/336e85cf-open-peeps-avatar-33-e1632642861775.png)
これだよ
.instagram-media {
margin: auto
}
![satori](https://storage.googleapis.com/satori-net/2021/09/9a679196-open-peeps-avatar-18.png)
コレで中央寄せはできるはずだけど
左寄せになる原因は優先度が違うからなんだ!
![nana](https://storage.googleapis.com/satori-net/2021/07/832c87b7-c2oddvjigrzthqn1627632013_1627632026.png)
優先度?
![satori](https://storage.googleapis.com/satori-net/2021/07/4858b5c7-open-peeps-avatar-11.png)
まずInstagramを貼り付けた時どうなっているかを見るよ
※わかりやすいように一部編集してます。
<iframe class="instagram-media instagram-media-rendered" id="instagram-embed-0"
style="background: white; max-width: 658px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid rgb(219, 219, 219); box-shadow: none; display: block; margin: 0px 0px 12px; min-width: 326px; padding: 0px;"> <!-- Instagramの内容が入る --> </iframe>
![satori](https://storage.googleapis.com/satori-net/2021/07/4858b5c7-open-peeps-avatar-11.png)
今回みたいに直にstyleが書かれた場合は追加CSSよりも優先度が上になるんだ!
Instagram 中央寄せにする方法(旧エディタ)
![nana](https://storage.googleapis.com/satori-net/2021/10/673be4f1-open-peeps-avatar-36-e1633421244993.png)
直書きでstyleが書かれていると追加CSSは効かない
じゃあ左寄せは直せないってこと・・・??
![satori](https://storage.googleapis.com/satori-net/2021/09/9a679196-open-peeps-avatar-18.png)
そこで便利なテクニック【!important】
さっきの追加CSSにコレを付け加えるだけ!!
![nana](https://storage.googleapis.com/satori-net/2021/08/ee2a8f67-open-peeps-avatar-13-e1629183837108.png)
ほんとだ・・・!?
やっとInstagramが中央に配置できた!!
ポイント
![satori](https://storage.googleapis.com/satori-net/2021/07/4858b5c7-open-peeps-avatar-11.png)
【!important】を追加することでInstagramが中央寄せになったね!
![nana](https://storage.googleapis.com/satori-net/2021/09/336e85cf-open-peeps-avatar-33-e1632642861775.png)
こんなに簡単だったとは・・・
![satori](https://storage.googleapis.com/satori-net/2021/09/9a679196-open-peeps-avatar-18.png)
追加CSSに記載することでコレ以降も設定が継続するし
さらに!コレを編集していけば、サイズや色まで調整ができるよ!
/* SNS */
.instagram-media{
margin: auto !important;
}
![nana](https://storage.googleapis.com/satori-net/2021/07/e4098d5e-open-peeps-avatar-3-e1629366760577.png)
!important・・・やるね
![satori](https://storage.googleapis.com/satori-net/2021/07/4688e6ad-open-peeps-avatar-4.png)
でも使いすぎは良くないよ!
なるべく使う所は少なく、ちゃんと確認しながら使うようにね
・Instagramを中央配置 :追加CSSで今回のCSSをコピペ
・カスタマイズ方法:外観→カスタマイズ→追加CSS
まとめ
![satori](https://storage.googleapis.com/satori-net/2021/07/4858b5c7-open-peeps-avatar-11.png)
今回はWordPressの記事にInstagramを埋め込む方法
Instagramを中央に配置する方法について解説しました。
・Gutenberg、旧エディタ :URLを貼り付ける
Instagramの調整の仕方
・Gutenberg:中央寄せボタンがあり簡単に中央配置は簡単
・旧エディタ :強制的に左寄せ記事内のテクニックで中央寄せ
![nana](https://storage.googleapis.com/satori-net/2021/08/ee2a8f67-open-peeps-avatar-13-e1629183837108.png)
Instagramが左側に寄っちゃうから困っていたの!
今回の方法なら簡単に中央寄せができたありがとう!!
![satori](https://storage.googleapis.com/satori-net/2021/09/9a679196-open-peeps-avatar-18.png)
コピペで Instagram 中央寄せ が簡単にできます!
使い方は記事を参考にしてください!
![satori](https://storage.googleapis.com/satori-net/2021/07/4858b5c7-open-peeps-avatar-11.png)
更新予定はTwitterで発信しています。
Instagramでは記事内に載せられなかった写真など公開しています。
フォローぜひお願いします。
![nana](https://storage.googleapis.com/satori-net/2021/09/336e85cf-open-peeps-avatar-33-e1632642861775.png)
記事の感想コメントもお願いします!
![satori](https://storage.googleapis.com/satori-net/2021/07/4858b5c7-open-peeps-avatar-11.png)
それではごきげんよう。
コメント