![インスタグラムフィード設置](https://image.jimcdn.com/app/cms/image/transf/dimension=480x10000:format=jpg/path/sdcb4cad98bab1f4c/image/i6aa97f9f347f6d8b/version/1527229244/%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%B0%E3%83%A9%E3%83%A0%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E8%A8%AD%E7%BD%AE.jpg)
簡単!インスタグラムを表示
インスタグラムをJimdoホームページに載せたい方法。第2弾です。第1弾は無料で使えるSnapWidgetを紹介しました。
第2弾ではJimdoのコンテンツにある「インスタグラム(POWr Instagram Feed)フィード」を紹介。
お手軽に設置できますよ。お試しあれ!
初めて「インスタグラムフィード」を使う方向けの設置方法をご紹介しますね。
1、Jimdoホームページ上のインスタグラムを表示したい箇所で、「Instagramフィード」をクリックします。
最初は隠れてるので、「+コンテンツを追加」→「…その他のコンテンツ&アドオン」をクリックすると下の方に表示されます。
![Jimdoコンテンツ インスタフラムフィード](https://image.jimcdn.com/app/cms/image/transf/dimension=480x10000:format=jpg/path/sdcb4cad98bab1f4c/image/ia390f39019ba6da3/version/1527229267/jimdo%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84-%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%95%E3%83%A9%E3%83%A0%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89.jpg)
2、「Instagramフィード」コンテンツが表示されます。
手順は実は載っています。
では、1から。
1.ここをクリックして表示されるコードをコピー をクリックします。
![コードを取得](https://image.jimcdn.com/app/cms/image/transf/dimension=480x10000:format=jpg/path/sdcb4cad98bab1f4c/image/i2bfe0b682e989d16/version/1527229287/%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E5%8F%96%E5%BE%97.jpg)
3、コードが記載されているウィンドウが表示されます。
中にある3行の文字列がJimdoインスタグラムフィードに貼り付ける「コード」です。コードをコピーします。
右上の「Copy」ボタンを使うと簡単です。
![コードをコピー](https://image.jimcdn.com/app/cms/image/transf/dimension=480x10000:format=png/path/sdcb4cad98bab1f4c/image/i4a7d53f0e6c8c919/version/1527229297/%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E3%82%B3%E3%83%94%E3%83%BC.png)
4、コピーしたコードをJimdoに貼り付けます。
下のボックスへ「貼り付け」してください。
貼り付けたら右下にある「保存」をクリックします。
![コードを貼り付け](https://image.jimcdn.com/app/cms/image/transf/dimension=413x10000:format=jpg/path/sdcb4cad98bab1f4c/image/i9e7ab75a55e748fa/version/1527229325/%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91.jpg)
5、コードを保存すると、画面表示が変わってきます。
一番上の青いボタン「Edit Instagram Feed」をクリックします。
![「Edit Instagram Feed」設定開始](https://image.jimcdn.com/app/cms/image/transf/dimension=298x10000:format=jpg/path/sdcb4cad98bab1f4c/image/ie6b01af6aacc026b/version/1527229350/edit-instagram-feed-%E8%A8%AD%E5%AE%9A%E9%96%8B%E5%A7%8B.jpg)
![「Edit Instagram Feed」設定開始](https://image.jimcdn.com/app/cms/image/transf/dimension=480x10000:format=jpg/path/sdcb4cad98bab1f4c/image/i997af77215fbeaa3/version/1527229360/edit-instagram-feed-%E8%A8%AD%E5%AE%9A%E9%96%8B%E5%A7%8B.jpg)
6、画面表示が変わってくると思います。
ここから、インスタグラムフィードの設定を行います。
インスタグラム アカウントIDを入力したいので、「gettyphotography」に右側にある「>」をクリックします。
![アカウントID](https://image.jimcdn.com/app/cms/image/transf/none/path/sdcb4cad98bab1f4c/image/i43e318dcf3c83506/version/1527229388/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88id.jpg)
![インスタグラム アカウントID](https://image.jimcdn.com/app/cms/image/transf/dimension=480x10000:format=jpg/path/sdcb4cad98bab1f4c/image/i87383e7cab85cf7c/version/1527229379/%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%B0%E3%83%A9%E3%83%A0-%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88id.jpg)
7、一番上の「Social Feed Type」が「Instagram」になっていることを確認し、一つ下の「Enter a @usemame or #hashtag」の枠内に自分のインスタグラム アカウントIDを入力します。
その下では、「Max posts to display」では表示するインスタ写真の最大投稿数を指定できます。
![インスタグラム アカウントID](https://image.jimcdn.com/app/cms/image/transf/dimension=480x10000:format=jpg/path/sdcb4cad98bab1f4c/image/ibdff0eec1c75bff9/version/1527229402/%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%B0%E3%83%A9%E3%83%A0-%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88id.jpg)
![インスタグラム アカウントID](https://image.jimcdn.com/app/cms/image/transf/dimension=480x10000:format=jpg/path/sdcb4cad98bab1f4c/image/i79a339ccdc73f811/version/1527229417/%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%B0%E3%83%A9%E3%83%A0-%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88id.jpg)
8、アカウントIDを入力すると、画面の表示が変わってきます。自分のインスタグラムの投稿写真が表示されてきます。
続けて他の設定も行っていきましょう。
設定画面の左上にある「<Back」をクリックして、元の画面に戻ります。
![BACKボタン](https://image.jimcdn.com/app/cms/image/transf/dimension=160x10000:format=jpg/path/sdcb4cad98bab1f4c/image/ibca135ada9c80ac4/version/1527229452/back%E3%83%9C%E3%82%BF%E3%83%B3.jpg)
![プレビュー画面表示](https://image.jimcdn.com/app/cms/image/transf/dimension=480x10000:format=jpg/path/sdcb4cad98bab1f4c/image/i3272f35151f113f2/version/1527229465/%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E7%94%BB%E9%9D%A2%E8%A1%A8%E7%A4%BA.jpg)
9、設定画面の一番下の(分かりづらいかも)右側に「Next→」ボタンがあるので、クリックします。
次の設定画面が表示されます。
![ネクストボタン](https://image.jimcdn.com/app/cms/image/transf/dimension=480x10000:format=jpg/path/sdcb4cad98bab1f4c/image/i85ae436bed8f903c/version/1527229477/%E3%83%8D%E3%82%AF%E3%82%B9%E3%83%88%E3%83%9C%E3%82%BF%E3%83%B3.jpg)
10、「Refresh Rate」では、更新頻度を設定します。
無料版では24Hours(free)を選択します。24時間ごとの更新という事です。有料版だと、詳細設定が可能です。
設定できたら、画面一番下の右側に「Next→」ボタンがあるので、クリックします。次の設定画面に進みます。
![更新時間設定](https://image.jimcdn.com/app/cms/image/transf/dimension=480x10000:format=jpg/path/sdcb4cad98bab1f4c/image/iec96c2943280a18a/version/1527229491/%E6%9B%B4%E6%96%B0%E6%99%82%E9%96%93%E8%A8%AD%E5%AE%9A.jpg)
11、ここでは5つボタンが並んでいます。それぞれで設定可能です。一番上の「Layout Size」では写真のレイアウトや、写真の大きさを指定できますし、「Post Content Design」では、投稿写真の下の文章部分を設定できます。背景色とか文字色とか。
「Post Footer」は、投稿写真下のプロフィール欄の設定です。
![詳細設定が可能](https://image.jimcdn.com/app/cms/image/transf/dimension=480x10000:format=jpg/path/sdcb4cad98bab1f4c/image/i3c7b3a15b77596f2/version/1527229503/%E8%A9%B3%E7%B4%B0%E8%A8%AD%E5%AE%9A%E3%81%8C%E5%8F%AF%E8%83%BD.jpg)
12、「Layout Size」をクリックします。
Gallery Style は、写真の並び方を設定できます。
Image Cropping は、写真のトリミング方法です。
PostWidth 写真幅の大きさ
Column Spacing 写真間隔の大きさ
等を設定できます。
色々試してみてください。
左上の「<Back」をクリックすると⑪の画面に戻れます。他の設定が出来ますよ。」
![「Layout Size」](https://image.jimcdn.com/app/cms/image/transf/dimension=480x10000:format=jpg/path/sdcb4cad98bab1f4c/image/i5871bcb739e57016/version/1527229520/layout-size.jpg)
13、では、写真下の文章部分の背景色や文字色を「Post Content Design」設定できます。
「Post Font Color」では、文字色設定。「Post Background Color」では文章の背景色を設定可能です。
大分イメージが変わります。
左上の「<Back」をクリックすると⑪の画面に戻れます。他の設定が出来ますよ。」
![「Post Content Design」背景色設定](https://image.jimcdn.com/app/cms/image/transf/dimension=191x10000:format=jpg/path/sdcb4cad98bab1f4c/image/i0c618b75f4c36863/version/1527229547/post-content-design-%E8%83%8C%E6%99%AF%E8%89%B2%E8%A8%AD%E5%AE%9A.jpg)
![「Post Content Design」](https://image.jimcdn.com/app/cms/image/transf/dimension=480x10000:format=jpg/path/sdcb4cad98bab1f4c/image/icd4dd4e2a49c0334/version/1527229536/post-content-design.jpg)
14、設定が終わったら、画面右下にある「Save」をクリックし、設定内容を保存します。
もっと設定画面はありますが、いろいろとお試しくださいね。
![保存ボタン](https://image.jimcdn.com/app/cms/image/transf/dimension=480x10000:format=jpg/path/sdcb4cad98bab1f4c/image/ia7bc7360fecb242a/version/1527229560/%E4%BF%9D%E5%AD%98%E3%83%9C%E3%82%BF%E3%83%B3.jpg)
15、POWr Instagram Feedアカウント作成画面が表示されます。
Eメールアドレスと任意のパスワード設定をして、新規登録をしてするか。又はfacebookアカウント、Googleアカウントでサインアップします。
Eメールアドレスとパスワードを使って新規登録した場合は、登録メールアドレスに確認メールが届きます。メール文にある「Confirm your account」をクリックして確定します。
すでにPOWr Instagram Feedアカウントを持っている場合は、右下の「Log In」をクリックします。
![アカウント作成画面](https://image.jimcdn.com/app/cms/image/transf/dimension=269x10000:format=jpg/path/sdcb4cad98bab1f4c/image/i4a8653d75ffc7fd4/version/1527229574/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E4%BD%9C%E6%88%90%E7%94%BB%E9%9D%A2.jpg)
16、任意のプラグイン名を指定して、下の「Save」をクリックします。プラグイン名は分かりやすいように、インスタグラムのアカウントIDでもいいと思います。
これで、設定は完了です。
画面上にインスタグラムの投稿写真が表示されてますか?
![プラグイン名 設定](https://image.jimcdn.com/app/cms/image/transf/dimension=269x10000:format=jpg/path/sdcb4cad98bab1f4c/image/i293599287bb5bb12/version/1527229588/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E5%90%8D-%E8%A8%AD%E5%AE%9A.jpg)