【Luxeritas】見出しカスタマイズの解決方法！「!important」をつけるケース

CSSをコピペするだけでおしゃれな見出しに！

といってCSSを公開している記事は多いのですが、コピペしても上手くいかないことって多々ありませんか？

デフォルトの横線が上手に消せなかったり、消したのに上書きしたい見出しが上手く表示されなかったりと・・・

本記事では「!important」を使ってLuxeritasの見出しを上手にカスタマイズできた方法をお伝えします。

なお後述しますが本当は他の方法で優先順位を変更したほうがいいようです。

とはいってもCSSなんて全然わからない！手っ取り早く解決したい！という方は参考にしてください。

「!important」とは
- 「!important」の使い方
記事内のhタグ以外の場所まで反映されてしまった場合
デフォルト見出しの削除コード
当ブログで使用している見出しのコード
h2タグ
- h3タグ
AMP用スタイルに「!important」を使うとエラーが出る
できれば「!important」を使わずに優先順位の変更を

「!important」とは

「!important」が含まれるCSSコードを最優先で実行してくれます。

デフォルト設定の見出しデザインが邪魔してしまう場合に、書き換えたい方のコードに「!important」を使うと優先的に表示されるわけです。

コードをコピペしたのに表示されない！という場合は「!important」をつけると解決しやすいです。

「!important」の使い方

CSSコードの「プロパティ:値」の後ろに半角スペースを入れて、!importantと記載します。

border-left: solid 5px #c40026 !important;
border-bottom: solid 3px #d7d7d7 !important;

こんな感じです。

記事内のhタグ以外の場所まで反映されてしまった場合

h2タグがブログトップのタイトル部分にまで反映されてしまいました。

これはセレクタを「h2 {」から「.post h2 {」に変更することで元通りになりました。

あとで当ブログで使用しているコードを丸々記載しますのでそちらでも参考にしてください。

見出しのCSSコードを探すときにサルワカさんの記事を参考にしている方は多いかと思います。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

この記事に記載されているコードのセレクタはh1なのでそのまま別のhタグに置き換えがちですが、うまくいかない場合はセレクタ部分に「.post」も追記してみましょう。

デフォルト見出しの削除コード

下記のコードでデフォルトの見出しを削除し、お気に入りのCSSコードを追加しましょう。

h2タグ

.post h2::after{
background:0 none;
}

h3タグ

.post h3::after{
background:0 none;
}

h4タグ

.post h4{
border-left:0 none;
}

当ブログで使用している見出しのコード

「!important」と先述した削除コードを組み合わせています。

h2タグ

.post h2 {
padding: 0.4em 0.5em;/*文字の上下左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #c40026 !important;/*左線*/
border-bottom: solid 3px #d7d7d7 !important;/*下線*/
font-weight: bold/*太文字*/
}
.post h2::after{
background:0 none;/*元の横線消し*/

h3タグ

.post h3 {
clear: both;
border-left: 4px solid #ff8989;/*左線*/
border-bottom: 2px solid #ff8989;/*下線*/
font-weight: bold/*太文字*/
}
.post h3::after{
background:0 none;/*元の横線消し*/
}

h4タグ

h4 {
position: relative;
padding: 0.25em 0;
}
h4:after {
content: “”;
display: block;
height: 4px;
background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}
/* 見出し */
.post h4{
border-left:0 none;/*元の横線消し*/
}