Smash Balloon Instagram Feed プラグイン【モバイル 2列】カスタマイズするCSS

WordPressにInstagramのフィードを埋め込みできる、Smash Balloon Instagram Feed プラグインを使った時に、標準設定ではモバイルでは投稿した写真が1列に並ぶ。

これを2列にカスタマイズするには、下のCSSを追加するとOKだ。

@media screen and (max-width: 480px) {
#sb_instagram.sbi_col_10 #sbi_images .sbi_item, #sb_instagram.sbi_col_3 #sbi_images .sbi_item, #sb_instagram.sbi_col_4 #sbi_images .sbi_item, #sb_instagram.sbi_col_5 #sbi_images .sbi_item, #sb_instagram.sbi_col_6 #sbi_images .sbi_item, #sb_instagram.sbi_col_7 #sbi_images .sbi_item, #sb_instagram.sbi_col_8 #sbi_images .sbi_item, #sb_instagram.sbi_col_9 #sbi_images .sbi_item {
    width: 50%;
}
}

CSSを追加するには、管理画面に入り、Instagram Feedの”2.カスタマイズ”を開き

下にスクロールしたところにある”カスタムCSS”に追加する。

なお、モバイルレイアウトの無効化には チェックを入れない。

このCSSを設定するとOKだ。

Chromeの検証で、width: 50%; へCSSを書き換えると縦長(比率が崩れる)になるが、CSSを保存してリロードすると、縦方向の比率も崩れることなく、表示される。

なので、今回のカスタマイズは、CSSのみでOKで、JavaScriptの書き換えは不要だ。

無料メルマガにぜひご登録ください

ブログより日常を書いています。
ものくろキャンプ メルマガ
購読登録フォーム
Eメール  *
お名前(姓)  *
お名前(名)  *

講座・ワークショップ 開催予定

2022-11-11 20:00 – 21:30
金曜夜:こころの発酵 マインドフルネス瞑想会+軽食
詳細・お申し込みはこちら

2022-11-19 11:00 – 13:00
オンライン【あみだす発酵アカデミー】白菜キムチ(キムジャン)作りクラス
詳細・お申し込みはこちら

2022-11-19 15:00 – 17:00
【あみだす発酵アカデミー】本格「王様のコチュジャン」作りクラス/オンライン・リアルどちらもOK
詳細・お申し込みはこちら

2022-11-20 13:00 – 14:30
日曜昼:こころの発酵  マインドフルネス瞑想会+ランチ
詳細・お申し込みはこちら

2022-11-25 19:00 – 22:00
第4金曜日開催 オンライン【ブログ】グループレッスン 11月25日
詳細・お申し込みはこちら

2022-12-08 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 12月8日
詳細・お申し込みはこちら

2022-12-09 19:00 – 20:30
金曜夜:こころの発酵 マインドフルネス瞑想会+軽食
詳細・お申し込みはこちら

2022-12-10 11:00 – 13:30
【あみだす発酵アカデミー】本場香港の味 XO醤作りクラス
詳細・お申し込みはこちら

2022-12-10 18:00 – 21:00
2022 あみだす望年会っ
詳細・お申し込みはこちら

2022-12-15 11:00 – 13:30
平日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2022-12-16 19:00 – 22:00
第4金曜日開催 オンライン【ブログ】グループレッスン 12月16日※12月のみ第3週目となります
詳細・お申し込みはこちら

2022-12-17 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2022-12-18 13:00 – 14:30
日曜昼:こころの発酵  マインドフルネス瞑想会+ランチ
詳細・お申し込みはこちら

2022-12-30 10:00 – 18:00
リアル・オンラインどちらもOK!ものくろ流WordPressスタートアップ講座 -第42期- 講師 ものくろ
詳細・お申し込みはこちら

2023-01-12 11:00 – 13:30
平日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-15 11:00 – 13:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-21 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

  • ブックマーク

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。