ブログに無料でインスタグラムの写真ギャラリーを作る方法

写真投稿型SNSとして、老若男女問わず絶大な人気を誇るインスタグラム。
フィルターをかけることで、誰でもプロのような綺麗な写真が投稿できることも人気の一つです。






https://lognote.biz/instagram-gallery

ブログにインスタグラムの写真ギャラリーを作ろう
この記事では、ブログにインスタグラムの写真を使ったギャラリーページを作る方法を紹介します。
方法はいくつかありますので、環境に合わせて使いやすいものをチョイスしてみてください。
写真埋め込み機能はあるが使い勝手が悪い
インスタグラムにも写真埋め込み機能がありますが、一枚ずつしかコードを出してくれないためギャラリー作成には向きません。
コードも非常に長いため記事編集画面が重くなったり、自動で更新もされないので利便性が悪いです。
WordPressならプラグインを使うのも手
WordPressには、インスタグラムの写真ギャラリーを表示できるプラグイン「Instagram フィード」があります。
Instagram フィード

Instagram フィード
Instagram Apiの設定があるのでちょっと面倒ですが、WordPressで運営されている方は管理画面内で編集ができて大変便利です。
シンプルなデザインが好きな人にもおすすめです。
一方で「あまりプラグインは増やしたくない」という方もいるでしょう。
ギャラリーページは基本1ページしか作らないでしょうし、そのためにプラグインを入れるのも馬鹿らしいです。
登録不要で無料のギャラリー生成ツール「SnapWidget」
WordPressを使っていない方もいるでしょう。
そんな方には無料で使えるギャラリー生成ツール「SnapWidget」がおすすめです。
「SnapWidget」のいいところは、会員登録をする必要がなく、無料で使えるという点です。
Webブラウザ上でグリッドをカスタマイズし、生成されたコードを記事に貼り付けるだけで綺麗なギャラリーを作ることができます。
「SnapWidget」の使い方
それでは、「SnapWidget」を使ってインスタグラムの写真ギャラリーページを作る方法を説明します。
まず、下記サイトにアクセスしてください。
TOPページを少し下にスクロールすると、6つ並んだグリッドが現れます。
赤い部分が表示されているのがインスタグラム関連のウィジェットです。
その中から、 を選択してください。

「CREATE YOUR FREE WIDGET」をクリック
ギャラリーの設定をおこないます。
Usernameをクリックすると、Instagramとの連携画面が出ますのでIDとパスワードを入力して連携させます。
Layoutを好みに合わせて設定し、Responsiveは必ずYesに変更します。
デバイスの幅に応じて写真を自動的に拡大縮小してくれるようになるので、デザイン崩れを防ぐことができます。

ギャラリーの設定
設定し終わったら、
コードが生成されるので、ブログページに貼り付けてください。

インスタグラムギャラリーイメージ
表示枚数を少なくして、フッターやサイドバーに貼ってもいい感じです。

フッターにギャラリーを表示した例
ウザくなりすぎないよう、確認をしながら作成をしてみてください。
「SnapWidget」が使えなくなった場合の対処法
「SnapWidget」をしばらく使っていないと、下のようなメッセージが出てアップデートを要求されることがあります。

アップデートを要求される
そのときは、連携のし直しをすることで直ることがあります。
まず、
をクリックします。
「Settings」をクリック
インスタグラムのアイコンがミステリーマンになってしまっています。
連携がうまくいっていない証拠です。
をクリックします。

「Linked Services」をクリック
一度連携を解除し、再度連携します。

一度連携を外す
インスタグラムアイコンが表示されました。
これで「SnapWidget」がまた使えるようになります。

アイコン画像が表示されればOK