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

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



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



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





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



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



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




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


web版はこちら




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



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




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



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




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



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




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



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



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




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



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



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





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








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






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



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



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



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



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




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



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



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



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







スポンサーリンク


注目 いいね!が増えない…たった数分でいいね!を増やす人気サービスとは?


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

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

インスタグラム便利ツール

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



スポンサーリンク



同じカテゴリの人気記事
instagramのプロフィールで改行の仕方

instagramのプロフィールで改行の仕方

インスタグラム(instagram)のプロフィール編集画面で文章を改行したいのにできない。実は普通に改行できるのはandroid端末だけでiphoneでは改行できません。 iphoneでは通常「改行」とな...
2015-04-14
改行 仕方 プロフィール
instagramでURLのコピーや貼り付けに関する情報をまとめて解説

instagramでURLのコピーや貼り付けに関する情報をまとめて解説

インスタグラムにはプロフィールページのURLや投稿写真のURL、そして埋め込みコードのURLなど様々なURLがあります。 それぞれに役割や用途が違うので少し混乱する人も多いようです。 イン...
2015-08-18
urlリンク コピー 貼り付け
instagramのスクリーンショットは相手にばれる?

instagramのスクリーンショットは相手にばれる?

インスタグラムでは写真や動画を保存できないようになっているためスクショ(スクリーンショット)を使って写真保存している方が多いです。 そこで多くの方が気になるのは、『インスタグラ...
2015-02-11
スクリーンショット ばれる スクショ
instagramの自己紹介文コメントの書き方と英語参考例

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

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

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

インスタグラム(instagram)が起動しない、起動してもすぐに落ちるという現象が時々発生します。 私もiphone6を使用しているのですが、数ヶ月に一回程そういう現象になった事があります。 ...
2015-04-06
起動しない アプリ 方法
instagramで自動で消える写真や動画をダイレクトで送る方法

instagramで自動で消える写真や動画をダイレクトで送る方法

インスタグラム(instagram)のダイレクトに一度見た写真や動画が自動で消える機能が追加されました。 これはインスタグラムストーリーの様に24時間という制限ではなく、写真や動画を相手が...
2016-11-23
消える ダイレクト 方法
instagramの閲覧で履歴やばれる原因などのアプリ調査まとめ

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

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

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

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

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

インスタグラム(instagram)はiphone版、android版のアプリがそれぞれあります。 自分の使用しているスマホに合わせたアプリをダウンロードしてインストールするようにしましょう。 ■ipho...
2015-08-17
インストール 出来ない 方法

instagramのダイレクトメッセージに返信する方法

インスタグラム(instagram)で受け取ったダイレクトメッセージに返信する方法を紹介します。 1:インスタグラムを起動 2:左下の「ホーム」アイコンをタップ(家の形をしたアイコン)...
2015-02-06
ダイレクト メッセージ 返信
instagramで写真を見ると足跡は付くの?足跡アプリの存在とは?

instagramで写真を見ると足跡は付くの?足跡アプリの存在とは?

インスタグラム(instagram)は海外で生まれたSNSです。 実は海外のSNSって足跡機能がありません。facebookやツイッターなども足跡機能ってないですよね? それと同じです。 だからインス...
2015-02-06
足跡 ばれる 足跡アプリ
instagramでログイン時間や履歴を見る事はできますか?

instagramでログイン時間や履歴を見る事はできますか?

インスタグラム(instagram)でログイン時間やログイン履歴を見る事はできるのでしょうか? アプリ版、web版、PC版(パソコン版)などを調べてみましたが、結論から言うと過去のログイン...
2015-08-10
ログイン 時間 履歴
スポンサーリンク


 


新着記事


芸能人インスタ写真検索
芸能人インスタグラム自撮り写真一覧検索 芸能人インスタグラム動画一覧検索 芸能人インスタグラムツーショット写真一覧検索


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


人気アプリの使い方特集


シェア