「Instagram feed」でスマホ・PCの表示数を変更する方法
福岡のweb制作会社スゴヨクです。
今回はパソコンとスマホで表示数を切り替えたい時に誰でもできる一番簡単な方法のご紹介です。
通常の表示の方法はこちら
|
|
<!--固定ページのショートコードの場合--> [instagram-feed] <!--テンプレートファイルのショートコードの場合--> <?php echo do_shortcode('[instagram-feed]'); ?> |
切り替え
パソコンとスマホで表示数を切り替えを行う場合の場合
まずはcssから
|
|
.SpOnly{ display: block; } .PcOnly{ display: none; } @media screen and (min-width: 769px) { .SpOnly{ display: none; } .PcOnly{ display: block; } } |
|
|
<!--スマホで10つ表示させるショートコード--> <div class="SpOnly"> <?php echo do_shortcode('[instagram-feed num=10]'); ?> </div> <!--パソコンで5つ表示させるショートコード--> <div class="PcOnly"> <?php echo do_shortcode('[instagram-feed num=5]'); ?> </div> |
これに補足をすると、いつものショートコードの中に［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」の設定方法は検索でたくさんありましたが、切り替えの方法はなかったのでメモ！
ちょこっとメンターサービス
HP無料診断
【実践マーケティング手法２２選】 無料ダウンロード
助成金・補助金・融資・M＆A等の総合経営支援サービス
「補助金パートナー」
月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。
ワードプレスでSEO対策をするなら【オリテン】
seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。
