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

blog-instagram-gallery-thumbnail

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

さやか先生
私も最近インスタ始めたよ!
さやか先生も始めたんだね。どんな写真載せてるの?
やまかわ
さやか先生
色々だけど、飼ってるワンちゃんの写真が多いかな🐶
さやか先生もブログしてるんだよね。写真がたまったらブログにギャラリーとか作ってみるとおもしろいよ
やまかわ
さやか先生
ギャラリー?
こういうやつだよ
やまかわ

https://lognote.biz/instagram-gallery

さやか先生
いいかも! 作りたい!

ブログにインスタグラムの写真ギャラリーを作ろう

この記事では、ブログにインスタグラムの写真を使ったギャラリーページを作る方法を紹介します。

方法はいくつかありますので、環境に合わせて使いやすいものをチョイスしてみてください。

写真埋め込み機能はあるが使い勝手が悪い

インスタグラムにも写真埋め込み機能がありますが、一枚ずつしかコードを出してくれないためギャラリー作成には向きません。

コードも非常に長いため記事編集画面が重くなったり、自動で更新もされないので利便性が悪いです。

WordPressならプラグインを使うのも手

WordPressには、インスタグラムの写真ギャラリーを表示できるプラグイン「Instagram フィード」があります。

Instagram フィード

Instagram フィード

Instagram フィード

参考Instagram フィード

Instagram Apiの設定があるのでちょっと面倒ですが、WordPressで運営されている方は管理画面内で編集ができて大変便利です。
シンプルなデザインが好きな人にもおすすめです。

一方で「あまりプラグインは増やしたくない」という方もいるでしょう。
ギャラリーページは基本1ページしか作らないでしょうし、そのためにプラグインを入れるのも馬鹿らしいです。

登録不要で無料のギャラリー生成ツール「SnapWidget」

WordPressを使っていない方もいるでしょう。
そんな方には無料で使えるギャラリー生成ツール「SnapWidget」がおすすめです。

「SnapWidget」のいいところは、会員登録をする必要がなく、無料で使えるという点です。

Webブラウザ上でグリッドをカスタマイズし、生成されたコードを記事に貼り付けるだけで綺麗なギャラリーを作ることができます。

「SnapWidget」の使い方

それでは、「SnapWidget」を使ってインスタグラムの写真ギャラリーページを作る方法を説明します。

まず、下記サイトにアクセスしてください。

参考SnapWidget

TOPページを少し下にスクロールすると、6つ並んだグリッドが現れます。

赤い部分が表示されているのがインスタグラム関連のウィジェットです。
その中から、CREATE YOUR FREE WIDGETを選択してください。

「CREATE YOUR FREE WIDGET」をクリック

「CREATE YOUR FREE WIDGET」をクリック

ギャラリーの設定をおこないます。

Usernameをクリックすると、Instagramとの連携画面が出ますのでIDとパスワードを入力して連携させます。

Layoutを好みに合わせて設定し、Responsiveは必ずYesに変更します。
デバイスの幅に応じて写真を自動的に拡大縮小してくれるようになるので、デザイン崩れを防ぐことができます。

ギャラリーの設定

ギャラリーの設定

設定し終わったら、GET WIDGETをクリックします。
コードが生成されるので、ブログページに貼り付けてください。

インスタグラムギャラリーイメージ

インスタグラムギャラリーイメージ

表示枚数を少なくして、フッターやサイドバーに貼ってもいい感じです。

フッターにギャラリーを表示した例

フッターにギャラリーを表示した例

表示枚数を多くしすぎると、スマホ閲覧時に縦に長くなってしまいます。
ウザくなりすぎないよう、確認をしながら作成をしてみてください。

「SnapWidget」が使えなくなった場合の対処法

「SnapWidget」をしばらく使っていないと、下のようなメッセージが出てアップデートを要求されることがあります。

アップデートを要求される

アップデートを要求される

そのときは、連携のし直しをすることで直ることがあります。

まず、Settingをクリックします。

「Settings」をクリック

「Settings」をクリック

インスタグラムのアイコンがミステリーマンになってしまっています。
連携がうまくいっていない証拠です。

Linked Servicesをクリックします。

「Linked Services」をクリック

「Linked Services」をクリック

一度連携を解除し、再度連携します。

一度連携を外す

一度連携を外す

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

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

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

できるポケットこれからはじめるインスタグラム Instagram 基本&活用ワザ

コメントを残す

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

承認制のため反映にお時間をいただきます。