WordPressでInstagramの埋め込み&”たった1行” で中央寄せする便利ワザ

この記事は約7分で読めます。

Instagramの埋め込む方法 & ”たった1行” で Instagramを中央寄せ するテクニックを解説

nana

う〜〜〜ん

satori

どうしたの?

nana

WordPressにInstagramを貼り付けたいんだけど

何故か左側寄せになっちゃう…

satori

使ってるのは旧エディタ?

nana

そうだよ

satori

使っているエディタによってInstagramの調整難易度違うよ

nana

じゃあ別のエディタなら簡単ってこと?詳しく教えて〜!

satori

OK!まかせて!!

今回はエディタ別のInstagramの埋め込み方と調整の仕方を解説するよ

GutenbergでInstagramを埋め込む

nana

Gutenbergってちょっと使い難いやつだよね?

satori

でもInstagram埋め込みと編集はすっごく簡単だよ

埋め込み方は投稿のURLを貼り付けるだけ!

nana

うんうん

これは知ってるよ

satori

じゃあ【Latest Instagram Posts】は知ってる??

nana

Instagramのサムネイル表示ができるてる?!

これ良いね!どうやるの!?

satori

ブロックを追加からLatest Instagram Postsを選択

表示数やレイアウトも決めることができるよ!

Instagram 中央寄せにする方法

satori

そして中央配置だけど

なんとInstagram中央寄せはボタン1つでできる!!

nana

プレビューでも中央寄せになってる!簡単!!

ポイント

nana

すごく簡単にInstagram埋め込みできるね

それとLatest Instagram Postsは便利

satori

直感的に操作ができるのがポイントかな

慣れたら使いやすいと思う

・Instagramの埋め込み方:Instagram投稿のURLをコピペ
・Instagramを中央配置   :ボタン1つで簡単
・Latest Instagram Posts でサムネイル表示ができる
nana

う〜ん便利だと思うけど…

旧エディタが気楽に書けて好きなんだ〜

satori

僕も旧エディタで作業してるよ

nana

でも旧エディタだと中央寄せにできないんだ・・・

satori

そんな事ないよ!便利なテクニックがあるんだ!

次は旧エディタの場合で解説するよ!!

Classic Editor(旧エディタ)でInstagramを埋め込む

satori

まずInstagramを埋め込む方法だけど

Gutenberg同じで投稿URLを貼り付けるだけ!

nana

うんこれは知ってる

でもGutenbergと違って強制的左寄せになっちゃうの

なぜ左寄せになるのか?

nana

少しはCSSの知識あるから

カスタマイズから追加CSSしたけど効かなくて・・・

satori

おっ追加CSS!

ちなみにどうやって書いたの??

nana

これだよ

.instagram-media {
margin: auto
}
satori

コレで中央寄せはできるはずだけど

左寄せになる原因は優先度が違うからなんだ!

nana

優先度?

satori

まず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

今回みたいに直にstyleが書かれた場合は追加CSSよりも優先度が上になるんだ!

Instagram 中央寄せにする方法(旧エディタ)

nana

直書きでstyleが書かれていると追加CSSは効かない

じゃあ左寄せは直せないってこと・・・??

satori

そこで便利なテクニック【!important】

さっきの追加CSSにコレを付け加えるだけ!!

nana

ほんとだ・・・!?

やっとInstagramが中央に配置できた!!

ポイント

satori

【!important】を追加することでInstagramが中央寄せになったね!

nana

こんなに簡単だったとは・・・

satori

追加CSSに記載することでコレ以降も設定が継続するし

さらに!コレを編集していけば、サイズや色まで調整ができるよ!

/* SNS */ 
.instagram-media{ 
margin: auto !important; 
}
nana

!important・・・やるね

satori

でも使いすぎは良くないよ!

なるべく使う所は少なく、ちゃんと確認しながら使うようにね

・Instagramの埋め込み方:Instagram投稿のURLをコピペ
・Instagramを中央配置   :追加CSSで今回のCSSをコピペ
・カスタマイズ方法:外観→カスタマイズ→追加CSS

まとめ

satori

今回はWordPressの記事にInstagramを埋め込む方法

Instagramを中央に配置する方法について解説しました。

WordPressにInstagramを埋め込む
・Gutenberg、旧エディタ :URLを貼り付ける
Instagramの調整の仕方
・Gutenberg:中央寄せボタンがあり簡単に中央配置は簡単
・旧エディタ :強制的に左寄せ記事内のテクニックで中央寄せ
nana

Instagramが左側に寄っちゃうから困っていたの!

今回の方法なら簡単に中央寄せができたありがとう!!

satori

コピペで Instagram 中央寄せ が簡単にできます!

使い方は記事を参考にしてください!

 

satori

更新予定はTwitterで発信しています。
Instagramでは記事内に載せられなかった写真など公開しています。
フォローぜひお願いします。

nana

記事の感想コメントもお願いします!

satori

それではごきげんよう。

コメント