2017/10/08

【InstagramFeed】スマホでも綺麗にインスタグラムをWordPressブログに表示する方法

 
アイキャッチ

スポンサーリンク


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

 

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

かなえ

 

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

 

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

 

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

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

 

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

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

 

『Instagram Feed』の基本的な使い方、基本設定はコチラ↓

 

この記事では、試行錯誤しまくった私が、『Instagram Feed』の使い方でつまづいた、幅の設定について書いています。

「PCでは綺麗に表示できるけど、スマホなどで綺麗に表示できない!」って方は、ぜひ、読んでみて下さい!

 

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

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

 

私は超試行錯誤しましたが、分かってしまうと作業は簡単なので、大丈夫ですよ~!

ブログ初心者のブログ初心者によるブログ初心者のための説明記事だと思って読んでください!

 

『Instagram Feed』使い方【応用】PCで小さく、スマホでも綺麗に表示する方法!

 

基本設定で幅が設定できるんですが、100%がオススメです!

理由は、スマホで表示されたときに細くなっちゃうからです!

 

例えば、幅を40%で設定した場合…

 

PCだといい感じなんですが…

40%

 

スマホだとこうなります。

スマホ

 

うーん、何だかイマイチじゃないですか?笑

「表示可能な最大幅の40%」ってことなので、こうなっちゃうみたいです。

 

でも、100%だとPCの画面にドーン!と出てきます。

なので、PCで小さく表示、スマホでもきれいに表示する方法を説明していきます。

 

スポンサーリンク


方法1)%ではなくpx(ピクセル)で幅を指定する

 

『Instagram Feed』の『Customize』(カスタマイズ)のタブから

『General』(一般)の『Width of Feed』(幅)のところを%ではなくpxに変更する

任意の数字に設定する

 

【見本】(250pxの場合)

・PCで表示

PC画面

 

・スマホで表示

250pxスマホ画面

 

 

いい感じに表示されましたね!

スマホの画面の幅は機種によって色々なので、色々試してみて自分の好きなサイズにするといいと思います。

 

方法2)2カラムや3カラムで表示する

 

2カラムとは、記事を表示している幅を2等分するということです。3カラムは3等分するということです。

元々の表示される幅が2等分、3等分になるので、『Instagram Feed』の幅設定が100%のままでも、2等分、3等分になります

 

※2カラム、3カラムにする方法は、使用しているWordPressのテーマによって違うみたいです。お使いのテーマの方法でやってみてください。このブログはWordPressテーマ『ELEPHANT~エレファント~』を使用しています。

 

 【見本】

・2カラム(『Instagram Feed』の基本設定の幅は100%のまま)

ココは空欄のままでも、文字や画像を入れてもOK

 

・3カラム(『Instagram Feed』の基本設定の幅は100%のまま)

ココは空欄のままでも、文字や画像を入れてもOK
ココは空欄のままでも、文字や画像を入れてもOK

 

・スマホで表示

250pxスマホ画面

 

綺麗に表示できましたね!

 

『Instagram Feed』を使って、複数アカウントのプロフィールページを表示させる方法はコチラ↓

 

『Instagram Feed』の使い方、問題・疑問の解決方法まとめはコチラ↓

 

まとめ

 

『Instagram Feed』を使って、PCで小さく表示、スマホでもきれいに表示する方法を説明しましたが、いかがでしたか?

ぜひ、試してみてください!

 

 

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

ではまた!

 

 

 

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

 

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

 

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

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