トップタイトル|インスタグラム使い方
基本 埋め込み サイト 表示
公開日:2015-07-29|更新日:2016-11-28
4263 view
instagramの埋め込みタグでサイトやブログに写真を表示させる方法

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


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


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




疑問が残っている時はこちらアプリの質問箱▲TOPへ戻る

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


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


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


1:インスタグラムのweb版にアクセス

web版はこちら



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


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



3:右下の「・・・」をタップ


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



4:「埋め込み」をタップ


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



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


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


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



6:サイトやブログに貼り付け


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


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




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




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





疑問が残っている時はこちらアプリの質問箱▲TOPへ戻る

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


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


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


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


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


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


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


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


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



スポンサーリンク


利用者18,000人突破!(24時間) インスタを更に楽しむ!【厳選】無料ツール18選


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

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





同じカテゴリの人気記事
インスタグラムを見るだけの方法!登録もログインも不要で検索もできます

インスタグラムを見るだけの方法!登録もログインも不要で検索もできます

インスタグラムを見るだけで楽しみたいという方も増えているようですね。 インスタの利用者は世界中で7億人を突破しておりまだまだその人気が衰える気配はありません。 日本でもインスタ...
公開:2015-03-20|更新:2018-09-28
見るだけ 方法 まとめ 検索
インスタでURLのコピーや貼り付け方法!リンクコピーの仕組みもまとめました

インスタでURLのコピーや貼り付け方法!リンクコピーの仕組みもまとめました

インスタグラムにはプロフィールのURLや投稿写真のURL、そして埋め込みコードのURLなど様々なURLがあります。 それぞれに役割や用途が違うので少し混乱する人も多いようです。 ツイッタ...
公開:2015-08-18|更新:2019-07-18
url リンクコピー 貼り付け 方法 まとめ
インスタでスクショしたらバレる?通知の仕組みを機能別にまとめました

インスタでスクショしたらバレる?通知の仕組みを機能別にまとめました

インスタグラムでは写真や動画を保存できないようになっているためスクショ(スクリーンショット)を使って写真保存している方もいるでしょう。 多くの方が気になるのは、『インスタでお気...
公開:2015-02-11|更新:2019-08-01
スクショ バレる 通知 まとめ
インスタのシェア方法!シェアできない時の原因もまとめました

インスタのシェア方法!シェアできない時の原因もまとめました

インスタグラムには他のSNSに投稿写真をシェアする為の機能がついています。 シェアのやり方はいくつかあって、自分で投稿した写真をSNSにシェアする時や他人が投稿した写真をSNSにシェアす...
公開:2017-01-25|更新:2019-07-02
シェア 方法 まとめ
instagramの自己紹介文コメントの書き方と英語参考例

instagramの自己紹介文コメントの書き方と英語参考例

インスタグラム(instagram)ではプロフィールページがあって、そこに自己紹介コメントを書く事ができます。 自己紹介コメントは基本的に自由に入力ができる場所なので自分の個性を出す事が...
公開:2015-08-15|更新:2016-09-11
自己紹介 書き方 英語
instagramのアプリが起動しない時の対処方法

instagramのアプリが起動しない時の対処方法

インスタグラム(instagram)が起動しない、起動してもすぐに落ちるという現象が時々発生します。 私もiphone6を使用しているのですが、数ヶ月に一回程そういう現象になった事があります。 ...
公開:2015-04-06|更新:2016-10-12
起動しない アプリ 方法
インスタグラムの編集で写真の追加はできないの?

インスタグラムの編集で写真の追加はできないの?

インスタでは投稿した写真や動画それぞれに編集機能があります。 しかし編集のリンクを押して編集画面を開いても写真の編集などができません。 インスタの編集機能はどういう編集ができる...
公開:2017-06-15|更新:2019-07-15
編集 写真 追加
インスタで『オンライン中』の意味や表示・非表示の設定方法まとめ

インスタで『オンライン中』の意味や表示・非表示の設定方法まとめ

インスタグラムのDM(ダイレクト)では過去にメッセージをやり取りした人のログイン状況がわかるオンライン機能がついています。 オンライン機能は2018年1月に導入された機能で、相手のオン...
公開:2018-04-12|更新:2019-07-03
オンライン 意味 非表示 設定 方法
instagramの閲覧で履歴やばれる原因などのアプリ調査まとめ

instagramの閲覧で履歴やばれる原因などのアプリ調査まとめ

【2016年7月8日に記事を更新しました】 インスタグラム(instagram)の閲覧方法はいくつかありますが閲覧履歴やばれる仕組みはあるのでしょうか。 インスタグラムの閲覧について調査してみ...
公開:2015-08-19|更新:2016-09-12
閲覧 ばれる 履歴
instagramで機種変更の引き継ぎの為のログイン準備事項

instagramで機種変更の引き継ぎの為のログイン準備事項

インスタグラム(instagram)で引き継ぎをするにはあらかじめログインして各種情報の準備をしておく必要があります。 情報の準備と言ってもログインするための情報だけなのでたいした事はあ...
公開:2015-08-11|更新:2016-11-28
機種変更 引き継ぎ ログイン
instagramのインストール方法とインストール出来ない時のチェック

instagramのインストール方法とインストール出来ない時のチェック

インスタグラム(instagram)はiphone版、android版のアプリがそれぞれあります。 自分の使用しているスマホに合わせたアプリをダウンロードしてインストールするようにしましょう。 ■ipho...
公開:2015-08-17|更新:2016-10-07
インストール 出来ない 方法
instagramを見るだけで楽しみたい時の方法や仕組みまとめ

instagramを見るだけで楽しみたい時の方法や仕組みまとめ

インスタグラムを見るだけで楽しみたいという方も増えているようですね。 インスタの利用者は世界中で7億人を突破しておりまだまだその人気が衰える気配はありません。 日本でもインスタ...
公開:2017-09-21|更新:2018-03-10
見るだけ 方法 まとめ


 


新着記事


サイト内の記事を検索
カスタム検索


インスタお役立ち便利ツール
シェア