Instagram Feedのカスタマイズ

–20171112追記
Instagram Feed
https://wordpress.org/plugins/instagram-feed/

レスポンシブのスマホレイアウトの表示が気にくわない為調整した。

画像の高さ(正確には画像を囲っている<a>タグのstyle)が可変になっているのでjsをごにょる。

/plugins/instagram-feed/js/sb-instagram.min.js

↓を見つける

$self.find('.sbi_photo').css('height',sbi_photo_width);

sbi_photo_width は画像の幅を指定してる変数で、デフォでは正方形にするので高さにも同じ変数使ってるんじゃなかろうか。

例えば高さ完全固定でいいなら変数部分を数値で指定すれば解決。

$self.find('.sbi_photo').css('height','220px');

可変で良い感じに調整したい場合、少し上の行にある

var sbiWindowWidth = jQuery(window).width();if (sbiWindowWidth &amp;amp;amp;amp;lt; 640 &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; (parseInt(cols) &amp;amp;amp;amp;gt; 2 &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; parseInt(cols) &amp;amp;amp;amp;lt; 7)) sbi_num_cols = 2;if (sbiWindowWidth &amp;amp;amp;amp;lt; 640 &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; (parseInt(cols) &amp;amp;amp;amp;gt; 6 &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; parseInt(cols) &amp;amp;amp;amp;lt; 11)) sbi_num_cols = 4;&amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;gt;if (sbiWindowWidth &amp;amp;amp;amp;lt;= 480 &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; parseInt(cols) &amp;amp;amp;amp;gt; 2) sbi_num_cols = 1

この辺を言うい感じにいじくりましょう。
個人的には480px以下が1カラムになると冗長っぽいので

//if (sbiWindowWidth <= 480 && parseInt(cols) > 2) sbi_num_cols = 1

でコメントアウトした。

あとはプラグインの管理画面の「Customize」のCSSの部分にメディアクエリ書くなり、プラグインのCSS調整するなりお好みで。CSSだけなら管理画面からいじくった方が早いし安全かな。

@media all and (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 {
 width: 48%;
 }
 #sb_instagram.sbi_col_3 #sbi_images .sbi_item a,
 #sb_instagram.sbi_col_4 #sbi_images .sbi_item a,
 #sb_instagram.sbi_col_5 #sbi_images .sbi_item a,
 #sb_instagram.sbi_col_6 #sbi_images .sbi_item a{
 height: 48%;
 }
 #sb_instagram.sbi_col_10 #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: 25%
 }
 #sb_instagram.sbi_width_resp {
 width: 100%!important
 }
}

 

–20171112追記
コメントいただいたので思い出したのですが、プラグインのjs直接編集しているのでアップデートしたら消えちゃいますので注意です。
別のファイルにしてrequire的なことできるんでしょうかね?

 

3 Replies to “Instagram Feedのカスタマイズ”

  1. 同じくスマホのレイアウトが気になってました。
    とてもシンプルに要点をまとめられた記事で、分かりやすくすぐに設定できました。
    このように収益目的ではないのに情報を発信してくださり、とても感謝します。ありがとうございました。

    1. こんなクソみたいなブログ見て頂いてこちらこそありがとうございます、励みになります(´д`)

    2. プラグインアップデートしたらjs上書きされちゃうので注意です!それで死に掛けてメモ用のブログ記事にしました、思い出しました。

コメントを残す

メールアドレスが公開されることはありません。