wordpress

Instagramの埋め込み方※写真もWordPressもこだわる人へ

Instagramの埋め込み方

Instagramの埋め込み方※写真もWordPressもこだわる人へ

 

Instagramは今最もホットなSNSといっても過言ではありません。
もしあなたがInstagramをやっているのであれば、是非あなたのWordPressブログと連携させてみましょう。

若い女性ユーザーの多いInstagramとWordPressを連携することができれば、こういったユーザー層をあなたのブログに取り込むことができます。
また、Instagramのオシャレな写真をブログに載せることができれば、あなたのブログはもっと華やかになるでしょう。

また、もしあなたがインスタ映えなどInstagramの写真に強いこだわりを持っているのであれば、ブログでのInstagramの埋め込み方もこだわってみてはいかがでしょうか。

実はInstagram埋め込み用のプラグインにも目的にあわせて様々なプラグインが存在し、用途にあったプラグインを使うことでよりあなたの理想にあった形で、あなたのブログにInstagramを埋め込むことができるのです。
よりオシャレに、よりあなたのこだわりにあった形でInstagramを埋め込むことができますよ。

ということで今回は、こだわりの強いあなたに向けて、WordPressのプラグインを使ったInstagramの埋め込み方について、「こだわって」紹介していきます。

 

WordPressでのInstagramの埋め込みに役立つ2つのプラグインを紹介

instagramのアイコンがいっぱい

それではWordPressでのInstagramの埋め込みでよく使われる2つのプラグインを紹介していきます。
またそれぞれのプラグインの特徴についても触れていくので、自分にあったプラグインでInstagramを埋め込むようにしてください。

1.Instagram フィード

このプラグインは、以前から定番プラグインとして、今最もInstagramの埋め込みに使われているプラグインになります。
Instagram フィードで埋め込まれたInstagramはこのような感じで表示されます。
Instagram フィードで埋め込んだもの
そして、プラグイン「Instagram フィード」で埋め込んだ時の特徴としては以下の通りです。

  • 一度にたくさんの写真を見ることができる
  • 写真をクリックするとInstagramの投稿ページに飛ぶようになっている
  • ヘッダーにあなたのアカウント名や説明文を表示させることができる
  • フォローボタンを設置することができる

プラグイン「Instagram フィード」は、WordPressから自分のInstagramのページに飛んでもらえるような仕組みを作るという意味ではすごく優れたプラグインといっていいでしょう。
そのため、自分のInstagramページを是非見てほしいという方はこちらのプラグインを使うことをおすすめします。



2.Instagram Feed(Instashow Lite)

「Instagram フィード」が以前からあるものに対して、このプラグインは、オシャレにInstagramを埋め込めるということで、最近注目されているプラグインになります。
Instashowで埋め込んだもの
そして、プラグイン「Instagram Feed(Instashow Lite)」で埋め込んだ時の特徴としては以下の通りです。

  • 限られたスペースの中で写真を切り替えることで様々な写真を表示させることができる
  • 自動で写真を切り替えて、埋め込み部分に動きを作ることができる
  • 写真にポインターをあてると、投稿時のコメントが表示される
Instashowで埋め込んだもの
  • 写真をクリックすると、スワイプして写真を拡大表示させることができる
Instashowで埋め込んだもの

このプラグインを使うと、Instagramの写真を使って、ブログ内にギャラリーが作れるようなイメージでInstagramを埋め込むことができます。また、写真の自動切り替えや、アクションをしたときに様々な形で写真を見ることもできるため、ブログを見る人にとっても、面白くておしゃれなものに感じることができるでしょう。
WordPressのブログ内でInstagramの写真を楽しんでほしいという方は、こちらのプラグインで埋め込むことをおすすめします。

これで今回紹介するプラグインの特徴についての説明は終わりで、次の章からいよいよInstagramの埋め込み方法について解説していきます。


Instagram埋め込みの定番プラグイン「Instagram フィード」の使い方

Instagram フィードの説明文
まずは、一番使われているInstagramの埋め込みプラグインの「Instagram フィード」の使い方について、説明していきます。

Step1:プラグインとInstagramアカウントを連携させる

プラグイン「Instagram フィード」をインストール・有効化したら、WordPressの管理画面から「Instagram Feed」を選択します。
Instagram feedの設定画面
すると、以上のような画面が出てくるので、赤枠で囲まれた部分をクリックして、自分のInstagramのアカウントと連携させていきます。
連携ができていると、以下のようにあなたのInstagramのアカウントが表示されるようになります。
Instagram feedの設定画面
また、この画面では、以下のようなことを設定することができます。

  • Preserve settings when plugin is removed…チェックを入れると、このプラグインをアンインストールして、またインストールした際に、前の設定を引き継ぐことができるようになります。
  • Check for new posts every…新規投稿をWordPress上に反映させる間隔を設定することができます。

最後に設定し終えたら必ず、「変更を保存」をクリックするようにしましょう。

Step2:埋め込み表示に関する詳細設定をする

続いて、Instagramの埋め込み表示に関しての詳細設定について1つずつ説明していきます。
その前に、ページ上部にあるタブを「2.Customize」に変更しておきましょう。

General

Instagram feedの設定画面
最初に一般設定から見ていきましょう。

  • Width of Feed…埋め込み時の横幅をピクセルまたはパーセントで設定することができます。パーセントの場合だと、Instagramを埋め込むスペースに対するInstagramの横幅の割合を設定することになります。
  • Height of Feed…埋め込み時の縦幅をピクセルまたはパーセントで設定することができます。
  • Background Color…埋め込み時の背景の色を設定することができます。

Layout

Instagram feedの設定画面
次にレイアウト設定についてです。

  • Number of Photos…一番最初に表示させる写真の枚数を設定することができます。
  • Number of Columns…一行に何枚の写真を表示させるかを設定することができます。
  • Padding around Images…写真の周りの余白のサイズを設定することができます。
  • Disable mobile layout…通常はスマホで表示されるときは、画面幅で収まるようなスマホ用のレイアウトで表示されるようになっているのですが、チェックを入れるとスマホ用レイアウトを無効にすることができます。

Photos

Instagram feedの設定画面
続いて、写真設定を見ていきましょう。

  • Sort Photos By…写真の並び順を「新しい順」「ランダム表示」の中から選択することができます。
  • Image Resolution…画像解像度に関する設定ですが、そのままでいいかと思います。

Header

Instagram feedの設定画面
その次はヘッダー設定についてです。

  • Show Feed Header…ヘッダーを表示させるかどうかを選択することができます。
  • Header Size…ヘッダーのサイズを選択することができます。
  • Show Bio Text…プロフィール文を表示させるかどうかを選択することができます。
  • Header Text Color…ヘッダーの文字の色を設定することができます。

‘Load More’ Button

Instagram feedの設定画面
その次は「さらに表示する」ボタンに関して設定していきます。

  • Show the ‘Load More’ button…「さらに表示する」ボタンを表示させるかどうかを選択することができます。
  • Button Background Color…ボタンの色を設定することができます。
  • Button Text Color…ボタンに表示される文字の色を設定することができます。
  • Button Text…ボタンに表示される文章を設定することができます。

‘Follow’ Button

Instagram feedの設定画面
続いては、「フォローする」のボタンに関する設定です。

  • Show the Follow button…「フォローする」ボタンを表示させるかどうかを設定することができます。
  • Button Background Color…ボタンの色を設定することができます。
  • Button Text Color…ボタンに表示される文字の色を設定することができます。
  • Button Text…ボタンに表示される文章を設定することができます。

Misc

Instagram feedの設定画面
Instagram feedの設定画面
最後にその他の設定に関して見ていきましょう。ここの部分に関しては特にこだわりがなければ、そのままで構いません。

  • Custom CSS…CSSを使ってカスタマイズをしたい時は、この部分で行うことができます。
  • Custom JavaScript…JavaScriptを使ってカスタマイズをしたい時は、この部分で行うことができます。
  • Are you using an Ajax powered theme?…Ajaxで動くテーマを使っているときにチェックを入れます。
  • Cache error API recheck…キャッシュエラーを防ぐための項目になるので、基本的にチェックを入れましょう。
  • Enable Backup Caching…キャッシュが使用できなくなった時に、バックアップを作成するかどうかを選択することができます。
  • Force cache to clear on interval…新規投稿に対する自動更新がされなくなってしまった際にチェックを入れることで、強制的にキャッシュをクリアにして、Instagramから新しいデータを取得することができます。
  • Disable Icon Font…チェックを入れると、アイコンフォントが使用できなくなります。
  • Icon Method…アイコン方式を「SVG方式」「アイコンフォント(Font File)」から選択することができます。

そしてここまで設定が終わったら、必ず「変更を保存」をクリックしておきましょう。



Step3:ショートコードをコピーして貼り付ける

そして最後のStepとして、ショートコードを取得して貼り付けるという作業を行います。
まず、上部に表示されているタブを「3.Display your Feed」に変更しましょう。
Instagram feedの設定画面
すると赤枠で囲い込んだ部分にショートコードが表示されているので、こちらをコピーして、貼り付けたいページやウィジェットの「テキスト」部分にこちらを貼り付けて、きちんと表示されれば埋め込み完了です。

また、Instagramを複数の場所に埋め込み、かつデザインを少しずつ変えたい際は、[instagram-feed ●●●=○○○]のようにコード内に条件文をつけることで、埋め込む場所ごとにさらに細かい設定をすることも可能です。

例えば、ある部分だけ、ヘッダーをつけたくない場合は、

[Instagram-feed showheader=false]

のように設定するだけで、そのコードを入れた部分のInstagramの埋め込みには、ヘッダーが表示されなくなります。

この他に関しては、「3.Display your Feed」の「Multiple Feeds」の項目のところに、可能な設定とその条件文が記載された表がありますので、そちらを参照して下さい。

以上でプラグイン「Instagram フィード」の使い方に関しての説明は終わりです。


オシャレな画像をWordPressにもオシャレに埋め込める「Instagram Feed(Instashow Lite)」の使い方

Instashow Liteの説明文
続いては、オシャレにInstagramの写真を埋め込めるということで人気急上昇中のプラグイン「Instagram Feed(Instashow Lite)」の使い方について紹介します。

Step1:プラグインとInstagramアカウントを連携させる

プラグイン「Instagram Feed」をインストール・有効化したら、WordPressの管理画面から「Instashow」を選択します。
Instashowの設定画面
すると、上記のような画面が表示されるので、赤枠で囲い込んでいるボタンをクリックして、あなたのInstagramアカウントと連携させます。
そして、Instagramアカウントの連携ができていれば、以下のように表示されます。
Instashowの設定画面
連携が終わったら、続いては埋め込み表示の詳細設定に移っていきましょう。

Step2:埋め込み表示に関する詳細設定をする

連携が終わったところで、続いては埋め込み表示の詳細設定に移っていきましょう。

Sizes

Instashowの設定画面
まずはサイズ設定について見ていきましょう。

  • Columns…一行に何枚の写真を表示させるかを選択することができます。
  • Rows…写真を何行で表示させるかを選択することができます。
Instashowの設定画面

UI

続いてUIの設定を見ていきます。

  • Arrows…別の写真を表示させるための矢印を表示させるかを選択することができます。
  • Drag…スワイプをした際に別の写真を表示させるための矢印を表示させるかを選択することができます。
  • Autorotation…自動的に写真が移り変わる時間を設定することができます。(0だと自動的に写真が移り変わることはありません。)
  • Pause on hover…チェックを入れると、写真にポインターがあてられている間は自動的に写真が移り変わらないようになります。
  • Animation effect…写真が移り変わる時に、スライドする形で新しい写真を表示させるか、浮き出るような形で新しい写真を表示させるかを選択することができます。
  • Animation speed…写真が移り変わるまでの時間を設定することができます。
  • Easing…写真が移り変わる際のエフェクトを選択することができます。
  • Popup image switch speed…クリックした画像がスワイプされるまでの時間を設定することができます。
  • Popup image switch easing…クリックした画像がスワイプされる際のエフェクトを選択することができます。



Step3:ショートコードをコピーして貼り付ける

そして、設定が終わったら、「</>Get Shortcode」と書かれた部分をクリックすると、赤枠で囲い込んだようにショートコードが表示されます。
Instashowの設定画面
このショートコードをInstagramを埋め込みたいページやウィジェットの「テキスト」部分に貼り付けて、ちゃんと表示されれば埋め込み完了です。



番外編:Instagramの投稿を埋め込み表示させる方法

instagramの3Dアイコン

最後に番外編として、Instagramの投稿を埋め込み表示させる方法について説明していきます。
まず、埋め込みたい投稿を見つけたら、投稿の右下にある「」をクリックします。
instagramの投稿ページ
そして、次の画面で「埋め込み」をクリックします。
instagramの投稿ページ
そうすると、次の画面で埋め込みコードが表示されるので、「埋め込みコードをコピー」でコードをコピーします。
instagramの投稿の埋め込みコードの画面
そして、コピーしたコードを貼り付けたいページやウィジェットのテキスト部分に貼り付ければ、投稿を埋め込むことができます。


さいごに

ハート型マグカップに入ったコーヒー

今回紹介したInstagramの埋め込み方を参考して、是非写真で彩られたオシャレなサイトを作り上げてください。
最後に今回の記事のポイントをまとめておきます。

プラグイン「Instagram フィード」で埋め込んだ時の特徴
  • 一度にたくさんの写真を見ることができる
  • 写真をクリックするとInstagramの投稿ページに飛ぶようになっている
  • ヘッダーにあなたのアカウント名や説明文を表示させることができる
  • フォローボタンを設置することができる
  • ブログから自分のInstagramのページを見てほしいならオススメ
プラグイン「Instagram Feed(Instashow Lite)」で埋め込んだ時の特徴
  • 限られたスペースの中で写真を切り替えることで様々な写真を表示させることができる
  • 自動で写真を切り替えて、動きを作ることができる
  • 写真にポインターをあてると、投稿時のコメントが表示される
  • 写真をクリックすると、スワイプして写真を拡大表示させることができる
  • ブログ内で自分のInstagramの写真を楽しんでほしいならオススメ
Instagramの埋め込みプラグインを使ったInstagramの埋め込み方
  1. プラグインとInstagramアカウントを連携させる
  2. 埋め込み表示に関する詳細設定をする
  3. ショートコードをコピーして貼り付ける