福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

HOME > ブログ > 「Instagram feed」でスマホ・PCの表示数を変更する方法

SUGOYOKU BLOG

「Instagram feed」でスマホ・PCの表示数を変更する方法

福岡のweb制作会社スゴヨクです。

今回はパソコンとスマホで表示数を切り替えたい時に誰でもできる一番簡単な方法のご紹介です。

通常の表示の方法はこちら

切り替え

パソコンとスマホで表示数を切り替えを行う場合の場合

まずはcssから

これに補足をすると、いつものショートコードの中に[num=5]を入れてPC・スマホで表示を切り替えているだけです。

オプションはほかにもたくさんあります。

◆一般設定

  • ・id – InstagramのユーザーID – 例:[instagram-feed id=AN_INSTAGRAM_USER_ID]
  • ・width – Instagramフィードの幅。任意の数 – 例:[instagram-feed width=50]
  • ・widthunit – Instagramフィードの幅の単位。’px’または ‘%’ – 例:[instagram-feed widthunit=%]
  • ・height – Instagramフィードの高さ。任意の数 – 例:[instagram-feed height=250]
  • ・heightunit – Instagramフィードの高さの単位。’px’または ‘%’ – 例:[instagram-feed heightunit=px]
  • ・background – Instagramフィードの背景色。任意の16進数カラーコード – 例:[instagram-feed background=#ffff00]
  • ・class – InstagramフィードコンテナにCSSクラスを追加します – 例:[instagram-feed class=feedOne]

◆写真のオプション

  • ・sortby – Instagramの投稿を最新のものから古いもの(なし)またはランダムなもの(ランダム)に並べ替え – 例:[instagram-feed sortby=random]
  • ・num – 最初に表示するInstagramの投稿数。最大は33です – 例:[instagram-feed num=10]
  • ・cols – Instagramフィードの列数。1 – 10 – 例:[instagram-feed cols=5]
  • ・imageres – Instagramの写真の解像度/サイズ。’auto’、full、 ‘medium’、または ‘thumb’ – 例:[instagram-feed imageres=full]
  • ・imagepadding – Instagramの写真の周囲の間隔 – 例:[instagram-feed imagepadding=10]
  • ・imagepaddingunit – Instagramフィード内のパディングの単位。’px’または ‘%’ – 例:[instagram-feed imagepaddingunit=px]
  • ・disablemobile – Instagramフィードのモバイルレイアウトを無効にします。’true’または ‘false’ – 例:[instagram-feed disablemobile=true]

◆ヘッダオプション

  • ・showheader – Instagramのフィードヘッダを表示するかどうか。’true’または ‘false’ – 例:[instagram-feed showheader=false]
  • ・headercolor – Instagramフィードのヘッダの色。任意の16進数カラーコード – 例:[instagram-feed headercolor=#333]

◆「もっと読み込む」ボタンのオプション

  • ・showbutton – ‘Load More’ボタンを表示するかどうか。’true’または ‘false’ – 例:[instagram-feed showbutton=’false’]
  • ・buttoncolor – ボタンの背景色 任意の16進数カラーコード – 例:[instagram-feed buttoncolor=#000]
  • ・buttontextcolor – ボタンのテキストカラー。任意の16進数カラーコード – 例:[instagram-feed buttontextcolor=#fff]
  • ・buttontext – ボタンに使用されるテキスト – 例:[instagram-feed buttontext=”Load More Photos”]

◆[Instagramでフォロー]ボタンのオプション

  • ・showfollow – 「Instagramでフォロー」ボタンを表示するかどうか。’true’または ‘false’ – 例:[instagram-feed showfollow=true]
  • ・followcolor – [Instagramでフォロー]ボタンの背景色。任意の16進数カラーコード – 例:[instagram-feed followcolor=#ff0000]
  • ・followtextcolor – [Instagramでフォロー]ボタンのテキスト色。任意の16進数カラーコード – 例:[instagram-feed followtextcolor=#fff]
  • ・followtext – [Instagramでフォロー]ボタンに使用されるテキスト – 例:[instagram-feed followtext=”Follow me”]

「Instagram feed」の設定方法は検索でたくさんありましたが、切り替えの方法はなかったのでメモ!

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP