WordPressのブログ記事にインスタグラムを貼り付けたい！という場合の貼り付け方を解説します。
WordPressを使っているならショートコードという便利な機能があり、インスタグラム投稿のURLを記述するだけで埋め込むことができます。
キャプションの表示のあるなしや、サイズ指定をするには、埋め込みコードを使う方法や、簡単便利なショートコードを使った貼り付け方も知っておくと思い通りに表示させることができます。
さっそく見ていきましょう。
ワードプレスのブログ記事にインスタグラムを貼り付ける方法
ブログの記事にインスタグラムの投稿を貼り付けるには、以下の３種類があります。
ポイント
- インスタグラムのURLを単純に貼る
- もっとも簡単です。ただし、横幅が非常に大きい場合がある
- 埋め込みコードを貼る
- 横幅を指定したい場合
- 画像だけ表示したい（説明文であるキャプションを非表示にしたい）場合
（「テキスト」モードで貼り付ける必要あり）
- ショートコードを利用する
- 横幅を指定したい場合
- 画像だけ表示したい（説明文であるキャプションを非表示にしたい）場合
貼り付けるコードをすっきりさせたい場合
（「ビジュアル」モードでも「テキスト」モードでもどちらでも貼り付けOK）
一つずつ見ていきます。
URLを貼る方法
インスタグラムの投稿のURLを取得します。
投稿のURLの確認は簡単で、投稿をクリックして、アドレスバー表示されたページのURLを見ればよいです。
URLで貼り付ける
上の例で取得したインスタグラムの投稿のURLは、
これを普通にワードプレスの記事に貼り付けます。
インスタグラムの投稿を貼り付けたい場所を1行空けておいて、そこにURLを貼り付け。
貼り付けると、以下の表示に変わります。自動でインスタグラムの投稿が表示されています。
プレビューで確認してみると
しっかり貼り付けできています。
URLを貼り付ければインスタグラムの投稿が表示されるので、最も簡単な貼り付け方です。
ただこの場合、インスタグラムの投稿が横幅いっぱいに表示され「大きすぎる！」こともあったりで、横幅を小さくしたい場合には、次の埋め込みコードを使います。
埋め込みコードで貼り付ける
「埋め込みコード」とは、インスタグラムに用意されているもので、以下の手順で簡単に取得できます。
インスタグラムの投稿を表示して、右上の「・・・」をクリック！
「・・・」の場所は異なるかもしれません。
「埋め込み」をクリック！
ここで、「キャプションを追加」する場合はチェックを入れておきます。
キャプションを非表示にしたい場合はチェックを外します。
その後、「埋め込みコードをコピー」をクリック！
以下のように貼り付けました。
キャプションを追加にするとこんな感じ。
キャプションを追加のチェックを外すと以下のとおり
キャプションを非表示にすることができました。
ショートコードで貼り付ける
最後にショートコードで貼り付ける方法です。
上で見た「埋め込みコード」でも良いですが、貼り付ける文字列がやたらに長くて嫌だ！という場合には、ショートコードを使えばOKです。
以下はWordPressのサポートのインスタグラムのページです。
https://en.support.wordpress.com/instagram/#instagram-integration
インスタグラムの場合、以下の形式になります。
ポイント
先程のインスタの風景画像のURLに当てはめると以下のようになります。
- 貼り付けるのは、ビジュアルでもテキストでも大丈夫との情報もあったのですが、自分の場合、ビジュアルでは表示されず、テキストなら表示できました。
横幅の調整の仕方
ここで横幅を小さくしたい、という場合には、以下のように「width=xxx」（xxxは指定したい横幅の数値）を半角スペース後に入れればOK。
ポイント
横幅をしていしない場合、横幅いっぱいにインスタ画像が広がり大きい！って感じでしたが、横幅を320に指定してみると以下のとおり。
実際の記述はこちらで、テキストに貼り付けます。
プレビューで見てみると、以下のように幅が320に変わっています。
キャプションを消す
キャプション（説明文）を非表示にして画像だけ表示したい！という場合には、「hidecaption=true」を半角スペース後に追加して以下の形式になります。
ポイント
実際には以下の表記となります。
プレビューで見てみると、幅は320、キャプションは非表示になっています。
ショートコードは簡単な記述ですっきりしてて良いです。
スクリーンキャプチャについて
インスタ画像、ツイッター画像、You Tubeの静止画などをスクリーンキャプチャで切り取ってブログに掲載されている人も見かけますが、その方法はNGです。
利用者が公開したユーザーコンテンツ（投稿）は他の人が利用できるが、InstagramのAPI（利用に際してインスタグラムが指定する方法）を使うこと、とあります。
ツイッターにも同様の記述があります。
つまり、インスタグラムがブログなどに貼り付けるために公開している方法である、
- URLの貼り付け
- 埋め込みコードの貼り付け
- ショートコードの利用
を使う必要がある、ということになります。
まとめ
- インスタグラムのURLを単純に貼る
- もっとも簡単です。ただし、横幅が非常に大きい場合がある
- 埋め込みコードを貼る
- 横幅を指定したい場合
- 画像だけ表示したい（キャプションを非表示にしたい）場合
（「テキスト」モードで貼り付ける必要あり）
- ショートコードを利用する
- 横幅を指定したい場合
- 画像だけ表示したい（キャプションを非表示にしたい）場合
- 貼り付けるコードをすっきりさせたい場合
URLを貼るというのがもっともお手軽簡単ですが、大きく表示されすぎる場合があります。
そんなときは、他の2つの方法にしてみるのがいいでしょう。
インスタもツイッターも、「利用者が公開したユーザーコンテンツ（投稿）は他の人が利用できる」としていますが、利用規約に則って利用することは可能ということです。
ブログ記事にインスタやツイッターが載せられると、記事の質も上がりますし、訪問者もワクワクします。
ルールに則って正しく活用していきましょう。
また、更にネットで収益化していきたい、他の人とは一味違うブログ運営がしてみたい、という場合には以下のメルマガにも登録してみてください。