Lognote

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

blog-instagram-gallery-thumbnail

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

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

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の最新ニュース情報を、
いいねしてチェックしてください!

関連記事

google-algorithm-thumbnail

現在のGoogleアルゴリズムはどうなっている?急にアクセス数が爆発したので調べてみた

昨晩19時くらいだったでしょうか。私にとってとんでもない事件が起きたんです。 昨晩起きたアクセス数爆発事件 何 …

xserver-ssl-thumbnail

エックスサーバーが独自SSLの無料提供を開始!引っ越しを考えてもいいかも!?

このツイートにはびっくりしました。なにしろ、エックスサーバーが独自SSLを無期限、無制限で無料提供を開始するっ …

box-css-thumbnail

シンプルだけど目立つ!ブログ記事内で使えるボックスCSSカスタマイズ

ポイントや注意事項などを目立たせて表示するためにはボックス表示がオススメです。 テキストだけずらーっと並んだ記 …

xserver-htaccess-thumbnail

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

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

google-spreadsheet-keyword-planner-thumbnail

スプレッドシートを使ったキーワードプランナー活用方法

ブログに限らずサイトを運営する上で必要不可欠になってくるのがキーワードの選定です。 今、どんなキーワードが検索 …

コメントを入力

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

トラックバック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
子テーマにコピーするの所がわかりにくい