えっ!?まだスマホで見にくいんですか?スマホ最適化リノバスなら標準仕様です。ウェブ制作会社にお困りなら今すぐチェック

かゆい所に手が届く!Bootstrap4カスタマイズ方法!(カラー追加編)

リノバス制作部の小林です。

前回「かゆい所に手が届く!Bootstrap4カスタマイズ方法!(テーマカラー編)」という記事を書きました。

以前書いた記事で、Bootstrap4に設定してあるテーマカラー(「primary」や「success」等)を自分の指定した色に上書きをする方法を書きました。

今回の記事では、テーマカラーを「上書き」するのではなく、「追加」していく方法をご紹介していきたいと思います。

カスタマイズ手順

Bootstrap4をカスタマイズするにあたり、Sassのコンパイルが必要になってきます。Sassの知識がない方は、当ブログにてSassについてまとめたい記事がありますので、あわせてお読みください。

1.ソースファイルのダウンロード

今回は、カスタマイズをするためにソースファイルをダウンロードし、読み取る形式をとります。CDNでの読み込みだとカスタマイズができないので注意が必要です。
Bootstrap4の公式サイトにいき、Source filesをダウンロードします。

2.ディレクトリ作成

カスタマイズをするにあたり、ダウンロードしたソースファイルの中身のscssファイルのみを使用します。
scssファイルを使用し、以下のようなディレクトリ構成を作成します。

your-project/
┝── index.php
┝── scss/
│ ┠── custom.css(custom.scssをコンパイル時に作成される)
│ └── custom.scss(自分で作成する)
└── bootstrap/
└── scss(bootstrap4のソースファイルの中の、scssの中身)

index.phpのhead内に下記の記述をします。この記述でBootstrap4を読み取ることができます。

3.色の追加

ここまでの準備は、テーマカラーの上書き方法と同じです。ここからcustom.scssに記述する内容が異なってきます。
custom.scssに、下記の記述をします。下記の記述をするだけで、テーマカラーの追加ができます!
16進数の部分は例としていれてあるので、使用する際はご自身の使用したい16進数を記述してください。

  • 色を変更したい場合は、16進数の部分を変更してください。
  • 色をより追加したい場合は、5行目と11行目をコピーして、custom6やcustom7のように命名していくことで増やすことができます。

4.使用方法

custom.scssにコードを記述しただけでは、使用することはできません。

Bootstrap4のテーマカラーの使用方法に基づいてHTMLに記述していきます。
その際に、テーマカラー名(「primary」や「success」)の部分を今回追加した「custom1」や「custom2」などに変更することで、使用することができます。

使用例

先ほど指定したコードを、Bootstrap4のボタン「.btn-〇〇〇」に反映させて出力してみたいと思います。

〇〇〇の部分に先ほどscssに指定した、「custom1」や「custom2」などを記述するだけです。

項目3で指定した色が、表示されたと思います。

上記では「ボタン」と「アラート」の出力を行いましたが、背景の色を変更する場合は「.bg-custom1」、テキストカラーを変更する場合は「.text-custom2」のように指定することで、今回追加した色を使用していくことができます。

まとめ

今回は、Bootstrap4のテーマカラーの追加を行いました。
今回ご紹介したカスタマイズ方法は、前回ご紹介した方法と違いテーマカラーを上書きしないため、標準装備のテーマカラーを使用していくことができます。

今回ご紹介した方法の方が利便性が高いので、ぜひ活用してみてください!

えっ!?まだスマホで見にくいんですか?スマホ最適化リノバスなら標準仕様です。ウェブ制作会社にお困りなら今すぐチェック