【まるで説明書】InstagramFeed-インスタグラムをWordPressブログに表示させる方法・問題解決・カスタマイズまとめ
こんにちは、かなえです。
私、SNSのプロフィールページをブログに貼り付けています。
Facebook、Twitter、Instagramのプロフィールページの貼り付け方法まとめはコチラ↓
Instagramは、プロフィールページをブログに張り付ける事のできる『Instagram Feed』というプラグインを使用しています。
目次
- 1 『Instagram Feed』問題の解決方法まとめ
- 1.1 １）『Instagram Feed』の基本設定方法が知りたい
- 1.2 ２）コードを記事内に張り付ける方法が知りたい
- 1.3 ３）自分以外のアカウントのユーザーID、別アカウントのユーザーIDが知りたい
- 1.4 ４）自分以外のアカウント、別アカウントのプロフィールページを張り付けたい
- 1.5 ５）スマホで見ると表示が変になる
- 1.6 ６）基本設定は変えずに、写真の表示数や列数を変更して表示したい
- 1.7 ７）基本設定は変えずに、幅を変更して表示したい
- 1.8 ８）基本設定は変えずに、高さを変更して表示したい
- 1.9 ９）基本設定は変更せずに、背景色を変更して表示したい
- 1.10 １０）基本設定は変更せずに、新着順かランダム表示か切り替えたい
- 1.11 １１）基本設定は変更せずに、左右の余白の幅を変えたい
- 1.12 １２）基本設定は変更せずに、ヘッダーの表示・非表示を切り替えたい
- 1.13 １３）基本設定は変更せずに、ヘッダーのプロフィール紹介文の表示・非表示を切り替えたい
- 1.14 １４）基本設定は変更せずに、ヘッダーの文字色を変更したい
- 1.15 １５）基本設定は変更せずに、『Load more』ボタンの表示・非表示を切り替えたい
- 1.16 １６）基本設定は変更せずに、『Load more』ボタンのボタン色・文字色を変更したい
- 1.17 １７）基本設定は変更せずに、『Load more』ボタンの表記を変更したい
- 1.18 １８）基本設定は変更せずに、『Follow on Instagram』 ボタンの表示・非表示を切り替えたい
- 1.19 １９）基本設定は変更せずに、『Follow on Instagram』ボタンのボタン色・文字色を変更したい
- 1.20 ２０）基本設定は変更せずに、『Follow on Instagram』ボタンの表記を変更したい
- 2 まとめ
kanae_kai
【※工房を閉めたので、現在ご予約はお受けしておりません※】
お問い合わせLINE→ID：＠ijl1689c
↓『カナエ菓子店』でYouTubeしてます↓
ブログ初心者の私…この『Instagram Feed』の設定で、色々とつまずきまして…
そーとー試行錯誤しました…。（基本的な設定は本当に簡単です！）
この記事では、試行錯誤しまくった私が、『Instagram Feed』の使い方や問題解決方法をまとめています。
説明書みたいにつかってください！
この記事はこんな人にオススメ
- Instagramのプロフィールページを自分のサイトに載せたい
- プラグイン『Instagram feed』を設定しているけど、上手くいかない
- プラグイン『Instagram Feed』を使っているけど、問題解決方法がわからない
- 色々検索しても、書いてることが難しくて分からない
- 色々やりたくて検索するけど、HTML?CSS?…うるさいだまれと思ってしまう人
この記事に貼られている画像の内容と多少違う場合がありますが、ご了承ください。
『Instagram Feed』問題の解決方法まとめ
私が『Instagram Feed』を使っていてぶち当たった問題と、解決方法をまとめておきます。
１）『Instagram Feed』の基本設定方法が知りたい
コチラを参考にしてください
『Instagram Feed』の基本的な使い方、基本設定はコチラ↓
【１番分かりやすい】InstagramFeed-インスタグラムをWordPressブログの記事内やウィジェットに表示するプラグインの使い方
２）コードを記事内に張り付ける方法が知りたい
コチラを参考にしてください↓
３）自分以外のアカウントのユーザーID、別アカウントのユーザーIDが知りたい
コチラから調べる事が出来ます
（※現在は調べられなくなってしまいました）
４）自分以外のアカウント、別アカウントのプロフィールページを張り付けたい
を記事内に張り付ければOK（※現在は出来なくなってしまいました）
詳しくはコチラを参考にしてください（※現在は出来なくなってしまいました）
５）スマホで見ると表示が変になる
ココをチェックしてみてください
１．『Customize』タグの『Layout』の『Disable mobile layout』にチェックを入れていますか？
「モバイルで表示する時も、設定どおりに表示しますか？」という意味のチェックなので、ここにチェックをいれていないと、スマホなどで見た時に表示がおかしくなります。
２．『Customize』タグの『General』の『Width of Feed』が100％以外になっていませんか？
ここが100％じゃないと、スマホなどで表示た時に細く表示されてしまいます。
６）基本設定は変えずに、写真の表示数や列数を変更して表示したい
を張り付ければOK
例）表示数12、列数４にしたい場合
[instagram-feed num=12 cols=4]
７）基本設定は変えずに、幅を変更して表示したい
を張り付ければOK
例）幅を50％にしたい場合
[instagram-feed widthunit=% width=50]
例）幅を300pxにしたい場合
[instagram-feed widthunit=px width=300]
８）基本設定は変えずに、高さを変更して表示したい
を張り付ければOK
例）高さを80％にしたい場合
[instagram-feed heightunit=% height=80]
例）高さを500pxにしたい場合
[instagram-feed heightunit=px height=500]
９）基本設定は変更せずに、背景色を変更して表示したい
を張り付ければOK
カラーコードはコチラから調べる事ができます
例）背景色を白（カラーコード：#FFFFFF）の場合
[instagram-feed background=#FFFFFF]
１０）基本設定は変更せずに、新着順かランダム表示か切り替えたい
新着順にしたいとき
を張り付ければOK
ランダム表示にしたいとき
を張り付ければOK
１１）基本設定は変更せずに、左右の余白の幅を変えたい
を張り付ければOK
例）左右の余白を10pxにしたい場合
[instagram-feed imagepaddingunit=px imagepadding=10]
１２）基本設定は変更せずに、ヘッダーの表示・非表示を切り替えたい
表示させたい時
を張り付ければOK
非表示にしたい時
を張り付ければOK
１３）基本設定は変更せずに、ヘッダーのプロフィール紹介文の表示・非表示を切り替えたい
表示させたい時
を張り付ければOK
非表示にしたい時
を張り付ければOK
１４）基本設定は変更せずに、ヘッダーの文字色を変更したい
を張り付ければOK
カラーコードはコチラから調べる事ができます
例）ヘッダーの文字色を赤（カラーコード：#FF0000）の場合
[instagram-feed headercolor=#FF0000]
１５）基本設定は変更せずに、『Load more』ボタンの表示・非表示を切り替えたい
表示させたい時
を張り付ければOK
非表示にしたい時
を張り付ければOK
１６）基本設定は変更せずに、『Load more』ボタンのボタン色・文字色を変更したい
ボタン色の変更
を張り付ければOK
例）ボタン色を赤（カラーコード：#FF0000）の場合
[instagram-feed buttoncolor=#FF0000]
文字色の変更
を張り付ければOK
例）ボタンの文字色を黄色（カラーコード：#FFFF00）の場合
[instagram-feed buttontextcolor=#FFFF00]
カラーコードはコチラから調べる事ができます
１７）基本設定は変更せずに、『Load more』ボタンの表記を変更したい
を張り付ければOK
例）ボタンの表記を『もっと写真を見てみる！』にしたい場合
[instagram-feed buttontext="もっと写真を見てみる！"]
１８）基本設定は変更せずに、『Follow on Instagram』 ボタンの表示・非表示を切り替えたい
表示させたい時
を張り付ければOK
非表示にしたい時
を張り付ければOK
１９）基本設定は変更せずに、『Follow on Instagram』ボタンのボタン色・文字色を変更したい
ボタン色の変更
を張り付ければOK
例）ボタン色を赤（カラーコード：#FF0000）の場合
[instagram-feed buttoncolor=#FF0000]
文字色の変更
を張り付ければOK
例）ボタンの文字色を黄色（カラーコード：#FFFF00）の場合
[instagram-feed followtextcolor=#FFFF00]
カラーコードはコチラから調べる事ができます
２０）基本設定は変更せずに、『Follow on Instagram』ボタンの表記を変更したい
を張り付ければOK
例）ボタンの表記を『フォローしてね！』にしたい場合
[instagram-feed buttontext="フォローしてね！"]
まとめ
『Instagram Feed』の使い方、問題・疑問の解決方法をまとめてみましたが、いかがでしたか？
項目の６～２０は、「基本設定は変えたくないけど、ここに表示する時だけ設定を変えたい！」みたいな時に、ぜひ使ってみて下さい！
最後まで読んでいただいてありがとうございました。
ではまた！
ド初心者の私がイチからブログの勉強を始めて、運営が出来るようになるまでBlog Marketing School【BMS】（ブログマーケティングスクール）で勉強しました。
