こんちゃ！らすかさすです。
今の時代、WEBサイトへのアクセスのほとんどがスマホになっているのが当たり前。90%以上のアクセスがスマホから、なんて人も多いのではないでしょうか。
そんなとき気になるのが、スマホのサイトデザインです。
Instagramの最新投稿を自動で出力してくれるプラグイン「Instagram フィード」ですが、スマホでのレイアウトが気にくわなかったのでカスタマイズしました
きっと他にも困っている方がいるだろうという期待を込めて、カスタマイズ方法をまとめておきたいと思います。(忘備録も兼ねて)
プラグイン自体の設定については下記参考サイトをごらんください！
WordPressのプラグイン「Instagram feed」のカスタマイズ 設定方法
プラグインを直接修正するので、プラグインを更新すると元に戻ってしまいます。脆弱性などもあるので、更新はしっかりと行いその都度カスタマイズを施すようにしてください。
もしくは、別でファイルを用意してあげて、プラグインファイルよりも後で読み込めばうまくいきそうな気もします(確認はしてませんw)
修正するファイルは二つ！
プラグインを構成するファイルの修正は推奨されていませんが、やっちゃいます。
今回カスタマイズするのは「Instagram フィード」。もし表示がおかしくなった場合は、プラグインを再インストールし直しましょう。
デフォルトではスマホ(画面幅480px以下)は一列表示になりますが、これを2列にします。
修正はWORDPRESS管理画面のプラグイン修正から行います。
①sb-instagram.min.css
(max-width:480px){#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,#sb_instagram.sbi_col_10 #sbi_images .sbi_item{width:100%}}(max-width:480px){#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,#sb_instagram.sbi_col_10 #sbi_images .sbi_item{width:50%}}sb-instagram.min.js
function sbiGetColumnCount($self,cols,colsmobile){var sbi_num_cols=cols,sbiWindowWidth=window.innerWidth;if($self.hasClass('sbi_mob_col_auto')){if(sbiWindowWidth<640&&(parseInt(cols)>2&&parseInt(cols)<7))sbi_num_cols=2;if(sbiWindowWidth<640&&(parseInt(cols)>6&&parseInt(cols)<11))sbi_num_cols=4;if(sbiWindowWidth<=480&&parseInt(cols)>2)sbi_num_cols=1}else if(sbiWindowWidth<=480){sbi_num_cols=colsmobile}function sbiGetColumnCount($self,cols,colsmobile){var sbi_num_cols=cols,sbiWindowWidth=window.innerWidth;if($self.hasClass('sbi_mob_col_auto')){if(sbiWindowWidth<640&&(parseInt(cols)>2&&parseInt(cols)<7))sbi_num_cols=2;if(sbiWindowWidth<640&&(parseInt(cols)>6&&parseInt(cols)<11))sbi_num_cols=4;if(sbiWindowWidth<=480&&parseInt(cols)>2)sbi_num_cols=2}else if(sbiWindowWidth<=480){sbi_num_cols=colsmobile}簡単なので、レイアウトが気になる人は是非！
間違い探しのようなカスタマイズでしたね。
プラグインの構成ファイルを修正することになりますが、触るのはcssファイルとjsファイルなので気を楽にしてください。
修正自体も難しくないことが分かってもらえたと思います(^^)/
それでは！
コメントを残す