InstagramをWordPressにセンタリングで埋め込む

instagram

スポンサーリンク

Instagramの投稿をWordPressに中央揃えで埋め込む方法【HTMLだけでCSS不要】

こんにちは! Aoneko( @blue_cats03)です。

今回は、Instagramの投稿をWordPressに中央揃えで埋め込む方法を紹介します。

CSS不要なので、中央寄せやサイズを指定したCSSを予め用意する必要はありません。

 

先に結論を言うと、Instagramの埋め込みコードの前後に以下のタグを入れれば中央寄りになります。

 

<div align=”center”>/*埋め込みタグをここに追加*/</div>

 

実際に画像で中央寄せする方法を解説します

まず、下図のようにインスタグラムから埋め込みコードを取得します。

 

pokemon instagram

出典:instagram.com/pokemonより作成

埋め込みコード入手手順

 

埋め込みコード入手手順

  1. Instagram上で好きな写真を選択
  2. 右上の「・・・」をクリック
  3. 「埋め込み」をクリック
  4. 「埋め込みコード」をコピー

 

 

次に、WordPressの記事投稿画面の「テキスト」をクリックします。

先ほどコピーした「埋め込みコード」を挿入します。

 

wordpress_text

出典:当サイト

埋め込みコードをペースト

 

その状態で一度「ビジュアル」画面に戻ると、Instagramはまだ左に寄ったままです。

 

wordpress_ visual

出典:当サイト

Instagramが左寄せの状態

 

もう一度、「テキスト」画面に戻り、下の赤線箇所のタグを入れ込みます。

 

<div align=”center”>/*埋め込みタグをここに追加*/</div>

 

 

wordpress_text

出典:当サイト

先頭に<div align=”center”>を挿入

 

wordpress_text

出典:当サイト

最後に</div>を挿入

 

 

あおねこ
あおねこ

これで完成です!

 

下のインスタグラムの埋め込みのように、中央寄せにすることができました。

 

 

この投稿をInstagramで見る

 

Dreaming of these sunny, smiling Grass-type Pokémon on a Wednesday… 💭

Pokémon(@pokemon)がシェアした投稿 –

 

Web
Aonekoをフォローする
Aoneko Lab