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. 源ノ明朝とは一体誰?読み方は?角ゴシックを参考に派生名も!
  2. WEBビリングと@(アット)ビリングの主な違いは運営会社…
  3. 自宅Wifiの安全性は?知らないと危険な2項目と安全強化3つ
  4. ツイッターライト(twitter lite)のアプリや使い方は?…
  5. 動画のダウンロードや保存の安全な方法は?有料と無料の違いも
  6. Win10のスリープモード設定変更方法は?画面電源との違い
  7. 【共有以外】エバーノートをiPhoneやAndroidで無料の…
  8. アップロード時の選択画面でファイルが表示されない原因と対処法

スポンサーリンク

知らないと損する!?
\今なら衝撃のWEBセミナーが無料!/


AIに奪われることのない究極の仕事
【人助けビジネス】

スポンサーリンク

PAGE TOP