Luxeritasカルーセルスライダーの見映えを簡単に整える方法

2021年7月4日

ワードプレスの高速無料テーマLuxeritasにはウィジェットでカルーセルスライダーを設置することができます。

私もこのサイトでは、記事一覧の上や記事下（正確には記事下の下）にカルーセルスライダーを設置しています（2021年7月現在）。

しかし、なぜかアイキャッチ画像上に余白ができてしまうので見映えが悪いです。

そこで本記事では、CSSを使って簡単にカルーセルスライダーの見映えを整える方法を紹介します。

とはいえ、やることは次の２つだけとめちゃ簡単です。

• カルーセルを囲んでいる枠線を消す
• カルーセル内背景色を周囲の要素と同じにする

カルーセルスライダーの設置例

次が記事下に設置しているカルーセルスライダーです。画像上の余白が邪魔です。

ちなみにこのときのウィジェット設定は以下の通り。
デフォルト設定からの変更点のみ赤枠で囲んでいます。

画像上の余白をなくすには、高さ設定を”スライドの高さいっぱいに広げる”という方法もありますが、画像の縦横比が変わってしまうので不自然です。

また”高さ固定”にして高さを小さく設定してやると余白もその分減るのですが、レシポンシブ設定がうまくいきません。

カルーセル内画像上の余白を見えなくする方法

当初は、CSSでカルーセルスライダー内の画像位置をセル内の上限に配置してセル高さを減らす、という方法で余白を消してしまう方法と取ろうとしましたが、レシポンシブ設定が邪魔くさくなりました。

メディアクエリで真面目にレシポンシブ設定してもよかったのですが、表示するカルーセルアイテム数に応じて高さも変える必要があるなど汎用性に乏しいこともわかりました。

そこで発想を変え、余白を消すのではなく見えなくする方法を取ることにしました。
そうすると次の通りすごく単純な手法でOKです。

• カルーセルを囲んでいる枠線を消す
• カルーセル内背景色を周囲の要素と同じにする

これだけで余白が見えなくなりました。

具体的な手順は次の通りです。

①カルーセル内枠線を消す

次のCSSを子テーマのstyle.cssに記述します。

/* 全カルーセルスライダーの枠線を非表示 */
.swiper-slide {
	border: none !important;
}

セレクターは.swiper-slideとしていますが、この場合サイト内の全カルーセルスライダーに適用されます。

もし特定のウィジェットのみに適用したい場合は、Google Chromeの開発者ツールでウィジェットのidを調べて、#(ウィジェットのid) .swiper-slide　をセレクターに用いればよいでしょう。

②カルーセル内背景色を周囲の要素と同じにする

ウィジェットの背景色（余白の色）を周囲の色と同じにします。

私の場合は、周囲の色が淡いブルー色（#f6fcff）なので次のように入力しました。

以上で余白が見えなくなります。

まとめ

Luxeritasのカルーセル内の余白を見えなくして見映えを整える簡単な方法を紹介しました。

余白を消したわけではなく見なくしただけ、という若干ごまかした感じがありますが、カルーセルの表示アイテム数によらず汎用性があって簡単です。

ただし余白が消えたわけではないので、カルーセルとその上のタイトルなどとの間が不自然に開いて見えるかもしれません。

その場合は、タイトル下のパディングやマージン等をうまく調整してやるとよいでしょう
（手間でなければpositionプロパティで位置調整が一番きれいです）。