今回は、ブログにInstagramを連携させる方法を解説していきます!
![こばやし](https://mirudakedesign.com/wp-content/uploads/2022/02/f_f_object_111_s512_f_object_111_0bg.png)
この記事で学べることはコチラです
- Smash Balloon Instagram Feedを使ってブログにInstagramを連携させる方法
- Smash Balloon Instagram Feedの詳しい使い方
- アイコンやユーザー名を消す方法
Instagramを連携させる方法
まず、WordPressで「Smash Balloon Instagram Feed」のプラグインを追加していきます。
左のダッシュボード→プラグイン→新規追加で「プラグインを追加」の画面に移行します。
「Smash Balloon Instagram Feed」と検索し、「今すぐインストール」をクリックします。
![](https://mirudakedesign.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-13-3.19.02-1024x412.png)
インストールが出来たら「有効化」をクリックします。
![](https://mirudakedesign.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-13-3.19.02-1-1024x819.png)
すると、ダッシュボードに「Instagram Feed」という項目がプラスさるので、「すべてのフィード」をクリックします。
すると、このような画面に移行するので、「新規追加」をクリックします。
![](https://mirudakedesign.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-13-3.19.02-2-1024x522.png)
新規追加をクリックすると「Instagramフィードを作成」という画面に移行します。
ユーザータイムラインを選択し、「次へ」をクリックします。
![](https://mirudakedesign.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-13-3.19.02-3-1024x421.png)
すると画面が変わるので「ソースを追加」をクリックします。
![](https://mirudakedesign.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-13-3.19.02-4-1024x425.png)
ここで「インスタグラムでログイン」をクリックし、接続させたいInstagramアカウントと連携させます。
![](https://mirudakedesign.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-13-3.19.02-10-1024x637.png)
連携出来ると、Instagramフィードを作成の画面に自分のInstagramのアカウントが表示されるようになります。
ここまで出来たらチェックを付けて、「次へ」をクリックします。
![](https://mirudakedesign.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-13-3.19.02-5-1024x425.png)
そうすると、このような画面に移動するので、レイアウト等を自分好みにカスタマイズしていきます。
![](https://mirudakedesign.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-13-3.24.36-1024x486.png)
フィードレイアウト
フィードレイアウトでは、レイアウトやフィードの高さ、余白、表示される投稿数、表示される行、列の数が設定出来ます。
レイアウトは無料プランだと「グリッド」しか選べません。
配色
配色では、表示されるInstagramの投稿の背景の色を変える事が出来ます。
テーマから継承、ライトカラー、ダークカラー、カスタムから選択可能です。
ヘッダー
ヘッダーでは、表示されるInstagramのユーザー名の大きさや画像を変更出来たり、自己紹介文をユーザー名の下に追加する事が出来ます。
投稿
投稿では「画像と動画」から画像の解像度を選択する事が出来ます。
ここは、基本的にはデフォルトの「自動検出」のままでいいかなと思います。
その他、キャプション等の設定は、有料版にアップデートすると利用出来るようになります。
もっと見るボタン
「もっと見るボタン」はデフォルトでは、グレーの背景に「Load More」となっていますが、ここでテキストを変えたり、色を変える事が出来ます。
フォローボタン
「フォローボタン」はデフォルトでは、青いの背景に「Instagramでフォロー」となっていますが、ここでは、テキストや色を変える事が出来ます。
ライトボックス
ライトボックスは有料ですが、更にデザインを自分好みにカスタマイズ出来ます。
自分好みにカスタマイズが出来たら、ブログに表示されるようにコードをコピペしていきます。
右上の「埋め込み」のボタンをクリックすると、「埋め込みフィード」が表示されるので、ショートコードをコピーします。
![](https://mirudakedesign.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-13-3.19.02-6-1024x425.png)
ショートコードをコピーしたら、自分の表示させたい場所にコードをペーストします。
表示させたいページを開いて、「カスタムHTML」を選択します。
![](https://mirudakedesign.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-13-3.19.02-7-1024x596.png)
カスタムHTMLに先程コピーしたコードを貼り付けます。
![](https://mirudakedesign.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-13-3.27.57-1024x247.png)
すると、ブログにInstagramが表示されるようになります。
![](https://mirudakedesign.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-13-3.28.49-1024x497.png)
アイコン、ユーザー名を消したい場合
投稿上に表示されているアイコン、ユーザー名を非表示にしたい場合は、cssにコードを追加していきます。
ダッシュボードの外観→カスタマイズをクリックします。
![こばやし](https://mirudakedesign.com/wp-content/uploads/2022/02/f_f_object_111_s512_f_object_111_0bg.png)
コチラのブログではcocoonを使用していますが、追加cssを書く場所はテーマによって違います。「ご自身でお使いのテーマ名 追加css」で検索をかけると、追加cssを書く場所が分かると思うので参考にしてみて下さい。
![](https://mirudakedesign.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-13-3.19.02-8-1024x645.png)
そうすると、「追加css」という項目があるのでそちらをクリックし、コチラのcssを追加していきます。
.sb_instagram_header{
display:none;
}
![](https://mirudakedesign.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-13-3.19.02-9-1024x619.png)
これで、「Smash Balloon Instagram Feed」で表示されたアイコンとユーザー名を消すことが出来ました。
![](https://mirudakedesign.com/wp-content/uploads/2022/11/スクリーンショット-2022-11-13-3.30.21-1024x496.png)
まとめ
今回は、WordPressのプラグインである「Smash Balloon Instagram Feed」を使ってブログにInstagramを連携させる方法を解説しました!
![こばやし](https://mirudakedesign.com/wp-content/uploads/2022/02/f_f_object_111_s512_f_object_111_0bg.png)
WordPressについてはコチラの記事もおすすめです
![こばやし](https://mirudakedesign.com/wp-content/uploads/2022/02/f_f_object_111_s512_f_object_111_0bg.png)
デザイン本が全国の書店で発売中です!
頑張って作ったので、手に取って頂けたら嬉しいです!
コメント