LinksInstagramの埋め込み方※写真もWordPressもこだわる人へInstagramは今最もホットなSNSといっても過言ではありません。あなたがInstagramをやっているのであれば、是非あなたのWordPressブログと連携させてみましょう。若い女性ユーザーの多いInstagramとWordPressを連携することができれば、こういったユーザー層をあなたのブログに取り込むことができます。Instagramのオシャレな写真をブログに載せることができれば、あなたのブログはもっと華やかになるでしょう。あなたがインスタ映えなどInstagramの写真に強いこだわりを持っているのであれば、ブログでのInstagramの埋め込み方もこだわってみてはいかがでしょうか。実はInstagram埋め込み用のプラグインにも目的にあわせて様々なプラグインが存在し、用途にあったプラグインを使うことでよりあなたの理想にあった形で、あなたのブログにInstagramを埋め込むことができるのです。オシャレに、よりあなたのこだわりにあった形でInstagramを埋め込むことができますよ。いうことで今回は、こだわりの強いあなたに向けて、WordPressのプラグインを使ったInstagramの埋め込み方について、「こだわって」紹介していきます。Lite)」の使い方Step1:プラグインとInstagramアカウントを連携させるStep2:埋め込み表示に関する詳細設定をするStep3:ショートコードをコピーして貼り付ける番外編:Instagramの投稿を埋め込み表示させる方法さいごにWordPressでのInstagramの埋め込みに役立つ2つのプラグインを紹介それではWordPressでのInstagramの埋め込みでよく使われる2つのプラグインを紹介していきます。それぞれのプラグインの特徴についても触れていくので、自分にあったプラグインでInstagramを埋め込むようにしてください。フィードこのプラグインは、以前から定番プラグインとして、今最もInstagramの埋め込みに使われているプラグインになります。フィードで埋め込まれたInstagramはこのような感じで表示されます。フィード」で埋め込んだ時の特徴としては以下の通りです。フィード」は、WordPressから自分のInstagramのページに飛んでもらえるような仕組みを作るという意味ではすごく優れたプラグインといっていいでしょう。そのため、自分のInstagramページを是非見てほしいという方はこちらのプラグインを使うことをおすすめします。フィード」が以前からあるものに対して、このプラグインは、オシャレにInstagramを埋め込めるということで、最近注目されているプラグインになります。Lite)」で埋め込んだ時の特徴としては以下の通りです。限られたスペースの中で写真を切り替えることで様々な写真を表示させることができる自動で写真を切り替えて、埋め込み部分に動きを作ることができる写真にポインターをあてると、投稿時のコメントが表示される写真をクリックすると、スワイプして写真を拡大表示させることができるこのプラグインを使うと、Instagramの写真を使って、ブログ内にギャラリーが作れるようなイメージでInstagramを埋め込むことができます。写真の自動切り替えや、アクションをしたときに様々な形で写真を見ることもできるため、ブログを見る人にとっても、面白くておしゃれなものに感じることができるでしょう。WordPressのブログ内でInstagramの写真を楽しんでほしいという方は、こちらのプラグインで埋め込むことをおすすめします。これで今回紹介するプラグインの特徴についての説明は終わりで、次の章からいよいよInstagramの埋め込み方法について解説していきます。フィード」の使い方について、説明していきます。Feed」を選択します。すると、以上のような画面が出てくるので、赤枠で囲まれた部分をクリックして、自分のInstagramのアカウントと連携させていきます。連携ができていると、以下のようにあなたのInstagramのアカウントが表示されるようになります。この画面では、以下のようなことを設定することができます。removed...チェックを入れると、このプラグインをアンインストールして、またインストールした際に、前の設定を引き継ぐことができるようになります。every...新規投稿をWordPress上に反映させる間隔を設定することができます。最後に設定し終えたら必ず、「変更を保存」をクリックするようにしましょう。Step2:埋め込み表示に関する詳細設定をする続いて、Instagramの埋め込み表示に関しての詳細設定について1つずつ説明していきます。その前に、ページ上部にあるタブを「2.Customize」に変更しておきましょう。General最初に一般設定から見ていきましょう。Feed...埋め込み時の横幅をピクセルまたはパーセントで設定することができます。パーセントの場合だと、Instagramを埋め込むスペースに対するInstagramの横幅の割合を設定することになります。Feed...埋め込み時の縦幅をピクセルまたはパーセントで設定することができます。Color...埋め込み時の背景の色を設定することができます。Layout次にレイアウト設定についてです。Photos...一番最初に表示させる写真の枚数を設定することができます。Columns...一行に何枚の写真を表示させるかを設定することができます。Images...写真の周りの余白のサイズを設定することができます。layout...通常はスマホで表示されるときは、画面幅で収まるようなスマホ用のレイアウトで表示されるようになっているのですが、チェックを入れるとスマホ用レイアウトを無効にすることができます。Photos続いて、写真設定を見ていきましょう。By...写真の並び順を「新しい順」「ランダム表示」の中から選択することができます。Resolution...画像解像度に関する設定ですが、そのままでいいかと思います。Headerその次はヘッダー設定についてです。Header...ヘッダーを表示させるかどうかを選択することができます。Size...ヘッダーのサイズを選択することができます。Text...プロフィール文を表示させるかどうかを選択することができます。Color...ヘッダーの文字の色を設定することができます。Buttonその次は「さらに表示する」ボタンに関して設定していきます。button...「さらに表示する」ボタンを表示させるかどうかを選択することができます。Color...ボタンの色を設定することができます。Color...ボタンに表示される文字の色を設定することができます。Text...ボタンに表示される文章を設定することができます。Button続いては、「フォローする」のボタンに関する設定です。button...「フォローする」ボタンを表示させるかどうかを設定することができます。Color...ボタンの色を設定することができます。Color...ボタンに表示される文字の色を設定することができます。Text...ボタンに表示される文章を設定することができます。Misc最後にその他の設定に関して見ていきましょう。ここの部分に関しては特にこだわりがなければ、そのままで構いません。CSS...CSSを使ってカスタマイズをしたい時は、この部分で行うことができます。JavaScript...JavaScriptを使ってカスタマイズをしたい時は、この部分で行うことができます。theme?...Ajaxで動くテーマを使っているときにチェックを入れます。recheck...キャッシュエラーを防ぐための項目になるので、基本的にチェックを入れましょう。Caching...キャッシュが使用できなくなった時に、バックアップを作成するかどうかを選択することができます。interval...新規投稿に対する自動更新がされなくなってしまった際にチェックを入れることで、強制的にキャッシュをクリアにして、Instagramから新しいデータを取得することができます。Font...チェックを入れると、アイコンフォントが使用できなくなります。File)」から選択することができます。ここまで設定が終わったら、必ず「変更を保存」をクリックしておきましょう。Step3:ショートコードをコピーして貼り付けるそして最後のStepとして、ショートコードを取得して貼り付けるという作業を行います。Feed」に変更しましょう。すると赤枠で囲い込んだ部分にショートコードが表示されているので、こちらをコピーして、貼り付けたいページやウィジェットの「テキスト」部分にこちらを貼り付けて、きちんと表示されれば埋め込み完了です。●●●=○○○]のようにコード内に条件文をつけることで、埋め込む場所ごとにさらに細かい設定をすることも可能です。showheader=false]のように設定するだけで、そのコードを入れた部分のInstagramの埋め込みには、ヘッダーが表示されなくなります。Feeds」の項目のところに、可能な設定とその条件文が記載された表がありますので、そちらを参照して下さい。フィード」の使い方に関しての説明は終わりです。Lite)」の使い方について紹介します。Feed」をインストール・有効化したら、WordPressの管理画面から「Instashow」を選択します。すると、上記のような画面が表示されるので、赤枠で囲い込んでいるボタンをクリックして、あなたのInstagramアカウントと連携させます。Instagramアカウントの連携ができていれば、以下のように表示されます。連携が終わったら、続いては埋め込み表示の詳細設定に移っていきましょう。Step2:埋め込み表示に関する詳細設定をする連携が終わったところで、続いては埋め込み表示の詳細設定に移っていきましょう。Sizesまずはサイズ設定について見ていきましょう。Columns...一行に何枚の写真を表示させるかを選択することができます。Rows...写真を何行で表示させるかを選択することができます。UI続いてUIの設定を見ていきます。Arrows...別の写真を表示させるための矢印を表示させるかを選択することができます。Drag...スワイプをした際に別の写真を表示させるための矢印を表示させるかを選択することができます。Autorotation...自動的に写真が移り変わる時間を設定することができます。(0だと自動的に写真が移り変わることはありません。hover...チェックを入れると、写真にポインターがあてられている間は自動的に写真が移り変わらないようになります。effect...写真が移り変わる時に、スライドする形で新しい写真を表示させるか、浮き出るような形で新しい写真を表示させるかを選択することができます。speed...写真が移り変わるまでの時間を設定することができます。Easing...写真が移り変わる際のエフェクトを選択することができます。speed...クリックした画像がスワイプされるまでの時間を設定することができます。easing...クリックした画像がスワイプされる際のエフェクトを選択することができます。Shortcode」と書かれた部分をクリックすると、赤枠で囲い込んだようにショートコードが表示されます。このショートコードをInstagramを埋め込みたいページやウィジェットの「テキスト」部分に貼り付けて、ちゃんと表示されれば埋め込み完了です。最後に番外編として、Instagramの投稿を埋め込み表示させる方法について説明していきます。埋め込みたい投稿を見つけたら、投稿の右下にある「...」をクリックします。次の画面で「埋め込み」をクリックします。すると、次の画面で埋め込みコードが表示されるので、「埋め込みコードをコピー」でコードをコピーします。コピーしたコードを貼り付けたいページやウィジェットのテキスト部分に貼り付ければ、投稿を埋め込むことができます。さいごに今回紹介したInstagramの埋め込み方を参考して、是非写真で彩られたオシャレなサイトを作り上げてください。最後に今回の記事のポイントをまとめておきます。