Lognote

ネット集客に強い整体院サイトを制作

blog-instagram-gallery-thumbnail

ブログに無料でInstagramギャラリーを作る方法

公開日:2016-10-13
最終更新日:

Pocket

Sig.

Twitter、Facebookに変わり、絶大な人気を誇る写真投稿型SNS「Instagram」
フィルターをかけることで、誰でもプロのような綺麗な写真が投稿できることも人気の一つです。

ブロガーにも人気なInstagram

ブロガーさんでもInstagramもされている方は非常に多く、写真系、または女性ブロガーさんの中には「ブログ内にInstagramギャラリーを作りたい」と思われている方も多いのではないでしょうか。

Instagramには一応写真埋め込み機能がありますが、一枚ずつしかコードを出してくれないためギャラリーのように並べることはできません。
コードも非常に長いため編集画面が重くなったり、自動で更新もされないので記事も書き直さなければなりません。

これではとても面倒なのでツールを使いたいところです。

WordPressならプラグインがあります

WordPressにはInstagram用のプラグインがあります。

Instagram Feed

blog-instagram-gallery-01

特に人気なのが「Instagram Feed」です。

Instagram Apiの設定があるのでちょっと面倒ですが、デザインがとても綺麗でオススメです。

WordPressで運営されている方は、これらを使うことで管理画面内で編集ができて大変便利ですが、一方で「プラグインを増やすと重くなる」「管理画面が煩雑になる」などのデメリットもあります。

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

WordPressを使っていない方でも無料で使えるツールがあります。
それが「SnapWidget」です。

SnapWidgetはWeb上でグリッドをカスタマイズし、生成されたコードを記事に貼り付けるだけで綺麗なギャラリーを作ることができます。
SnapWidgetのいいところは会員登録をする必要がなく、無料で使えるという点です。

「SnapWidget」の使い方

それでは使い方を説明します。

まず、下記サイトにアクセスします。

blog-instagram-gallery-02

TOPページを少し下にスクロールすると、6つ並んだグリッドが現れますので、左上の「CREATE YOUR FREE WIDGET」を選択してください。

blog-instagram-gallery-03

Instagramのウィジェット設定画面に移ります。

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

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

設定し終わったら、一度プレビューして確認しましょう。

blog-instagram-gallery-04

「GET WIDGET」をクリックし、コードをコピーしてブログページに貼り付けます。

blog-instagram-gallery-05

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

今回作ってみたギャラリーのリンクをだしておきますので参考にしてみてください。

スマホで見るととんでもなく下に長いページになるので、実際にギャラリーを作る際は表示枚数に注意してください。

以上、「ブログに無料でInstagramギャラリーを作る方法」という記事をお届けしました。

-ブログ運営
-

この記事のタイトルとURLをコピーする
ブログに無料でInstagramギャラリーを作る方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

ogp-cache-clear-thumbnail

コピペで簡単!OGPキャッシュ更新フォームの設置用コード

WordPressでサムネを新しいものに変えると、Facebookにリンクを貼ったときの画像が更新されずに真っ白に...

moving-from-lolipop-to-xserver-thumbnail

WordPressをロリポップからエックスサーバーに移転する方法

WordPressブログをロリポップからエックスサーバーに移行したので、そのときの全工程を備忘録として残したい …

nth-child-comparison-table-thumbnail

疑似クラスnth-childで作るおしゃれな比較風テーブル

擬似クラスnth-childを使ったおしゃれな比較風テーブルのカスタマイズ方法を紹介します。

infotop-stop-payment-thumbnail

インフォトップで悪質アフィリエイターへの報酬を停止する方法

アフィリエイトの販売者をやっていると、一部悪質極まりないアフィリエイターに出会います。何回注意を...

xserver-htaccess-thumbnail

いざってときは助かる!エックスサーバーでの.htaccess編集がFTPソフト不要に!

Lognoteでも使用中のエックスサーバーに、本日新たに「.htaccess編集」機能が追加されました。 .h …

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい