
Web制作メモ
Smash Balloon Instagram FeedのCSSカスタマイズ〜コピペOK
WordPressサイトに簡単にInstagramのフィードを埋め込めるSmash Balloon Instagram Feed(旧:Instagram Feed)。
プラグイン設定画面からではできないカスタマイズの紹介です。全部コピペで出来ます。
目次〜こんなことが出来ます
- スマホ時に投稿写真を2カラムにする
- サイトの余白を超えて、画面幅いっぱいに表示する
- 「Load More..」「Follow on Instagram」ボタンを消す
デフォルト〜カスタマイズ前の状態
最初はこんな感じだとします。パソコンで見た場合ですね。横は4カラムにするのが一般的じゃないでしょうか。全部で8枚並ぶようにしてみます。
スマホ時に投稿写真を2カラムにする方法
カスタマイズ前、スマホでは1カラムになる
スマホでは1カラム。縦1列に伸びるようになります。横幅が狭いスマホだとこちらが見やすいですよね。デフォルトの状態で、きちんとレスポンシブ対応してくれてます。
ただ、今回の例のように8枚の画像を並べると、それが全部縦並びになるのでスクロール量が増えます。8枚分のスクロールはちょっと長いですね。
Disable mobile layout設定
なおプラグインの設定画面内には、Disable mobile layoutという設定項目があります。Disable ディセーブル=無効にするという意味です。
モバイルレイアウトを無効にするという意味ですね。ここにチェックを入れてみましょう。
パソコンと同じ、4カラムになりました。スマホレイアウトが無効になったんですね。
うーん、ちょっとこれじゃ細かすぎます。
スマホレイアウトでは、プラグイン側で1カラム、縦1列に切り替えるようにしてくれてる。ただ今回のケースのように2カラムにしたい場合は独自のCSS(デザインの指示)を書く必要があります。
プラグイン設定画面からCSSを編集
CSSファイルというデザインを指定するファイルを書き換えていきます。本来はテーマを編集する必要があるのですが、Smash Balloon Instagram Feedプラグインは親切に、プラグインの設定画面内で簡単にCSSが書き加えられるようになってます。
設定画面の「2.Customize」から
下にスクロールしていくと‥
ありました。「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」内に貼り付ければオッケーです。
書いてあることの意味としては、
ひとつのInstagram投稿写真を
全体の横幅に対して50%にしてね。
となります。
できました!
サイトの余白を超えて、画面幅いっぱいに表示する方法
通常のサイトデザインなら、画面幅全体に対して左右に余白が設けられてるはずです。
文章などを読みやすく、サイトを見やすくするための余白ですが、魅せたい写真は余白をなくして画面幅いっぱいに表示させたいですね。
なおパソコンの場合だと横にビローンと伸びてしまう形になるので、タブレット端末のサイズ以下の場合だけ、サイトの余白を超えて画面横幅いっぱいになるように指定してみます。
※タブレット表示のときにサイドバーが設置されるような2カラムデザインのサイトの場合は、サンプルのままだとうまく表示されない場合があります。レスポンシブデザインで、スマホでは1カラム(サイドバーはサイト下部に移動するなど)に切り替わるサイトであれば、サンプルコード内「959px」を「559px」に書き換えてお使いください。
タブレット以下、画面幅いっぱいにするCSS
このように書きます。
@media screen and (max-width: 959px) {
#sb_instagram #sbi_images {
width: 100vw;
margin: 0 calc(50% - 50vw);
}
}
Instagramフィードを
画面幅いっぱいにしてね
と書いてあります。
結果
できました。このようになります。
ボタンを消す方法
「Load More..」「Follow on Instagram」というボタン。こちら、個人的には不要かなと思ったので消してみました。
ボタンを消すCSS
#sb_instagram .sbi_follow_btn,
#sb_instagram #sbi_load .sbi_load_btn {
display: none;
}
Load More..ボタンを
消してね。
という指示になります。
もちろん、どちらか一方だけを消すこともできます。その場合はこちらのサンプルコードから赤線、緑線どちらか残したいボタンの部分を消して「Custom CSS」に貼るようにします。
※赤線、緑線を区切っているカンマ(,)も消します。
まとめ
テーマ側でCSS(デザイン)を編集しなくても、プラグイン設定画面内にCSS入力欄があるので親切なプラグインです。
今回のサンプルコードを貼り付けるだけで出来ますので、お試しください。