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の書き換えは不要だ。

無料メルマガ発行中

メルマガも2021年は頑張って書いています。ぜひ登録して読んでくださいね。(無料です)

メールマガジン
無料で購読
メールアドレス *
* 必須項目

【案内板】

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

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

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


Youtube

  • ブックマーク

この記事を書いた人

情報発信ナビゲーター 大東 信仁

情報発信ナビゲーター / 博士課程中退 / ニックネーム : ものくろ / ブロガー / WordPressが得意 / orz レイアウト開発者 / 株式会社 あみだす 代表取締役