2017/08/20
マテリアルのh2見出しをカスタマイズする際には少し注意が必要です。
結論から言うと、「!important」を使ってください。
sponsored link
マテリアルのh2見出し
マテリアルではテーマカスタマイザーからメインカラーというのを選べるようになっていますが、このメインカラーがh2の背景色に自動的になるようになっています。
マテリアルのh3見出し
同じくh3見出しはアンダーラインの色がメインカラーになります。
見出しの色を変えられない原因
この見出しの背景色をcssで変更しようと思って、style.cssに
|
1 2 3 |
.content h2{ background-color: #aaa; } |
みたいに書いても、残念ながら色は変わりません。
何故かと言うと、メインカラーをh2の背景色にする為のcssがheadタグ内に出力されていて、style.cssのような外部ファイルよりもheadタグ内に書かれたcssが優先されてしまうからです。
参考：CSSが効かないときの優先順位チェック(1)～記述箇所編
見出しの色を変更するには
見出しの色を変更するには、!importantを使えばOKです。
|
1 2 3 |
.content h2{ background-color: #aaa !important; } |
|
1 2 3 |
.content h3{ border-bottom: 3px solid #aaa !important; } |
こんな感じです。色を変えたい方はやってみてください。
