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