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

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

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

前回「Bootstrapを導入するとこんなにいいことがある」という記事を書いた通り、Bootstrap4は導入するといいことだらけですが、

Bootstrap4の「primary」や「success」などのテーマカラーを使ってコーディングしていると、
「違う色にしたい」という思いがでてくると思います。

今回の記事ではそういったかゆい所に手が届くように、「Bootstrap4のカスタマイズ方法(テーマカラー編)」をご紹介したいと思います。

カスタマイズ手順

  1. ソースファイルをダウンロード
  2. ディレクトリ作成
  3. custom.scssを編集
  4. カスタマイズ

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を編集

現時点では、cutom.scssの中身は何も書かれていないので、下記の記述をします。

4.カスタマイズ

ここまで準備ができたらあとはカスタマイズしていくだけです。

custom.scssに項目3で書いた記述より上に記述していきます。テーマカラーの「primary」の色を『#c600ea』に、「success」の色を『#5d0101』に変更してみたいと思います。

今回は、『#c600ea』や『#5d0101』に変更しますが、この部分は好きな色を選択してください。

「primary」と「success」を変更することができました!

上記の要領で、テーマカラーの部分を変更したいカラー名にすれば、色を変更することが可能です。

まとめ

今回は、テーマカラーのBootstrap4のカスタマイズ方法をご紹介しました。
次回は、テーマカラーを上書きするのではなく、独自のテーマカラーを作成する方法をご紹介したいと思います。

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