WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

今回はインスタグラムの投稿をWordPressのサイトにタイル状の形式で並べて表示することが出来る「Smash Balloon Social Photo Feed」の使い方をご説明します。

もちろんインスタグラムの投稿が更新されれば、WordPressの方でも自動で更新される仕組みとなっています。

説明を動画で見る

プラグインインストール

まずは、プラグインをインストールしましょう。

WordPress管理画面左メニューの「プラグイン」にマウスを乗せて、さらに表示される「新規追加」をクリックします。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

表示された画面の右上の検索窓に「Smash Balloon Social Photo Feed」と入力してください。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

結果が表示されると、似たようなプラグインも一緒に表示されるので、間違えないようにインストールしましょう。

「Post Feed」ではなく「Photo Feed」というのがポイントです。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

確認が出来たら「今すぐインストール」をクリック。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

インストールが完了したら、そのまま「有効化」までしてください。

インスタグラムアカウント連携

プラグインが有効化出来たら、プラグインの設定を行います。

WordPress管理画面左メニューに「Instagram Feed」という項目が追加されているので、直接クリックするか、さらに表示された項目から「すべてのフィード」をクリックします。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

すると、フィードの作成画面が表示されるので、「新規追加」ボタンをクリックしましょう。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

フィードの形式選択画面に移動しますが、このプラグインの無料版では他のものを選択できないので、そのまま「次へ」をクリック。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「Select one or more sources」ということで、1つまたは複数のソースを選択してください、と言われていて、

つまりは、何のタイムラインやフィードを繋げますか?

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

と聞かれている状態なので、インスタグラムです、と選択するのがここの設定の役割となります。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

ご自身のインスタグラムとWordPressを連携するには「Add Source」をクリックします。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

すると、一時的にWordPressの管理画面から別のサイトへ移動します。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「Select Account Type」では無料版である「Personal」を選択。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

次に、「Login with Instagram」ボタンをクリックします。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

すると、インスタグラムのログイン画面が表示されるので、ログインしましょう。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

すでにログインしている方は、そのまま次の設定に進んでください。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

プラグインがご自身のインスタグラムの一部情報を取得しても良いかの確認画面が表示されるので、「許可する」をクリック。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

連携が完了すると、WordPressの管理画面に戻ってきます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

画面上にご自身のインスタグラムアカウントが表示されるので、チェックを入れて「次へ」をクリックましょう。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

これでWordPressとインスタグラムの連携は完了です。

プラグインの設定

次に、WEBサイト上にインスタグラムをどのように設置するかの設定やカスタマイズを行います。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

簡単なガイドが表示されるので読み進めてください。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

画面の左側で設定を行い、右側では、カスタマイズ内容がプレビューとして表示されます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed
WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

カスタマイズ

まずは、画面左側上部の「カスタマイズ」タブに切り替えてみましょう。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

最初にレイアウトの設定項目があるので見てみます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

すると、レイアウトの一覧が表示されます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

現在は「グリッド」というタイル状に画像を並べるレイアウトになっていますが、残念ながら、他のレイアウトは有料版のみ利用可能となっています。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

フィードの高さ設定

次のカスタマイズ項目に「フィードの高さ」というものがあります。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

ここでは、タイル状の画像の全体の高さを決められます。

適当に100と入れてみます。

単位はピクセルです。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

右側のプレビューを見てみると、低すぎてアカウント名ぐらいしか表示されていないことがわかります。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

今度は試しに500に変更してみます。

すると、右側のプレビューもすぐに変化します。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

高さが十分に確保されると画像とボタンまで表示されることがわかります。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

デバイスごとのプレビュー

このプレビュー画面では、「パソコン」「タブレット」「スマホ」の3種類のデバイスのプレビューを見ることが出来ます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

タブレットの表示はこのようになります。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

スマホではこのような感じです。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

フィードの高さを空欄にすると、自動調整となります。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

フィードの画像枚数

「投稿数」という項目では、タイル状に何枚の画像を並べるかの設定が可能です。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

数値を切り替えてどのように変化するか見てみましょう。

試しに3にしてみると、プレビューでも画像が3枚になりました。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

スマホでは枚数を切り替えたい場合なども「モバイル」の方で設定してあげれば可能となります。

好みの枚数になるように設定してみてください。

タイルの列数設定

「列」という項目では、タイル状の画像を何列にするかの設定ができます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

こちらはパソコン、タブレット、スマホで切り替えが可能となっています。

画像ごとの余白

「投稿数」の上にある「余白」では、それぞれの画像にどのくらい余白を設けるか設定ができます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

こちらもプレビューを見ながら設定してみましょう。

一通り設定したら次のカスタマイズ項目に移ります。

画面左側を一番上までスクロールして、「CUSTOMIZE」という部分をクリック。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

今度は「配色」から色の設定をしてみましょう。

フィードの配色設定

「カスタマイズ」タブの「配色」項目では色合いの全体設定が可能です。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

通常は「テーマから継承」に設定されているので、他のものに変更したい場合は、チェックを変えてみましょう。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「ライトカラー」はテーマ自体が白をベースにしていると変化がわかりづらいかもしれません。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「ダークカラー」にすると、背景が暗い感じになります。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「カスタム」では自分の好みのカラーに調整可能です。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「Background」で背景色、「Button1・2」で、画像下のボタンの色合いを変更することが出来ます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

ヘッダーの設定

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「カスタマイズ」内の「ヘッダー」では、画像上部のアカウント情報欄の調整ができます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

ヘッダーのサイズは「小・中・大」の3種類から選択可能です。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

アイコン設定

プラグインの無料版ではインスタグラムのアイコンを自動取得できないようなので、手動で画像をアップロードしましょう。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「カスタムアバターを使う」の項目で画像をアップロードすると、ヘッダーのアイコンを設定することが出来ます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

アカウント名の色設定

「テキスト」項目の「色」では、アカウント名の色を変更することが出来ます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

プロフィールの設定

「自己紹介を表示」をオンの状態にすると、その下の項目で入力した文章がヘッダーに表示されます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

タイルの領域設定

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「スクロール可能な領域の外側を表示」の設定では、背景色をどこまで適用するかを切り替えることが可能です。

色がついていないとわかりづらいかもしれません。

他のヘッダー項目は有料版のみとなります。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

また、左側の一番上までスクロールして「CUSTOMIZE」から他の項目を設定します。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

もっと見るボタンの設定

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「もっと見るボタン」が有効になっていると、画像下に画像追加読み込み用のボタンが表示されます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「テキスト」の項目では、このボタンの文字を決めることが可能です。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「色」の項目では、ボタンの色を「配色設定」のときよりも細かく調整することが出来ます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「背景」ではボタンの背景色を変更可能で、「ホバー状態」では、マウスを乗せたときの色合いの変更「テキスト」では、文字の色を変更することが出来ます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed
WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

フォローボタンの設定

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

次は、「フォローボタン」の設定を見てみます。

「フォローボタン」が有効になっていると、「もっと見るボタン」の横に、インスタグラムをフォローしてもらうためのボタンが表示されます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

細かい設定内容は、もっと見るボタンの時と同じなので、いろいろと変更して好みのスタイルに変えてみましょう。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「ライトボックス」という項目はすべて有料版の機能なので、ここでは割愛させていただきます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

フィードの全体設定

今度は「カスタマイズ」タブから「設定」タブに切り替えて、フィード全体の設定を行います。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

ソース

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「ソース」では、誰のアカウントを接続しているか、また、アカウントを追加する場合の設定が可能です。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

フィルタと承認は有料版となります。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

並べ替え

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「並べ替え」の項目では、タイル状の画像を、最新の投稿順にするか、ランダムで表示するかの設定を変更することが出来ます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

ショッピングフィードという項目も有料版です。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed
WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「高度な設定」も基本的に利用することがないと思いますので飛ばしましょう。

これで一通りの設定は完了です。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed
WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

フィードの設置

設定が完了したら、実際にWordPressに設置をしていきましょう。

画面右上の「埋め込み」という部分をクリックすると、作成したフィードがショートコードとして表示されます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「コピー」ボタンをクリックするとショートコードがコピーできるので、後は投稿・固定ページ・ウィジェットなど、好きな場所に貼り付ければ、カスタマイズしたインスタグラムのタイル画像が表示されます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

サンプルとして、固定ページを新規に用意して、そのまま貼り付けてプレビューしてみます。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

すると、このように表示されることがわかります。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

「ウィジェットに追加」ボタンをクリックすると、WordPressのウィジェット管理画面が表示されるので、旧バージョンのウィジェット画面の場合は「Instagram Feed」ウィジェットを配置するか、「カスタムHTML」でショートコードを貼り付けましょう。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed
WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed
WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

新バージョンのウィジェット画面でもやることは一緒です。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

実際にWEBサイトを見てみると、サイドバーに入れても自動でサイズ調整されることがわかります。

WordPressにインスタグラム投稿をタイル状に表示できるSmash Balloon Social Photo Feed

まとめ

お疲れ様でした。

これでインスタグラムの画像をWordPressの好きな場所に設置することが出来るようになりました。

有料版のみの機能も多いですが、カスタマイズ項目も豊富で使いやすいので ぜひ利用してみてください。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA