Instagramの埋め込む方法 & ”たった1行” で Instagramを中央寄せ するテクニックを解説
う〜〜〜ん
どうしたの？
WordPressにInstagramを貼り付けたいんだけど
何故か左側寄せになっちゃう…
使ってるのは旧エディタ？
そうだよ
使っているエディタによってInstagramの調整難易度違うよ
じゃあ別のエディタなら簡単ってこと？詳しく教えて〜！
OK！まかせて！！
今回はエディタ別のInstagramの埋め込み方と調整の仕方を解説するよ
GutenbergでInstagramを埋め込む
Gutenbergってちょっと使い難いやつだよね？
でもInstagram埋め込みと編集はすっごく簡単だよ
埋め込み方は投稿のURLを貼り付けるだけ！
うんうん
これは知ってるよ
じゃあ【Latest Instagram Posts】は知ってる？？
Instagramのサムネイル表示ができるてる？！
これ良いね！どうやるの！？
ブロックを追加からLatest Instagram Postsを選択
表示数やレイアウトも決めることができるよ！
Instagram 中央寄せにする方法
そして中央配置だけど
なんとInstagram中央寄せはボタン1つでできる！！
プレビューでも中央寄せになってる！簡単！！
ポイント
すごく簡単にInstagram埋め込みできるね
それとLatest Instagram Postsは便利
直感的に操作ができるのがポイントかな
慣れたら使いやすいと思う
・Instagramを中央配置 ：ボタン1つで簡単
・Latest Instagram Posts でサムネイル表示ができる
う〜ん便利だと思うけど…
旧エディタが気楽に書けて好きなんだ〜
僕も旧エディタで作業してるよ
でも旧エディタだと中央寄せにできないんだ・・・
そんな事ないよ！便利なテクニックがあるんだ！
次は旧エディタの場合で解説するよ！！
Classic Editor(旧エディタ)でInstagramを埋め込む
まずInstagramを埋め込む方法だけど
Gutenberg同じで投稿URLを貼り付けるだけ！
うんこれは知ってる
でもGutenbergと違って強制的左寄せになっちゃうの
なぜ左寄せになるのか？
少しはCSSの知識あるから
カスタマイズから追加CSSしたけど効かなくて・・・
おっ追加CSS！
ちなみにどうやって書いたの？？
これだよ
.instagram-media {
margin: auto
}コレで中央寄せはできるはずだけど
左寄せになる原因は優先度が違うからなんだ！
優先度？
まず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>
今回みたいに直にstyleが書かれた場合は追加CSSよりも優先度が上になるんだ！
Instagram 中央寄せにする方法(旧エディタ)
直書きでstyleが書かれていると追加CSSは効かない
じゃあ左寄せは直せないってこと・・・？？
そこで便利なテクニック【!important】
さっきの追加CSSにコレを付け加えるだけ！！
ほんとだ・・・！？
やっとInstagramが中央に配置できた！！
ポイント
【!important】を追加することでInstagramが中央寄せになったね！
こんなに簡単だったとは・・・
追加CSSに記載することでコレ以降も設定が継続するし
さらに！コレを編集していけば、サイズや色まで調整ができるよ！
/* SNS */
.instagram-media{
margin: auto !important;
}
!important・・・やるね
でも使いすぎは良くないよ！
なるべく使う所は少なく、ちゃんと確認しながら使うようにね
・Instagramを中央配置 ：追加CSSで今回のCSSをコピペ
・カスタマイズ方法：外観→カスタマイズ→追加CSS
まとめ
今回はWordPressの記事にInstagramを埋め込む方法
Instagramを中央に配置する方法について解説しました。
・Gutenberg、旧エディタ ：URLを貼り付ける
Instagramの調整の仕方
・Gutenberg：中央寄せボタンがあり簡単に中央配置は簡単
・旧エディタ ：強制的に左寄せ記事内のテクニックで中央寄せ
Instagramが左側に寄っちゃうから困っていたの！
今回の方法なら簡単に中央寄せができたありがとう！！
コピペで Instagram 中央寄せ が簡単にできます！
使い方は記事を参考にしてください！
更新予定はTwitterで発信しています。
Instagramでは記事内に載せられなかった写真など公開しています。
フォローぜひお願いします。
記事の感想コメントもお願いします！
それではごきげんよう。
コメント