SANGO 横並び2列・3列のセルの下の隙間を狭くするカスタマイズ

この記事では、SANGOの「横並び2列・横並び3列」のショートコードを使った時の列(セル)の下の隙間を狭くするカスタマイズについて紹介します。

私と同じように、列の下の隙間を狭くしたいと思っている方がいればぜひ参考にしてみてください。

このカスタマイズによって隙間がどう変わるのか

まず、このカスタマイズをすることで列(セル)の下の隙間がどれくらい変わるのか、画像を使って例を紹介したいと思います。

PC版のカスタマイズする前がこちら↓

そしてカスタマイズ後がこちら↓

私は横並び3列を2つ使っているのですが、その間にある隙間が狭くなったのがわかるでしょうか？

なるべくスクロールしなくても色々なコンテンツが目に入るようにしたかったので、この隙間を狭くしてみました。

次はモバイル版を見てみましょう。

こちらがカスタマイズ前↓

そしてこちらがカスタマイズ後↓

こちらは横並び2列を3つ使っています。モバイル版も隙間が狭くなりました。

ちょっとしたことではあるのですが、このちょっとで大きく見え方が変わると思います。

カスタマイズの方法

このページを見てくださっている方はすでに横並び2列や横並び3列のショートコードを使っているかと思います。

一応、参考に載せておきますね。(SANGOの公式ページより)

ちなみに、このショートコードはレスポンシブになっているので、このままではブラウザのサイズによっては横並びに表示されません。

スマホで見ると1つ1つの画像や文章が縦に並んでしまいます。

それをブラウザサイズに関わらず横2列や横3列に表示したい場合は、ショートコード内の「responsive」を消してください。そうするとスマホで見てもきちんと横並びに表示されます。

追加CSSに記述

それでは、下の隙間を狭くするためのカスタマイズで追加CSSに記述することを紹介していきます。

横並びのショートコードを使う時にレスポンシブのままなのか、変更したのかで記述することが少し違うので、自分がどちらにしているか確認しておいてくださいね。

追加CSSを書くのは、「外観」→「カスタマイズ」→「追加CSS」のところです。

※「テーマの編集」から子テーマのスタイルCSSに追記してもいいのですが、「追加CSS」に書いたほうが実際の変化を確認しながらできるのでやりやすいと思います。

横並び2列(レスポンシブ)

横並び2列(レスポンシブにしていない)

横並び3列(レスポンシブ)

横並び3列(レスポンシブにしていない)

どの横並び列の下の隙間を狭くしたいのかに合わせてCSSをコピーし、「追加CSS」にこのように貼り付けます。↓

ペーストすると右側の画面の表示がCSSに合わせて変化するはずなので確認してください。

最後に「公開」をクリックして完了です！

これでSANGOの横並びの下の隙間を狭くするカスタマイズができました。

お疲れ様でした！