トップタイトル|インスタグラム使い方
基本埋め込みサイト表示
最終更新日:
6,060 view
instagramの埋め込みタグでサイトやブログに写真を表示させる方法

インスタグラム(instagram)には埋め込みタグがあり、これを使えば自身のブログやサイトに簡単に投稿写真を表示させる事ができます。


自分が投稿している写真だけでなく、友達やフォローしている知り合い、芸能人の投稿までも埋め込みタグは利用できます。


今回は、埋め込みタグの取得方法やサイズ調整の方法などを解説します。




疑問が残っている時はこちら

インスタグラムの埋め込みタグを取得する方法


インスタグラムで公開されている埋め込みタグはアプリから取得する事ができないです。取得できるのはweb版からのみとなってます。


web版であればPC(パソコン)からでもスマホからでも取得可能なので以下の方法で埋め込みタグの取得を行いましょう。


  1. インスタグラムのweb版にアクセス
  2. web版はこちら



  3. サイトやブログに埋め込みたい写真画面を開く

  4. インスタグラムの埋め込みタグを取得する方法



  5. 右下の「・・・」をタップ

  6. インスタグラムの埋め込みタグを取得する方法



  7. 「埋め込み」をタップ

  8. インスタグラムの埋め込みタグを取得する方法



  9. 埋め込みタグが表示されるので選択してコピー

  10. タグをコピーする際に「キャプションを追加」にチェックを入れておけばハッシュタグも一緒に表示されるようになります。


    インスタグラムの埋め込みタグを取得する方法



  11. サイトやブログに貼り付け

  12. 埋め込みとはhtmlタグをコピーしてサイトに貼り付ける必要があるので、htmlが修正できるページでなければなりません。


    ブログやwordpress(ワードプレス)などに貼り付ける場合は間違えないように注意して下さい。




    問題なく貼り付けが完了すると以下の様にページに埋め込まれた形を作れます。




これでお気に入りの写真をサイトに埋め込む事ができます。





疑問が残っている時はこちら

埋め込みタグで表示される写真のサイズ調整方法


埋め込みタグを使って表示させた写真はそのままだとかなり大きなサイズで表示されます。


画面いっぱいに表示されるのでサイトによっては不格好な感じに見える事もあります。


そんな時は埋め込みタグ内のタグ情報を修正してサイズ調整を行いましょう。


サイズ調整は以下の方法で行えます。


埋め込みタグはcssでサイズ調整されています。


コピーしたタグをテキストなどに貼り付けて「max-width:658px」の部分を好きな数字に変更して下さい。


この数字部分で最大のサイズ調整がされるので「max-width:300px」とすればスマホの画面に収まるサイズの大きさに調整できます。


また、「max-width:80%」とすれば画面サイズの80%の大きさで写真が表示されるようになります。



【執筆者】makise



この記事はお役に立ちましたか?

インスタグラムに関するトラブルや不具合情報、困った時の対策をお知らせするツイッターアカウントです。 裏ワザや最新情報、便利ネタ等もお送りするのでフォローしてお役立てください。



同じカテゴリの人気記事
インスタグラムを見るだけの方法!ログインなしでサイトから見れます
インスタグラムを見るだけの方法!ログインなしでサイトから見れます

インスタグラムの登録やログインをせずに見るだけの方法を探してる方は多いです。 例えば、現在はインスタのweb版で写真を見ようとするとログイン画面が表示されて写真が見れないという状態...
最終更新日:2024-02-14
見るだけ 方法 サイト アプリ ログイン
インスタでURLリンクのコピー方法!リンクコピーできない原因も解説します
インスタでURLリンクのコピー方法!リンクコピーできない原因も解説します

インスタグラムにはプロフィールURLや投稿写真のURL、そして埋め込みコードのURLなど様々なURLがあります。 インスタのリンクコピーとは、それらのURL(フィード投稿のURLやプロフィールのU...
最終更新日:2024-02-28
url リンク コピー 方法 できない
インスタでスクショしたら通知でバレる!DMで機内モードでも通知されるので注意です
インスタでスクショしたら通知でバレる!DMで機内モードでも通知されるので注意です

インスタグラムでは写真や動画を保存できないようになっているためスクショ(スクリーンショット)を使って写真保存している方もいるでしょう。 多くの方が気になるのは、『インスタでお気...
最終更新日:2020-08-06
スクショ バレる 通知 機内モード
インスタで投稿後に写真追加できる?後から追加編集できる項目を解説
インスタで投稿後に写真追加できる?後から追加編集できる項目を解説

インスタで投稿後に写真追加ができるのか気になる方は多いでしょう。 写真追加は状況によって出来る時と出来ない時があります。 このページではインスタで写真追加ができるのか解説しま...
最終更新日:2024-03-01
投稿 写真 追加 投稿後 後から
インスタで『オンライン中』の意味や表示・非表示の設定方法まとめ
インスタで『オンライン中』の意味や表示・非表示の設定方法まとめ

インスタグラムのDM(ダイレクト)では過去にメッセージをやり取りした人のログイン状況がわかるオンライン機能がついています。 オンライン機能は2018年1月に導入された機能で、相手のオン...
最終更新日:2020-08-05
オンライン 意味 非表示 設定 方法
インスタでシェアの仕方!他人の投稿もシェアできます
インスタでシェアの仕方!他人の投稿もシェアできます

インスタグラムには他のSNSに投稿写真をシェアする為の機能がついています。 シェアのやり方はいくつかあって、自分で投稿した写真をSNSにシェアする時や他人が投稿した写真をSNSにシェアす...
最終更新日:2024-03-04
シェア 方法 仕方 投稿 まとめ
インスタのクリップボードとは?クリップボードはどこにあるのか解説
インスタのクリップボードとは?クリップボードはどこにあるのか解説

インスタでプロフィールURLをコピーすると『リンクがクリップボードにコピーされました』と表示されます。 この時の『クリップボード』というのがよくわからないという方が多いようです。 ...
最終更新日:2024-03-01
クリップボード どこにある 確認 方法
インスタで共有はどこ?共有ボタンでアカウントや写真共有できます
インスタで共有はどこ?共有ボタンでアカウントや写真共有できます

インスタで共有ボタンがどこにあるのか気になる方も多いでしょう。 共有ボタンを使えば写真の共有やアカウントの共有も簡単に行えます。 このページではインスタの共有について解説しま...
最終更新日:2023-04-18
共有 どこ ボタン アカウント 写真
instagramの自己紹介文コメントの書き方と英語参考例
instagramの自己紹介文コメントの書き方と英語参考例

インスタグラム(instagram)ではプロフィールページがあって、そこに自己紹介コメントを書く事ができます。 自己紹介コメントは基本的に自由に入力ができる場所なので自分の個性を出す事が...
最終更新日:2016-09-11
自己紹介 書き方 英語
インスタでログインリンクのメールに画像だけが添付される時の対処方法
インスタでログインリンクのメールに画像だけが添付される時の対処方法

インスタでログインパスワードを忘れてログインできない時や強制ログアウトになってログインできなくなったというケースがあります。 そんな時に使うのがログインリンクのメールです。 ...
最終更新日:2019-11-19
ログイン メール 画像 添付
instagramのアプリが起動しない時の対処方法
instagramのアプリが起動しない時の対処方法

インスタグラム(instagram)が起動しない、起動してもすぐに落ちるという現象が時々発生します。 私もiphone6を使用しているのですが、数ヶ月に一回程そういう現象になった事があります。 ...
最終更新日:2016-10-12
起動しない アプリ 方法
インスタのメンションとは?メンションの意味や通知や設定方法など解説します
インスタのメンションとは?メンションの意味や通知や設定方法など解説します

インスタにはメンションという機能があります。 メンションを使えば投稿を見てもらいやすくなります。 このページではメンションについて解説します。 インスタのメンションとは何なの...
最終更新日:2022-06-29
メンション 意味 やり方 設定 方法


 


 



シェア