はいどーもー

ブロガーのひろたつです。

今回は、「インスタグラムの画像をブログに挿入する方法」をシェアできればと思います。

宜しくお願い致します。

はじめに

あらためまして、はいどーもです。

ブロガー兼ユーチューバーのひろたつ(@hirotatsuuu)です。

今回のトピックは「インスタグラムの画像をブログに挿入する方法」です。

では、やっていきましょ〜

ブログにインスタグラムの画像を入れたい。。。

みなさん、ブログ書いてますか?

書いてますよね?

書いてますね。

そんなブログに毎回画像をアップロードするの、めんどくさいなって思いませんか?

インスタグラムに投稿した画像と同じ画像をブログにもアップロードするのか〜ってなりますよね。

僕はなります。

というわけで、今回は、「インスタグラムの画像をブログに挿入する方法」をシェアしようと思います。

つまりは、インスタの投稿を自分のWEBサイトに埋め込むってことです。

簡単なので、ぜひ、自分のブログを持っている人は試してみてください。

インスタの投稿を埋め込む方法

まず、PCでブラウザを開いて、、

インスタグラムにアクセスしましょう。

https://www.instagram.com/

インスタグラムは手軽に「その瞬間」をシェアするというコンセプトを持っているので、PCからは投稿できないんですよね〜

投稿させてくれたっていいじゃんかね〜(笑)

インスタグラムにアクセスしたら、

自分のアカウントのトップに行きます。

インスタグラムのマイページ

インスタグラムのマイページ

次は、ブログに挿入したい投稿に行きます。

ま、とりあえず、自分のお気に入りの投稿をポチッとしてみましょう。

インスタグラムの自分の投稿

インスタグラムの自分の投稿

そんで、その次は、右下にある3つの点のところをクリックします。

インスタグラムの投稿メニュー

インスタグラムの投稿メニュー

そしたら、ダイアログが出てくると思うので、その中の「埋め込み」をクリック!

インスタグラムの投稿埋め込みコード

インスタグラムの投稿埋め込みコード

すると、、選択したインスタの投稿の埋め込みコードが出てくると思います。

そいつを、コピーしちゃいます。

んで、そのインスタの投稿の埋め込みコードを自分のブログの挿入したいところに貼り付ける。だけ。

こんな感じです。↓↓↓

<p>
</p>

<p>
  はい、完成、!
</p>

<p>
  ブログに、インスタグラムの画像を挿入できました!
</p>

<p>
  以上ですね。
</p>

<p>
  とっても簡単です。<br /> 難しいことは何もありません。<br /> 一瞬で出来ちゃいますね。
</p>

<h2>
  <span id="i-4">外部のアプリを使う方法もあります</span>
</h2>

<p>
  自分でインスタグラムにアクセスして、埋め込みコードをコピーして、それを貼り付けて、、というのが面倒な人は、
</p>

<p>
  外部のアプリを使う方法もあります!
</p>

<p>
  <a href="https://snapwidget.com/" rel="noopener" target="_blank">SnapWidget</a>や<a href="http://instawidget.net/" rel="noopener" target="_blank">InstaWidget</a>など色々とツールはありますが、今回は、InstaWidgetの使い方をシェアしようと思います。
</p>

<h3>
  <span id="InstaWidget">InstaWidgetを使って自分のインスタアカウントをブログに埋め込む</span>
</h3>

<p>
  InstaWidgetのサイトはこちら。<br /> → <a href="http://instawidget.net/" rel="noopener" target="_blank">http://instawidget.net/</a>
</p>

<p>
  使い方はほんとに簡単かつシンプルです。
</p>

<p>
  まずは、サイトにアクセスします。
</p>

<div id="attachment_772" style="width: 3370px" class="wp-caption aligncenter">
  <img src="images/uploads/2018/10/25a88fb4c7e5dcb3a813b9ec821327cc.png?resize=3360%2C2100&#038;ssl=1" alt="InstaWidgetのトップページ" width="3360" height="2100" class="size-full wp-image-772" srcset="images/uploads/2018/10/25a88fb4c7e5dcb3a813b9ec821327cc.png?w=3360&ssl=1 3360w, images/uploads/2018/10/25a88fb4c7e5dcb3a813b9ec821327cc.png?resize=300%2C188&ssl=1 300w, images/uploads/2018/10/25a88fb4c7e5dcb3a813b9ec821327cc.png?resize=768%2C480&ssl=1 768w, images/uploads/2018/10/25a88fb4c7e5dcb3a813b9ec821327cc.png?resize=1024%2C640&ssl=1 1024w, images/uploads/2018/10/25a88fb4c7e5dcb3a813b9ec821327cc.png?resize=304%2C190&ssl=1 304w, images/uploads/2018/10/25a88fb4c7e5dcb3a813b9ec821327cc.png?resize=282%2C176&ssl=1 282w, images/uploads/2018/10/25a88fb4c7e5dcb3a813b9ec821327cc.png?w=2000&ssl=1 2000w, images/uploads/2018/10/25a88fb4c7e5dcb3a813b9ec821327cc.png?w=3000&ssl=1 3000w" sizes="(max-width: 1000px) 100vw, 1000px" data-recalc-dims="1" />

  <p class="wp-caption-text">
    InstaWidgetのトップページ
  </p>
</div>

<p>
  そして、「早速作ってみる」をクリック。または、「無料インスタブログパーツ作成」をクリックしても同じ画面に遷移します。
</p>

<div id="attachment_773" style="width: 3370px" class="wp-caption aligncenter">
  <img src="images/uploads/2018/10/eee59406538ffc63c836ee6c373cbdce.png?resize=3360%2C2100&#038;ssl=1" alt="InstaWidgetの埋め込み作成" width="3360" height="2100" class="size-full wp-image-773" srcset="images/uploads/2018/10/eee59406538ffc63c836ee6c373cbdce.png?w=3360&ssl=1 3360w, images/uploads/2018/10/eee59406538ffc63c836ee6c373cbdce.png?resize=300%2C188&ssl=1 300w, images/uploads/2018/10/eee59406538ffc63c836ee6c373cbdce.png?resize=768%2C480&ssl=1 768w, images/uploads/2018/10/eee59406538ffc63c836ee6c373cbdce.png?resize=1024%2C640&ssl=1 1024w, images/uploads/2018/10/eee59406538ffc63c836ee6c373cbdce.png?resize=304%2C190&ssl=1 304w, images/uploads/2018/10/eee59406538ffc63c836ee6c373cbdce.png?resize=282%2C176&ssl=1 282w, images/uploads/2018/10/eee59406538ffc63c836ee6c373cbdce.png?w=2000&ssl=1 2000w, images/uploads/2018/10/eee59406538ffc63c836ee6c373cbdce.png?w=3000&ssl=1 3000w" sizes="(max-width: 1000px) 100vw, 1000px" data-recalc-dims="1" />

  <p class="wp-caption-text">
    InstaWidgetの埋め込み作成
  </p>
</div>

<p>
  そして、ユーザ名に自分のインスタアカウントのユーザIDを入れましょう。
</p>

<p>
  とりあえず、これだけで、「プレビュー」を見てみてください。
</p>

<p>
  それっぽいインスタグラムの埋め込み後のイメージが表示されます。
</p>

<p>
  これで良ければ、「埋め込みコードを取得」をクリックして、埋め込みコードをコピーしましょう。
</p>

<div id="attachment_774" style="width: 3370px" class="wp-caption aligncenter">
  <img src="images/uploads/2018/10/7fab7c68ae552ff4ada6b2ba5ff13056.png?resize=3360%2C2100&#038;ssl=1" alt="InstaWidgetの埋め込みコード取得" width="3360" height="2100" class="size-full wp-image-774" srcset="images/uploads/2018/10/7fab7c68ae552ff4ada6b2ba5ff13056.png?w=3360&ssl=1 3360w, images/uploads/2018/10/7fab7c68ae552ff4ada6b2ba5ff13056.png?resize=300%2C188&ssl=1 300w, images/uploads/2018/10/7fab7c68ae552ff4ada6b2ba5ff13056.png?resize=768%2C480&ssl=1 768w, images/uploads/2018/10/7fab7c68ae552ff4ada6b2ba5ff13056.png?resize=1024%2C640&ssl=1 1024w, images/uploads/2018/10/7fab7c68ae552ff4ada6b2ba5ff13056.png?resize=304%2C190&ssl=1 304w, images/uploads/2018/10/7fab7c68ae552ff4ada6b2ba5ff13056.png?resize=282%2C176&ssl=1 282w, images/uploads/2018/10/7fab7c68ae552ff4ada6b2ba5ff13056.png?w=2000&ssl=1 2000w, images/uploads/2018/10/7fab7c68ae552ff4ada6b2ba5ff13056.png?w=3000&ssl=1 3000w" sizes="(max-width: 1000px) 100vw, 1000px" data-recalc-dims="1" />

  <p class="wp-caption-text">
    InstaWidgetの埋め込みコード取得
  </p>
</div>

<p>
  もし、もっと自分の思うようにアレンジしたいという場合は、好きなようにアレンジしちゃってください。
</p>

<p>
  幅の大きさや、様々な表示非表示などいろいろと設定できます。
</p>

<p>
  そんなこんなで、埋め込みコードを取得できたら、早速自分のブログに貼り付けて見てみてください。
</p>

<p>
  こんな感じです。↓↓↓
</p>

<p>
  <!-- InstaWidget -->

  <br /> <a href="https://instawidget.net/v/user/hirotatsuuuu" id="link-6cec734095632b60c0c43589520770066639903798fbe9a69f7aab0398aeb5b7">@hirotatsuuuu</a><br />
</p>

<p>
  はい、完成。
</p>

<p>
  できましたよね?<br /> 簡単でしたよね?
</p>

<p>
  以上です。
</p>

<h2>
  <span id="i-5">おわりに</span>
</h2>

<p>
  今回は、「ブログにインスタグラムの画像を挿入する方法」と題して、自信のWEBサイトにインスタの投稿を埋め込む方法をシェアしました。
</p>

<p>
  とっても簡単にできちゃいます。
</p>

<p>
  最近は、便利な世の中になってきましたね〜(笑)<br /> 外部ツールは内部的にインスタグラムのAPIを叩いてるだけだと思いますが、、それだけでこんなにも簡単と感じられるとは、、楽ちんや〜
</p>

<p>
  そんなこんなで、以上です。
</p>

<p>
  あ、あと、、もし良かったら、他の投稿も見てみていただけると嬉しいです。<br /> WWOOFというサービスを使ってお金を掛けずにニュージーランドでのんびり暮らしているブログを毎日更新してます(笑)<br /> 例えばこんな感じのやつ〜
</p>

<blockquote class="wp-embedded-content" data-secret="aKQmTf6l5i">
  <p>
    <a href="https://hirotatsu.me/newzealand-9/">WWOOFの仕事で鶏小屋を作っています</a>
  </p>
</blockquote>

<p>
</p>

<p>
  ま、気が向いたらで(笑)
</p>

<p>
  以上、ひろたつでした。<br /> ばいなら〜
</p>

<div style="font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;">
</div>