【Bootstrap4.5 Carousel Slider】カルーセルスライダーの色を変更する方法

サイト制作 2021 年 10 月 24 日 はてなブックマーク Evernote

Bootstrap4.5のCarousel Sliderの矢印の色は基本白ですが、これを別な色にしたい時のメモ。

まず、bootstrap.cssのどこの箇所に書かれているかというと…

bootstrap.css 6568行目付近

.carousel-control-prev-icon {
 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

色の部分は、

fill='%23fff'

と書かれてる部分。
%23#にあたりますので、CSSで書かれる#fffになっています。
ですので、黒(#000)にしたい場合は

fill='%23000'

と書けばOKです。

Bootstrap4.5でカルーセルスライダーの色を変更するには

お約束通り直接bootstrap.cssを修正するのは避けて、外部CSSにするか、
変更したいHTMLの
<head>
</head>
の間に以下のスタイルシートを追加すれば色が変わります。

css

.carousel-control-prev-icon {
 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

上記のスタイルシートは、#000にしましたが、お好みで他の色に変えてみてください。

Bootstrap5でのカルーセルスライダーの色変更

なお、Bootstrap5の場合は指定するだけで、コントロール、インジケーター、キャプションを暗くできる「carousel-dark」というclassがあるので、スタイルシートを追加しなくても、クラス指定だけでよいです。

Bootstrap5では、こんな感じでclassを追加します。

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">

詳しくは以下のドキュメント参照してみてください。
Carousel (カルーセル) · Bootstrap v5.0

BootstrapもBootstrap5になってしばらく経つけど、既存サイトなどではBootstrap4.5を修正することが多々あります。
頻繁にリニューアルする訳にもいかないので、まだまだ修正する機会もありそうです。

 にほんブログ村

【ご連絡】WordPress、サイト制作関係の新しい記事は、こちらのサイトに書いてます

広告

CPI 激安ドメイン ロリポップ!レンタルサーバー @Next Style お名前.com お名前.com

関連記事

    コメントフォーム
    メールアドレスは必須ですが公開はされません

    トラックバックURL
    はてぶ人気記事
    過去ログ
    広告