【Instagram Gallery】最強のインスタグラム ギャラリープラグインの使い方

アンティーク・カメラとレトロな雰囲気の写真

コンテンツは
テキスト(文字)→音声→画像→動画の順で

後者ほど伝わってくる情報量が多く
記憶に残りやすいという話を耳にしたことがあります。

確かに文字だけで構成されたコンテンツより
画像や動画が入ったものの方がより印象的ですよね。

画像・動画に特化したコンテンツ、と言えば
流行の Instagram(インスタグラム)
ユーザーが撮影した写真や動画を共有できるサービスとして大変人気です。

今回はブログにインスタへのリンクを手軽に貼り付ける方法として
Instagram Gallery」プラグインの導入について
その使い方と併せて紹介してみようと思います。

スポンサーリンク

Instagram Gallery




このプラグインは無料かつ単体で
カルーセル(スライドショー)表示させることが出来ます。

自分で投稿したアイテム、ページへのリンクはもちろん
インスタグラム上にあるハッシュタグでギャラリーを作成することも可能です。

また、静止画ギャラリーへの切り替えや
表示数のカスタマイズも可能です。

作成したショートコードを貼り付けるだけなので
とても簡単にインスタギャラリーを設置することが出来ます。

Instagram Gallery のインストール

Instagram Gallery プラグイン画像

Instagram Gallery
By Karan Singh

WordPress 左のサイドメニュー「プラグイン」→「新規追加」から
「プラグインを追加」画面へ移動後、

検索窓に Instagram Gallery と入力します。
(作成者が Karan Singh さんになっているものを探します。)

Instagram Gallery プラグインが見つかりましたら、
今すぐインストール」→「有効化」をクリックします。

Instagram Gallery インストール画面


ZIP ファイルはこちら。

Instagram Gallery is an easy way to display your Instagram pictures on the website.



WordPress 左サイドメニュー「設定」→「Instagram Gallery 」をクリック。
移動先画面「+ ADD NEW GALLERY」ボタンをクリックします。




設定画面が表示されます。

Instagram Gallery の設定

  • Display Instagram Gallery from: ギャラリーをユーザー投稿で作成するか、ハッシュタグで作成するかの選択
  • Instagram User Name:(Instagram # Tag:) ユーザーページに表示されるユーザー名、もしくはタグ名の入力
  • Pictures Limit: 表示される画像の総数



Gallery 選択時の設定画面

  • No. of Pics Columns: 1列に表示させる画像の数
  • Image hover effect: 画像マウスオーバー時アニメーションエフェクトの表示/非表示を切り替えます。
  • Space between images: 画像間の余白



Instagram Gallery「Carousel」タブ選択時の設定

  • Slides per view: スライドビューの列数
  • Navigation arrows: ナビ矢印の表示/非表示
  • Dotted navigation: ドットナビボタンの表示/非表示
  • Space between slides: 画像間の余白



  • Images thumbnail size: 画像サイズの調節。ミディアム(640,320 × auto)もしくはスモール(150 × 150)サイズの正方形を選択することができます。
  • Images hover color: 画像マウスオーバー時ホバー色の指定
  • Popup images on thumbnail click: サムネイルをクリックした時のポップアップ表示を有効にするかどうか。他のポップアップ系プラグイン(fancyboxなど)を使用したい時はチェックを外してください。
  • Display Likes: いいね!数の表示/非表示
  • Display Comments: コメント数の表示/非表示
  • Display Instagram Link Button: インスタグラムサイトへのリンクボタンの表示/非表示



Instagram Gallery インスタグラムリンクボタンの編集画面

  • Instagram Button Text:リンクボタンのテキストの入力。任意のテキストに変更することが出来ます。
  • Button Background Color:リンクボタンの背景色の指定
  • Button Mouse Hover Color:リンクボタンマウスオーバー時のホバー色の指定



+ Update / Add」ボタンをクリックして設定を終えます。

Instagram Gallery の使い方

プラグイン設定画面上部「←BACK TO LIST」などから
Instagram gallery のリスト画面に移動します。

作成したショートコードを、
表示させたい場所(投稿ページ・サイドバー・各ウィジェットなど)にコピペして使用します。

同ページに2つのギャラリーを表示させたい時は、
同じ設定の新しいギャラリーをもうひとつ作成してから、貼り付けてください。

Instagram Gallery ショートコードの取得画面

“echo do_shortcode( ‘[MyShortcode]’;)” PHPコードをPHPファイルに追加して使う方法もあるようです。

その他の設定

リスト画面下部分「ADDITIONAL SETTING」ボタンを押すと、
ギャラリー表示の待ち時間に表示される画像、
ギャラリーローダー・イメージの変更を行うことが出来ます。

すぐ下の Remove everything on uninstall にチェックを入れると、
プラグインのアンインストール時に
全てのデータを削除する設定を行うことが出来ます。

リスト画面その他の設定

ご覧頂き、ありがとうございました。

スポンサーリンク
レクタングル大




レクタングル大




シェアする

フォローする