脱力系男子

【Instagram × WordPress】インスタ埋め込み用プラグイン「InstaShow」がオシャレで使いやすい|カスタマイズ事例も紹介。

無料:最短で「ブログマネタイズ」を
マスターし自由な働き方を実現する方法。


Instagram、流行ってますよね(今更ですが)。

今やもうアカウント持っていない人の方が少ないかもしれないそんなInstagramですが、WordPressサイトとの連携はちょくちょく僕の周りでも話題に上がっているような気がします。

例えばブログの記事内にインスタの投稿写真を貼り付けたり、僕もそうですがサイドバーに「フォローしてね!」と言わんばかりにインスタのフィードを設置したり、WordPressのメディア機能とインスタを同期させたり。

 

そんななにかと絡みがちなWordPressとインスタですが、今回良さげなプラグインを発見したのでシェアさせていただきます。埋め込み用のプラグインと言えばあのプラグインが真っ先に浮かびますが、今回ご紹介するプラグインはなかなかに良いデザイン性だと思います。

ぜひインスタとWordPressを絡めていきたいという場合や、ちょっとサイトに新しい風を吹かせたいというような場合には、記事を参考に一度プラグインを導入してみていただければと思います。

WordPressInstagram埋め込み用プラグインといえば

上記でもちょっとだけ述べていますが、WordPressのInstagram埋め込み用のプラグインと言えば「Instagram Feed」がだいぶ定番でした。

実際に自分も過去記事で同プラグインについて紹介していますが、この記事を参考に「インスタ埋め込みできました!」というような声をいただくことも多いです。

 

ただ、自分としては個人的にこの「Instagram Feed」の表示がどこか悶々とするというか、はっきりしない部分があったんですね。そこまで悪いデザインではないのですが、「Instagram Feed 見慣れてしまった問題」は薄々感じている人もいるのではないかなと思います。

ちなみにそのInstagram Feedのデザインはこのような感じ、ちょっと投稿ページに貼り付けると大きいんですけど悪くはないデザイン、でも少し「写真貼ってあるだけ」感は否めないかもしれません。あとフォローボタンがちょっと悶々とします。

 

そんなInstagramとWordPressの連携事情に爽やかな風を吹かせたのが、今回ご紹介する「InstaShow Lite」になります。

InstaShow Lite」が劇的にオシャレで使いやすい。

百聞は一見に如かずということで、実際に「InstaShow Lite」を導入した際のWordPressでの埋め込みの表示を確認してみましょう。

 

このような感じで全体としての見た目の印象もだいぶ違いますね、マウスホバー時にふわっとテキストが浮かび上がるのもスタイリッシュで素敵だなと思います。

いくつか個人的に感じたメリットもありますので、ぜひプラグイン導入の際の参考にしてみてください。

マウスホバー時にふわっとしたエフェクトがかかる。

まずこちら。

Instagram Feedが比較対象になってばかりで申し訳ないですが、Instagram Feedではマウスオーバー時には画像に白味がかかるくらいでしたし、投稿のキャプションを見るためには画像をクリックしてインスタのページに遷移しなければいけないというデメリットがありました。

それに比べて今回の「InstaShow Lite」では、マウスオーバー時にわかりやすいように画像の色が変化する上に、投稿のキャプションが画像の上に表示されるという驚きの機能を備えています。これはなかなか便利ですしオシャレな機能ですね。

クリック時にライトボックス風にインスタ画面が表示される。

また、このように画像をクリックしてみるとまるで実際のインスタの画面のように、投稿のキャプションの全文・ハッシュタグ・いいね数・コメント数・シェアボタン・そしてフォローリンクまでもが表示されるようになっています。

これをInstagramのページに遷移することなく、WordPressサイトにタブを残したままライトボックス風に見ることができるというのは、かなり大きなメリットでしょう。まるでWordPressサイトにいながらインスタを見ているような、そんな満腹な状態を味わえるというわけです。

フォローまでの導線も「写真を詳しく見てみる→アカウントに興味がわく→フォローする」というように綺麗な流れでフォロワーを増やすこともできるので、この機能は非常に優れている部分だと感じています。

さりげないページ遷移ボタンが意外と便利。

結構目立たない位置にあるので気づかれない可能性もありますが、写真の端に実はページを遷移することができる矢印ボタンが設置されているのも便利です。

Instagram Feedでは埋め込む写真の枚数を増やすためには、どうしても縦長にしなくてはならなかったり、横長にしようとしても写真が小さくなってしまったりと細かい融通が利きませんでしたが、InstaShow Liteでは見やすいカラム数のままページを遷移することができるので、ストレスフリーな状態で多くの写真を読者に見てもらうことができます。

こういうさりげない気遣いはとてもありがたいですね。

設定画面のUIが非常にわかりやすい。

また、表面上の見た目だけでなく、InstaShow Liteの優れているところはその「使いやすさ」にもあると感じています。

打って変わってWordPressのダッシュボードでのプラグイン設定画面を見てみると、このような表示になっているのですが、Instagramを意識したグラデーションを基調としたポップなデザイン(おそらく)、そしてマテリアルな要素を取り入れたシンプルでわかりやすいUI。

WordPressのプラグインって何かと古いものが多かったり、そのせいか設定画面も旧式というかどこか使いにくいような部分があるのですが、このプラグインはまさに「今風」だと言っても良い仕様になっています。「使っていてテンションが上がる」ってとても大切なことですよね。

 

というように、非常に多くのメリットを兼ね備えたプラグイン「InstaShow Lite」。

Instagramをメインの発信媒体とし、WordPressをポートフォリオサイトとして位置付けている人も時折見かけますが、そういう人にとってはこの「Instagramの埋め込みがどんな感じで表示されるか」ということは非常に大切な部分になってくると思います。もちろんポートフォリオとしてでなくとも、サイドバーや記事内にインスタの埋め込みを行う際にはオシャレでスタイリッシュなデザインを実現できるのでシンプルに気分が上がると思います。

Instagram埋め込み用プラグイン「InstaShow Lite」の設定方法と使い方

さて、もうメリットは十分にお伝えしたと思うので、ここからは実際にプラグイン「InstaShow Lite」の設定方法と使い方について解説していきます。

こだわりがなければ本当にすぐ済む設定ですし、こだわりを持ってもそこまで時間がかからずインスタの埋め込みを実装できると思うので、ぜひ解説を参考に一緒に設定を進めていってみてください。

インストールと有効化。

まずはいつも通りですが、プラグインの導入から。

WordPressのダッシュボード画面から「プラグイン→新規追加」を選択し、右上にある検索窓に「InstaShow Lite」と入力します。

すると下記画像のように「Instagram Feed – Instagram Gallery」というプラグインが表示されるので(なぜ名前がInstagram Feedなのか…)、「今すぐインストール→有効化」をクリックしプラグインを使用できる状態にしておきましょう。これで導入は完了ですね。

Instagramアカウントを連携する。

無事に有効化が済んだらダッシュボード画面のメニューに「InstaShow」という項目が追加されるので、こちらをクリック。

すると以下のようなプラグインの設定画面が表示されるので「Authorize Instagram」をクリックし、その後の指示に従って埋め込みたいInstagramのアカウントを認証していきましょう。

これで画面下の「Installation」にログインしたアカウントの投稿が表示されていれば、無事プラグインとInstagramの連携は完了です。

ビジュアル設定をする。

無事にインスタの連携が済んだら、次は実際にサイト上でどのように埋め込みを表示させるか設定していきましょう。

いくつかタブ形式で設定項目が設置されていますが、proバージョンでなければ利用できない項目が多いので、ここでは「Sizes」「UI」の2項目を設定すれば大丈夫です。それぞれの項目について設定できる内容を解説しているので、ぜひ参考までにお好みで設定を施していきましょう。

・Sizes:画像の枚数の調節

「Columns=横に表示させる枚数」「Rows=縦に表示させる枚数」を表していますが、実際のインスタに近づけるなら正方形型にしてみるのも良いですし、横長や縦長など自由に設定することができるので、自分の思い描くような表示を設定してみましょう。

 

・UI:画像の枚数以外の細かい設定の調節

基本的に赤ワクで囲んだ「Arrows=ページ遷移の矢印を表示させるかどうか」「Drag=スワイプしてページ遷移できるようにするか」というところだけ設定できていれば大丈夫です、ちなみにどちらもチェックボックスが入っている状態が読者も使いやすいのでオススメかなと思います。

あとは一応他の項目についても解説しておくと、「Autorotation=自動的にページ遷移させる時間(0だと自動遷移はなし)」「Pause on hover=マウスオーバー時に自動遷移を一時的に止める」「Animation speed=ページ遷移の際のアニメーションの速度」「Easing=ページ遷移の際のエフェクト」「Popup image switch speed=ポップアップした画像をスワイプする際の速度」「Popup image switch easing=ピップアップした画像をスワイプする際のエフェクト」というような感じになっています。

読んでもよくわからないというような場合やそこまでこだわらなくて良い場合にはデフォルトのままで構いません。

ショートコードを表示させたい場所に埋め込む。

これで無事に埋め込みのビジュアル設定は完了したので、あとは実際にサイトに設置するのみですね。

設定画面の下の方にある「</>Get Shortcode」をクリックすると以下のような画面が表示されるので、赤枠の中にあるショートコードをコピーしておきましょう。

そして、あとはコピーしたショートコードを埋め込みを設置したい場所に貼り付けて保存すれば完了です。

記事内に貼り付けるのであれば「ビジュアルエディタ」で貼り付けてみてください、ウィジェットやフッターに設置する際には「カスタムHTML」の中にコードを貼り付けていきましょう。記事内に貼り付けたイメージはこのような感じです。

うん、やはりマウスオーバー時のエフェクトやキャプションの表示など、非常に良い感じの仕上がりではないでしょうか。

おまけ:「InstaShow Lite」のカスタマイズ事例を紹介。

ここまでで基本的なプラグインの設定の解説は完了しましたが、ここからはおまけとして独自カスタマイズを加えるためのCSSを共有しておきます。

それぞれのコードをそのままコピーしていただければ実装イメージに近い感じに仕上がるので参考までに、なかなかに細かい部分ではありますが他サイトと差別化を図りたい場合はぜひ取り入れていってみてください。お好みでカラーコードやフォントファミリーを変更していただければ、自由に調節することもできます。

また、実装方法はテンプレートによって異なるかもしれませんが、「style.css」「独自CSS」「design.css」などCSSを挿入できる箇所に貼り付けていきましょう。貼り付ける箇所がわからなければ気軽にお問い合わせください。

 

・キャプションのフォントファミリーを変えてみる。

 

・キャプションの文字色を変えてみる。

 

・マウスオーバー時の背景色を変えてみる。

 

・グラデーションを使ってみる(ちょっと配色がアレですが…笑)。

 

とまあ色々と融通は利くので、ぜひ色々と試してみてください。おまけでした。

どんどん自分のサイトに「こだわり」を持とう。

ということでなんだかんだボリューミーになってしまいましたが、WordpressにInstagramを埋め込むことのできるプラグイン「InstaShow Lite」についてご紹介しました。気になった方はぜひ導入してみてください。

比較的新しいプラグインということで信頼性や安定性に欠ける部分があると判断される場合もあるかもしれませんが、これだけUIも丁寧に作り込まれていますし、比較的公式感のある良プラグインなのではないかなと思います。もちろん導入は自己判断でお願いしますが、Instagram Feedと比較してみるとかなり使い勝手は良いのでぜひ気軽にお試しいただければと思います。

 

また、こういうサイトの見た目を整えるようなプラグインもかなりの数がありますし、こうして新しいプラグインも生まれ続けているので、つくづくWordPressでのサイト運営は楽しいなあと思います。

これまでの時代、と言うと変な言い方にもなりますが、インターネット上で情報を発信したり自分の思っていることを発信する人もたくさん増えてきており、そういった中で「サイトデザイン」というのはとても大切な役割をこれからも果たしていきます。なにせ星の数ほどブログも存在するわけですので、その中でパッと見の第一印象で読者の心をぐっと掴めるのは非常に大きなことですよね。

 

今回は一端のInstagram関連のプラグインということでライトなものではありましたが、こうして色々なものを使ってみたりサイトに改良を加えてみたり、そうして自分のサイトに対して「もっとこうしたいもっとああしたい」「ここが好きなんだよな」「ここどうにかならないかな」というようにこだわりを持つような人が増えれば自分としても嬉しいです。

ぜひぜひ、自分の子供のようにサイトを可愛がってあげてください。今回の記事が少しでもあなたのサイトに助力できれば幸いです。

「自分らしく生きたい」と強く願うあなたへ。
「自分らしく生きたい」と強く願うあなたへ。
 

leave a reply

*
*
* (公開されません)