ブログやWordPressのInstagram埋め込みを中央揃えにする方法

ブログやWordPressにEmbed(埋め込み)したInstagram(インスタグラム)の写真を中央揃えする方法をご紹介します。
今回はわかりやすいように最大サイズも調整しています。

インスタグラムの埋め込みを中央揃えにする方法

1.cssを用意する

.instagram-center {
	margin:0 auto;
	max-width: 350px;
}

まずは中央寄せ、最大サイズを指定したcssを用意します。

インスタグラムの埋め込みタグである<blockquote>にもmarginやmax-widthがあります。
最大サイズは変えられますが、marginによる中央寄せはできなかったのでcssを用意したほうが確実でしょう。

2.埋め込みようのタグをインスタグラムから取得する

インスタグラムから埋め込みようのタグを取得しておいてください。

今回はキャンプションをなしで取得しています。

3.インスタグラムを中央寄せにしてブログやWordPressに追加する

<div class="instagram-center"> /*埋め込みタグをここに追加*/ </div>

最後に先ほど作成したcssを適用した<div>タグで埋め込み用のタグを挟めば中央寄せができます。

普通のサイズのインスタグラムを配置すると左寄せだったり、サイズが大きかったりするのでブログやWordPressにインスタグラムを載せる際はサイズ指定や中央揃えなどを加えるとよりオシャレなブログにできると思います。

インスタグラムをブログに載せる際は一工夫してみてはいかがでしょうか。