ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

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

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

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

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

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

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

カルーセルスライダー画像上の余白

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

ウィジェット設定1
ウィジェット設定2

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

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

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

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

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

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

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

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

余白を見えなくしたカルーセルスライダー

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

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

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

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

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

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

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

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

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

カルーセル内背景色を変更

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

まとめ

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

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

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

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

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる