2017/10/08

【まるで説明書】InstagramFeed-インスタグラムをWordPressブログに表示させる方法・問題解決まとめ

 
アイキャッチ

スポンサーリンク


 
この記事を書いている人 - WRITER -
『カナエ菓子店』というお菓子屋をしています。 お菓子作ったり、ブログを書いたり、絵を描いたりしています。 食べる事とお酒と家族が大好き。
詳しいプロフィールはこちら

 

こんにちは、かなえです。

かなえ

 

私、SNSのプロフィールページをブログに貼り付けています。

 

Facebook、Twitter、Instagramのプロフィールページの貼り付け方法まとめはコチラ↓

 

Instagramは、プロフィールページをブログに張り付ける事のできる『Instagram Feed』というプラグインを使用しています。

(↑『Instagram Feed』で張り付けたプロフィールページ)

 

ブログ初心者の私…この『Instagram Feed』の設定で、色々とつまずきまして…

そーとー試行錯誤しました…。(基本的な設定は本当に簡単です!)

 

この記事では、試行錯誤しまくった私が、『Instagram Feed』の使い方や問題解決方法をまとめています。

説明書みたいにつかってください!

 

この記事はこんな人にオススメ

  • Instagramのプロフィールページを自分のサイトに載せたい
  • プラグイン『Instagram feed』を設定しているけど、上手くいかない
  • プラグイン『Instagram Feed』を使っているけど、問題解決方法がわからない
  • 色々検索しても、書いてることが難しくて分からない
  • 色々やりたくて検索するけど、HTML?CSS?…うるさいだまれと思ってしまう人

目次

『Instagram Feed』問題の解決方法まとめ

 

私が『Instagram Feed』を使っていてぶち当たった問題と、解決方法をまとめておきます。

 

1)『Instagram Feed』の基本設定方法が知りたい

 

コチラを参考にしてください

 

2)コードを記事内に張り付ける方法が知りたい

 

コチラを参考にしてください↓

コードを記事に張り付ける方法

 

3)自分以外のアカウントのユーザーID、別アカウントのユーザーIDが知りたい

 

コチラから調べる事が出来ます

 

4)自分以外のアカウント、別アカウントのプロフィールページを張り付けたい

 

[instagram-feed id="○○○○○○○(ユーザーIDの数字)"]

を記事内に張り付ければOK

 

詳しくはコチラを参考にしてください

 

スポンサーリンク

5)スマホで見ると表示が変になる

 

ココをチェックしてみてください

 

1.『Customize』タグの『Layout』の『Disable mobile layout』にチェックを入れていますか?

「モバイルで表示する時も、設定どおりに表示しますか?」という意味のチェックなので、ここにチェックをいれていないと、スマホなどで見た時に表示がおかしくなります。

 

2.『Customize』タグの『General』の『Width of Feed』が100%以外になっていませんか?

ここが100%じゃないと、スマホなどで表示た時に細く表示されてしまいます。

 

詳しくはコチラ↓

 

6)基本設定は変えずに、写真の表示数や列数を変更して表示したい

 

[instagram-feed num=○(表示数) cols=○(列数)]

を張り付ければOK

 

例)表示数12、列数4にしたい場合

[instagram-feed num=12 cols=4]

 

7)基本設定は変えずに、幅を変更して表示したい

 

 [instagram-feed widthunit=○(% or px) width=○(数字)] 

を張り付ければOK

 

例)幅を50%にしたい場合

[instagram-feed widthunit=% width=50]

例)幅を300pxにしたい場合

[instagram-feed widthunit=px width=300]

 

8)基本設定は変えずに、高さを変更して表示したい

 

 [instagram-feed heightunit=○(% or px) height=○(数字)] 

を張り付ければOK

 

例)高さを80%にしたい場合

[instagram-feed heightunit=% height=80]

例)高さを500pxにしたい場合

[instagram-feed heightunit=px height=500]

 

9)基本設定は変更せずに、背景色を変更して表示したい

 

 [instagram-feed background=○○○○○○(カラーコード)] 

を張り付ければOK

 

カラーコードはコチラから調べる事ができます

 

例)背景色を白(カラーコード:#FFFFFF)の場合

[instagram-feed background=#FFFFFF]

 

10)基本設定は変更せずに、新着順かランダム表示か切り替えたい

 

新着順にしたいとき

[instagram-feed sortby=none]

を張り付ければOK

 

ランダム表示にしたいとき

 [instagram-feed sortby=random] 

を張り付ければOK

 

11)基本設定は変更せずに、左右の余白の幅を変えたい

 

 [instagram-feed imagepaddingunit=○(%or px) imagepadding=○(数字)] 

を張り付ければOK

 

例)左右の余白を10pxにしたい場合

[instagram-feed imagepaddingunit=px  imagepadding=10]

 

12)基本設定は変更せずに、ヘッダーの表示・非表示を切り替えたい

 

表示させたい時

 [instagram-feed showheader=true] 

を張り付ければOK

 

非表示にしたい時

 [instagram-feed showheader=false] 

を張り付ければOK

 

13)基本設定は変更せずに、ヘッダーのプロフィール紹介文の表示・非表示を切り替えたい

 

表示させたい時

 [instagram-feed showbio=true] 

を張り付ければOK

 

非表示にしたい時

 [instagram-feed showbio=false] 

を張り付ければOK

 

14)基本設定は変更せずに、ヘッダーの文字色を変更したい

 

 [instagram-feed headercolor=○○○○○○(カラーコード)] 

を張り付ければOK

 

カラーコードはコチラから調べる事ができます

 

例)ヘッダーの文字色を赤(カラーコード:#FF0000)の場合

[instagram-feed headercolor=#FF0000]

 

15)基本設定は変更せずに、『Load more』ボタンの表示・非表示を切り替えたい

 

表示させたい時

 [instagram-feed showbutton=true] 

を張り付ければOK

 

非表示にしたい時

 [instagram-feed showbutton=false] 

を張り付ければOK

 

16)基本設定は変更せずに、『Load more』ボタンのボタン色・文字色を変更したい

 

ボタン色の変更

 [instagram-feed buttoncolor=○○○○○○(カラーコード)] 

を張り付ければOK

 

例)ボタン色を赤(カラーコード:#FF0000)の場合

[instagram-feed buttoncolor=#FF0000]

 

 

文字色の変更

 [instagram-feed buttontextcolor=○○○○○○(カラーコード)] 

を張り付ければOK

 

例)ボタンの文字色を黄色(カラーコード:#FFFF00)の場合

[instagram-feed buttontextcolor=#FFFF00]

 

 

カラーコードはコチラから調べる事ができます

 

17)基本設定は変更せずに、『Load more』ボタンの表記を変更したい

 

 [instagram-feed buttontext="○○○○○○(変更したい表記)"] 

を張り付ければOK

 

例)ボタンの表記を『もっと写真を見てみる!』にしたい場合

[instagram-feed buttontext="もっと写真を見てみる!"]

 

18)基本設定は変更せずに、『Follow on Instagram』 ボタンの表示・非表示を切り替えたい

 

表示させたい時

 [instagram-feed showfollow=true] 

を張り付ければOK

 

非表示にしたい時

 [instagram-feed showfollow=false] 

を張り付ければOK

 

19)基本設定は変更せずに、『Follow on Instagram』ボタンのボタン色・文字色を変更したい

 

ボタン色の変更

 [instagram-feed followcolor=○○○○○○(カラーコード)] 

を張り付ければOK

 

例)ボタン色を赤(カラーコード:#FF0000)の場合

[instagram-feed buttoncolor=#FF0000]

 

 

文字色の変更

 [instagram-feed followtextcolor=○○○○○○(カラーコード)] 

を張り付ければOK

 

例)ボタンの文字色を黄色(カラーコード:#FFFF00)の場合

[instagram-feed followtextcolor=#FFFF00]

 

 

カラーコードはコチラから調べる事ができます

 

20)基本設定は変更せずに、『Follow on Instagram』ボタンの表記を変更したい

 

 [instagram-feed followtext="○○○○○○(変更したい表記)"] 

を張り付ければOK

 

例)ボタンの表記を『フォローしてね!』にしたい場合

[instagram-feed buttontext="フォローしてね!"]

 

まとめ

 

『Instagram Feed』の使い方、問題・疑問の解決方法をまとめてみましたが、いかがでしたか?

項目の6~20は、「基本設定は変えたくないけど、ここに表示する時だけ設定を変えたい!」みたいな時に、ぜひ使ってみて下さい!

 

 

最後まで読んでいただいてありがとうございました。

ではまた!

 

 

ド初心者の私がイチからブログの勉強を始めて、運営が出来るようになるまでBlog Marketing School【BMS】(ブログマーケティングスクール)で勉強しました。

 

このブログで使用しているテーマ(WordPressテーマ『ELEPHANT~エレファント~』)はコチラ↓

この記事を書いている人 - WRITER -
『カナエ菓子店』というお菓子屋をしています。 お菓子作ったり、ブログを書いたり、絵を描いたりしています。 食べる事とお酒と家族が大好き。
詳しいプロフィールはこちら
 

Copyright© カナエ菓子店の人のブログ , 2017 All Rights Reserved.