WordPressの人気スライダープラグイン「Smart Slider 3」を使っていると、スライダーの背景が白になってしまい、せっかくPNGで透過のスライドデザインにしたのに反映されない… そんなことありませんか？
例えば実際の以下の画像のような、曲線の上がスライドで、下の部分が背景の場合。
下の背景はスクロールしても動かない固定にしているので、スライドの背景は透明でないと成り立ちません。
この記事では、Smart Slider 3でスライダーの背景を完全に透明にするCSSコードをまとめました。スライダー全体・スライド背景レイヤーなど、複数のパターンに対応しています
スライダー全体の背景を透明にするCSS
スライダーの外側全体に背景色がついてしまっている場合は、以下のCSSを使います。
div#n2-ss-1 {
background: transparent !important;
}
※ #n2-ss-1 の部分は、スライダーのIDです。
Smart SliderではスライダーごとにIDがつきます（例：#n2-ss-2, #n2-ss-3）。
自分のスライダーに合わせて変更してください。
スライド背景レイヤーを透明にしたい場合
スライドの背景に色や画像が設定されていて、それを透明にしたい場合は以下。
.n2-ss-slide-background {
background: transparent !important;
}
スライダー全体の背景レイヤーも透明にしたい場合
Smart Slider 3の背景全体にレイヤーがある場合は、こちらのCSSを追加します。
.n2-ss-background {
background: transparent !important;
}
CSSの貼り付け場所
WordPressの管理画面から以下の手順で追加できます。
- 管理画面左メニュー「外観」→「カスタマイズ」
- 「追加CSS」をクリック
- 上記のCSSを貼り付けて「公開」ボタンをクリック
補足：背景色の指定ではなく「画像を透かしたい」場合
スライダー内に背景画像を入れていて、それを少し透かしたい場合は opacity を使うと便利です。
.n2-ss-slide-background {
opacity: 0.6;
}
まとめ
Smart Slider 3は直感的に使えるスライダーですが、細かいデザイン調整にはCSSの追加が必要になることがあります。
背景を透明にすることで、より洗練されたデザインが実現できます。CSSを活用して、あなたのサイトをもっと魅力的に仕上げてください！
