新宿のWEB制作・システム制作会社エンジョインスタイル

ブログBLOG

Instagram_feed_スマホ3

Instagram Feedでスマホでのインスタグラム表示をカスタマイズする方法

2018.07.08

Instagram Feedでスマホでのインスタグラム表示をカスタマイズする方法

Instagram_feed_スマホ2

「Instagram Feed」といえば、WordPressサイトでインスタグラム表示をさせるのに便利なプラグインですが、このプラグインでのスマホ表示は、デフォルトでは1列表示になる仕様です。ただ、1列表示だとスマホではかなり縦長になってしまうため、冗長的な感じになってしまいますよね。



カスタマイズ項目で、「Disable mobile layout」の設定をオンにして、PCと同じ表示をさせることもできますが、PCを5列表示などにしていると、スマホではかなり小さい表示になってしまいます。



Instagram_feed_スマホ3

そこで、Instagram Feedで、スマホの表示のみ変更できる方法をご紹介します。やり方は、下記のサイトが参考になります。



WORDPRESSプラグイン「Instagram フィード」スマホで二列表示にするカスタマイズ方法【レイアウト修正】



編集するファイルは、「sb-instagram.min.css」と「sb-instagram.min.js」の2つです。



この記事では2列表示の方法を記載されていますが、cssの%設定と、jsのカラム設定を変更すれば、色々な表示方法でカスタマイズが可能です。



Instagram_feed_スマホ4

インスタグラム表示はスマホで閲覧するユーザーが多いと思いますので、スマホでのインスタ表示は、こだわっていきたいものですね。