簡単に写真や動画をシェアできるインスタグラムは今や大人気！ワードプレスなどブログで記事を書く時も、ブログ内にインスタグラムを貼り付けたりすれば記事の質も上がってとても楽しくなりますね。

ここでインスタグラムを記事に貼り付ける場合、スクリーンキャプチャで画像に保存してそれを貼り付ける、という記事も見かけますが、これは実はインスタグラムの利用規約違反にもなるようです。（詳しくはこの記事の下方を見てみてください）

ここでは

  • インスタグラムのブログへの貼り付け方、
  • 横幅の指定の仕方やキャプション（説明文）を非表示にして画像だけ表示する方法
  • また、埋め込みコードを使う場合や簡単便利なショートコードを使った貼り付け方

などのご紹介です。

関連記事
・ツイッターの貼り付け方！ツイートをurlや埋め込みコードでカスタマイズ
・YouTubeの貼り付け方法 – 時間指定やサイズ指定はこうやればOK！

インスタグラムの貼り付け方

ブログの記事にインスタグラムの投稿を貼り付けるには、以下の３種類があります。

  • １）インスタグラムのURLを単純に貼る
  • ２）埋め込みコードを貼る
  • ３）ショートコードを利用する

最も簡単なのが、１）のURLの利用。

この場合、インスタグラムの投稿は記事の横幅一杯に表示されて結構大きい！となる場合もあり、横幅を指定したい場合には、２）か３）を、また更に画像だけの表示にしたい（説明文であるキャプションを非表示にしたい）という場合には、やっぱり２）か３）を活用する、となります。

ただ２）の埋め込みコードを使う場合は、記事投稿画面でテキストに切り替えたり、また貼り付けるコード（文字列）が異様に長くなったりで、これがどうもイヤ、という場合には３）を使う、という感じ。

改めてまとめてみると以下のようになりますね。

  • １）インスタグラムのURLを単純に貼る
    • もっとも単純。ただし、横幅が非常に大きい場合がある
  • ２）埋め込みコードを貼る
    • 横幅を指定したい場合
    • 画像だけ表示したい（説明文であるキャプションを非表示にしたい）場合
      （「テキスト」モードで貼り付ける必要あり）
  • ３）ショートコードを利用する
    • 横幅を指定したい場合
    • 画像だけ表示したい（説明文であるキャプションを非表示にしたい）場合
    • 貼り付けるコードをすっきりさせたい場合
      （「ビジュアル」モードでも「テキスト」モードでもどちらでも貼り付けOK）

２）の「埋め込みコード」と３）の「ショートコード」では、２）の埋め込みコードが異様に長いので、３）のショートコードの方が非常にスッキリする、という違いになります。

３）のショートコードは、実際に記事を書いている時に、あれ？どうやって書けば良かったっけ？となることも多いので、辞書などに登録して簡単にその形式を引っ張り出せるのが良いですね。（登録したものそれ自体を忘れたりすることも良くありますが（それは私です笑））

では、ここでは報知スポーツのインスタグラムからフィギュアスケート本田真凛さんの以下の投稿を例にとって、まずはURLの確認の仕方、その後１）から３）について各々見て行きましょう。

（この投稿のURLは以下
https://www.instagram.com/p/Ba2J3gJBsRc/?taken-by=hochi_photo）

URLの確認の仕方

まずはインスタグラムの投稿のURLの取得です。

投稿のURLの確認は簡単で、投稿をクリックして、表示されたページのURLを見ればよいですね。

インスタグラムの投稿を適当なところでクリック！
↓↓↓↓↓↓

ブラウザの一番上あたり（アドレスバー）にURLが表示される

あとはこのURLをコピーすれば、インスタグラムの投稿のURLは取得できます。

１）URLで貼り付ける

上の例で取得したインスタグラムの投稿のURLは、
https://www.instagram.com/p/Ba2J3gJBsRc/?taken-by=hochi_photo

これを普通にワードプレスの記事に貼り付けます。

インスタグラムの投稿を貼り付けたい場所を1行空けておく
↓↓↓↓↓↓

記事にURLを普通に貼り付けます
↓↓↓↓↓↓

自動でインスタグラムの投稿が表示される

URLを貼り付ければインスタグラムの投稿が表示されるので、最も簡単な貼り付け方です。
（画像が表示されなかったり、貼り付け方によってはそもそもこういった表示にならない場合もありますが、プレビューで確認してみるとしっかり表示されてます）

ただこの場合、インスタグラムの投稿が横幅いっぱいに表示され結構巨大！となる時もあったりで、横幅を小さくしたい場合には、以下の埋め込みコードを使います。

２）埋め込みコードで貼り付ける

「埋め込みコード」とは、インスタグラムに用意されているもので、以下の手順で簡単に取得できます。

インスタグラムの投稿を適当なところでクリック！
↓↓↓↓↓↓

インスタグラムの投稿を表示されるので、下にある「・・・」をクリック！
↓↓↓↓↓↓

「埋め込み」をクリック！
↓↓↓↓↓↓

埋め込みコードが表示されるので「埋め込みコードをコピー」をクリック
↓↓↓↓↓↓

「埋め込みコードがコピーされました」と表示され、埋め込みコードのコピー完了
↓↓↓↓↓↓

続いてワードプレスのブログの記事作成画面に戻ります。
まず「テキスト」モードに変更します。

「テキスト」をクリック！
↓↓↓↓↓↓

インスタグラムの投稿を表示したいところを1行空ける
↓↓↓↓↓↓

インスタグラムの投稿を表示したいところにコピーした埋め込みコードを貼り付け

後はプレビューなどで確認してみると．．．

はい、しっかり表示されました。
手数が多いように見えますが、実際やって見れば非常に簡単ですね。

横幅を調整したい

続いて、横幅を少し小さくしたい！という場合はどうするか。

実際にコピーして貼り付けた埋め込みコードは以下ですが、

  • <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;">
  • （以下省略）

横幅を調整するにはこの中にある「max-width:658px;」の「658」を変えればOK。

例えば、少し狭めたいなどで「400」ぐらいにすると、実際のコードは以下のようになりますね。

  • <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:400px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;">

    （以下省略）

これをワードプレスの記事に貼り付けて見てみると以下のようになります。

「max-width:400px;」に変更して貼り付けた

横幅が狭まってますね！おさまりが良い感じです。

キャプションを消して画像だけにする

画像の下に「いいね」「コメント」「説明」がありますが、これを非表示にすることもできます。

埋め込みコードを取得する時の画面が以下ですが、

ここで「キャプションを追加」のチェックを外して「埋め込みコードをコピー」をクリック。その後、コピーされたコードを記事に貼り付ければOKです。

以下のような表示になりますね。

３）ショートコードで貼り付ける

最後にショートコードの利用です。

上で見た「埋め込みコード」でも良いですが、貼り付ける文字列がやたらに長くて「なにか嫌」（笑）という場合には、ショートコードを使えばOK.

ショートコードとは、行ってみれば”簡単な形式を使うとそれ用に表示される”というもので、インスタグラムの場合、以下の形式になります。

参考：Instagram - Embedding （英語）

LINKはインスタグラムの投稿のURLで、本田真凛さんの投稿の例ではそのURLを入れると、以下になりますね。

貼り付けるのは、ワードプレスの記事投稿で「ビジュアル」でも「テキスト」でもどちらでもOK。実際貼り付けると以下のような感じです。

ショートコードを貼り付けてみた（普通にビジュアルモードで貼り付けてます）
プレビューで見てみると、しっかり表示されているのが分かります。

横幅の調整の仕方

ここで横幅を小さくしたい、という場合には、以下のように「width=xxx」（xxxは指定したい横幅の数値）を半角スペース後に入れればOK。

（ここでは横幅を400ぐらいに、ということで400としています）

実際には以下を同様に貼り付ければ良いですね。

キャプションを消す

更にキャプション（説明文）を非表示にして画像だけ表示したい！という場合には、「hidecaption=true」を半角スペース後に追加して以下の形式になります。

実際には以下のような感じです。

（横幅を400にして、更にキャプションを非表示）

記事に貼り付けて表示させてみると、

ショートコードを貼り付けてみたところ。
プレビューで見てみると、横幅もしっかり小さくなってるし画像だけの表示になってる！

ショートコードは簡単な記述ですっきりしてて良いですね。^-^）

スクリーンキャプチャについて

インスタグラムにある画像をブログに使いたい、貼り付けたい、ということで、ここで見てきたURLや埋め込みコード、ショートコードなどを使わずに、えい！とスクリーンキャプチャをして記事に貼り付けているものも見かけます。でもこれはどうやらNGのようです。

ツイッターでも同じことが言えますが、インスタグラムも利用規約を見ると以下のようになっています。

この利用規約にある「各種権利」では、

  • 投稿したものは全世界を対象として利用ができる
  • 共有範囲は設定できる

ということが書かれています。

Instagram - 利用規約 > 各種権利

Instagramは、利用者が本サービスに、またはこれを通じて投稿するいかなるユーザーコンテンツについても、その所有権を主張しません。ただし利用者は、利用者が本サービスに、またはこれを通じて投稿するユーザーコンテンツを、Instagramがhttp://instagram.com/legal/privacy/に掲載されている本サービスのプライバシーポリシー(第3条(「利用者情報の共有」)、第4条(「弊社による利用者情報の保存方法」)および第5条(「利用者情報に関する利用者の選択肢」)を含みますがこれに限りません)に従って利用する、非独占的かつ無料、譲渡可能かつ再許諾権可能な全世界を対象とした利用許諾を付与するものとします。利用者は、前述のプライバシーポリシーに記載されている方法で利用者のユーザーコンテンツおよびアクティビティ(利用者の写真を含みます)の共有範囲を選択することができます。

利用するにはプライバシーポリシーの内容に従って利用する、となっていて、そこでプライバシーポリシーにはどのように記載されているか見てみると、

3. 利用者の情報の共有 > 利用者自身のユーザーコンテンツの共有範囲

  • 本サービスへの投稿を目的に利用者が自発的に開示したあらゆる情報またはコンテンツ(ユーザーコンテンツなど)は他の利用者に公開され、利用者のプライバシー設定に従って管理されます。なお本サービスのプライバシー設定を変更するには、プロフィール設定を変更してください。他の利用者は、利用者が共有または公開したユーザーコンテンツを再共有できます。
  • 利用者が公開したユーザーコンテンツは、利用者のプロフィールおよびプライバシー設定に従い、他のユーザーがInstagramのAPIを使って検索できるコンテンツとなります。InstagramのAPIの利用については、本プライバシーポリシーの条項が組み込まれているAPI利用規約が適用されます。
  • 利用者が本サービスに投稿した情報を削除した場合でも、その情報のコピーは本サービスのキャッシュおよびアーカイブページにて閲覧できる情報として残る場合があるほか、他のユーザーまたはサードパーティーがInstagramのAPIを使ってその情報をコピーまたは保存している場合があります。

利用者が公開したユーザーコンテンツ（投稿）は他の人が利用できるが、InstagramのAPI（利用に際してインスタグラムが指定する方法）を使うこと、とあります。

つまり、スクリーンキャプチャなどではなく、インスタグラムがブログなどに貼り付けるために公開している方法（この記事で紹介している方法）である、

  • １）URLの貼り付け
  • ２）埋め込みコードの貼り付け
  • ３）ショートコードの利用

を使う必要がある、ということになりますね。

インスタグラムを貼り付ける！のまとめ

インスタグラムをブログの記事に貼り付ける方法は以下3つ

  • １）インスタグラムのURLを単純に貼る
    • もっとも単純。ただし、横幅が非常に大きい場合がある
  • ２）埋め込みコードを貼る
    • 横幅を指定したい場合
    • 画像だけ表示したい（説明文であるキャプションを非表示にしたい）場合
  • ３）ショートコードを利用する
    • 横幅を指定したい場合
    • 画像だけ表示したい（説明文であるキャプションを非表示にしたい）場合
    • 貼り付けるコードをすっきりさせたい場合

一般にはこれらの方法を使わずにスクリーンキャプチャして、それを画像として保存してブログの記事に貼り付ける、というものも見かけますが、インスタグラムの利用規約からすると、上記3つのいずれかを使う必要がある、ということが分かります。

ツイッターでも同様の規約があり、ブログに貼り付けるときには同じような形になりますね。

今ではいろいろなサービスがありますが、何かシェアしたい、という場合には、そのサービスの利用規約をまず読んで、正しい利用方法をして行きましょう。

ブログでの収益化をはかりたい！というの場合には、以下のメルマガにも登録してみてくださいね。

早期退職して海外で奮闘する JIN のメールマガジン

無料メールマガジンの詳しい内容を見る！

時間や場所に縛られず稼いだJINが教える

～ 最短で月収10万円稼げるようになる方法 ～

お名前（全角文字）

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

迷惑メールは一切配信されませんので、ご安心くださいね

自らの手で未来を変える力を手に入れる！