Houn

instafeed-customise
2019.11.22

Web制作メモ

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

WordPressサイトに簡単にInstagramのフィードを埋め込めるSmash Balloon Instagram Feed(旧:Instagram Feed)。

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

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

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

instafeed-custom1

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

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

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

instafeed-custom2

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

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

Disable mobile layout設定

disable-mobile -layout

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

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

disable-mobile-layout-result

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

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

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

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

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

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

Instagram-feed-setting1

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

Instagram-feed-setting2

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

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

このように書きます。

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

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

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

画面幅が559px以下のときに
ひとつのInstagram投稿写真を
全体の横幅に対して50%にしてね。

となります。

instafeed-sp-2col

できました!

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

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

instafeed-margin

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

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

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

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

このように書きます。

@media screen and (max-width: 959px) {
  #sb_instagram #sbi_images {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
}
画面幅が959px以下のときに
Instagramフィードを
画面幅いっぱいにしてね

と書いてあります。

結果

instafeed-width100

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

ボタンを消す方法

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

instafeed-button

ボタンを消すCSS

#sb_instagram .sbi_follow_btn,
#sb_instagram #sbi_load .sbi_load_btn {
  display: none;
}
Follow on Instagramボタン
Load More..ボタン
消してね。

という指示になります。

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

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

まとめ

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

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

Share on SNSシェア