IT

【簡単!】インスタを埋込む方法は?サイズ変更と中央寄せ方法も

インスタグラムをブログなどに埋め込む方法はとても簡単です。

サイズ変更や中央寄せの方法も簡単なので見ていきましょう!

※4/18追記:中央寄せの別の方法を記載しました。

スポンサーリンク

埋め込み方法

次の5ステップです。

1.写真を選択
2.右下の「・・・」を選択
3.「埋め込み」を選択
4.コードをコピー
5.ブログにコード貼り付け

1.写真を選択

2.右下の「・・・」を選択

右下の方にがあるので選択します。

3.「埋め込み」を選択

4.コードをコピー

5.ブログにコードを貼り付け

これで完了です!そして以下が埋込後の画像です。

Instagram Japanさん(@instagramjapan)が投稿した写真

スポンサーリンク

サイズ変更方法

上の画像のままでは少し大きいですよね?

サイズを変更していきます。

コピーペーストしたコード内の

max-width:658px

という文字列の数字を小さくします。

ここでは半分くらいの大きさの300pxに変更します。

サイズが変更できました!

px; padding:0; width:99.375%; width:-webkit-calc(100% – 2px); width:calc(100% – 2px);”>

Instagram Japanさん(@instagramjapan)が投稿した写真

中央寄せ方法

上の画像のままでは左寄せのままですね?

次は中央に寄せてあげましょう!

こちらもコード内のある文字列を変更します。

margin: 1px

この「1px」「auto」に置き換えます。

「margin: 1px」はサイズ変更のときに使った「max-width:658px」のすぐ前にあります。
※4/18追記:現在はこの方法では中央寄せにできないようなので、下の方に別の中央寄せ方法を記載しました。そちらを御覧ください。

中央に寄せることができました!

px; padding:0; width:99.375%; width:-webkit-calc(100% – 2px); width:calc(100% – 2px);”>

Instagram Japanさん(@instagramjapan)が投稿した写真

2017/4/18追記:突然上記の方法では中央寄せにできなくなってしまいました。原因は分かりませんが下記の方法でも中央寄せにできましたので、代わりにこちらの方法をお使いいただけたらと思います。

001: <div align="center">
002: ###Your Copied Instagram generated code goes here###
003: </div>

インスタグラムの埋め込みコード全体を

<div align="center">と</div>

で囲むことで中央寄せにできました。

px; padding:0; width:99.375%; width:-webkit-calc(100% – 2px); width:calc(100% – 2px);”>

まとめ

埋め込みは右下の「・・・」を選択してしまえば後は画面の指示通りで簡単でしたね!

サイズ変更と中央寄せも貼り付けコードの一部を書き換えるだけです。

手軽にできるのであなたのブログを見やすくおしゃれにしてしまいましょう!

関連記事

  1. 【共有以外】エバーノートをiPhoneやAndroidで無料の…
  2. TV用とPC用HDDの違いは?フォーマットできない時の対処法
  3. CDの曲をiPhoneに転送するには?PCが無いときは?
  4. 動画の埋め込みコードと共有の違いは?メールとSNSの見え方も
  5. アップロード時の選択画面でファイルが表示されない原因と対処法
  6. 公衆無線LANを安全に使う方法やセキュリティ対策は?なりすましの…
  7. フレッツ光ギガファミリーとギガラインの違いは?変更方法は?
  8. ゆうちょダイレクトプラスとは?メリットデメリットや違いは?…

スポンサーリンク

PAGE TOP