Smash Balloon Instagram FeedのCSSカスタマイズ〜コピペOK

WordPressサイトに簡単にInstagramのフィードを埋め込めるSmash Balloon Instagram Feed（旧：Instagram Feed）。

プラグイン設定画面からではできないカスタマイズの紹介です。全部コピペで出来ます。

目次〜こんなことが出来ます

• スマホ時に投稿写真を２カラムにする
• サイトの余白を超えて、画面幅いっぱいに表示する
• 「Load More..」「Follow on Instagram」ボタンを消す

デフォルト〜カスタマイズ前の状態

最初はこんな感じだとします。パソコンで見た場合ですね。横は４カラムにするのが一般的じゃないでしょうか。全部で８枚並ぶようにしてみます。

スマホ時に投稿写真を２カラムにする方法

カスタマイズ前、スマホでは１カラムになる

スマホでは１カラム。縦１列に伸びるようになります。横幅が狭いスマホだとこちらが見やすいですよね。デフォルトの状態で、きちんとレスポンシブ対応してくれてます。

ただ、今回の例のように８枚の画像を並べると、それが全部縦並びになるのでスクロール量が増えます。８枚分のスクロールはちょっと長いですね。

Disable mobile layout設定

なおプラグインの設定画面内には、Disable mobile layoutという設定項目があります。Disable ディセーブル＝無効にするという意味です。

モバイルレイアウトを無効にするという意味ですね。ここにチェックを入れてみましょう。

パソコンと同じ、４カラムになりました。スマホレイアウトが無効になったんですね。

うーん、ちょっとこれじゃ細かすぎます。

スマホレイアウトでは、プラグイン側で１カラム、縦１列に切り替えるようにしてくれてる。ただ今回のケースのように２カラムにしたい場合は独自のCSS（デザインの指示）を書く必要があります。

プラグイン設定画面からCSSを編集

CSSファイルというデザインを指定するファイルを書き換えていきます。本来はテーマを編集する必要があるのですが、Smash Balloon Instagram Feedプラグインは親切に、プラグインの設定画面内で簡単にCSSが書き加えられるようになってます。

設定画面の「2.Customize」から

下にスクロールしていくと‥

ありました。「Custom CSS」。ここに「２カラムにしてね」という指示を書き込んでいきます。

スマホ時にInstagram投稿写真を２カラムにするCSS

このように書きます。

@media screen and (max-width: 559px) {
  #sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item {
    width: 50%;
  }
}

こちらをコピーして、さっきの「Custom CSS」内に貼り付ければオッケーです。

書いてあることの意味としては、

となります。

できました！

サイトの余白を超えて、画面幅いっぱいに表示する方法

通常のサイトデザインなら、画面幅全体に対して左右に余白が設けられてるはずです。

文章などを読みやすく、サイトを見やすくするための余白ですが、魅せたい写真は余白をなくして画面幅いっぱいに表示させたいですね。

なおパソコンの場合だと横にビローンと伸びてしまう形になるので、タブレット端末のサイズ以下の場合だけ、サイトの余白を超えて画面横幅いっぱいになるように指定してみます。

※タブレット表示のときにサイドバーが設置されるような２カラムデザインのサイトの場合は、サンプルのままだとうまく表示されない場合があります。レスポンシブデザインで、スマホでは１カラム（サイドバーはサイト下部に移動するなど）に切り替わるサイトであれば、サンプルコード内「959px」を「559px」に書き換えてお使いください。

タブレット以下、画面幅いっぱいにするCSS

このように書きます。

@media screen and (max-width: 959px) {
  #sb_instagram #sbi_images {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
}

と書いてあります。

結果

できました。このようになります。

ボタンを消す方法

「Load More..」「Follow on Instagram」というボタン。こちら、個人的には不要かなと思ったので消してみました。

ボタンを消すCSS

#sb_instagram .sbi_follow_btn,
#sb_instagram #sbi_load .sbi_load_btn {
  display: none;
}

という指示になります。

もちろん、どちらか一方だけを消すこともできます。その場合はこちらのサンプルコードから赤線、緑線どちらか残したいボタンの部分を消して「Custom CSS」に貼るようにします。

※赤線、緑線を区切っているカンマ（,）も消します。

まとめ

テーマ側でCSS（デザイン）を編集しなくても、プラグイン設定画面内にCSS入力欄があるので親切なプラグインです。

今回のサンプルコードを貼り付けるだけで出来ますので、お試しください。