【ルクセリタス】H2H3見出しタグの横線消去
このサイトは、るなさんの無料テーマ「Luxeritas」を使用させてもらっています。早速サイトをカスタマイズしていたのですが…早速つまずきました。 ちなみに、子テーマは「musica seriem」を使用しています。
![H2H3見出しタグ横線消去](http://enriyl.info/wp-content/uploads/2019/01/H2H3見出しタグ横線消去.jpg)
カスタマイズのやり方
今回は、左のような初期の見出しを右のように変更します。単純に左の横線を消すだけですが、H2H3見出しタグとH4見出しタグではCSSの書き方が異なっていたために、つまずいたのでした。
まずは、CSSのカスタマイズ方法からです。
![ルクセリタス 子テーマの編集](http://enriyl.info/wp-content/uploads/2019/01/2019-01-12_21h47_48-e1547298470826.png)
左のように
「Luxeritas」 → 「子テーマの編集」
と選んで下さい。そうすると下のような
「style.css」
のタブがありますので、そこの36行目以降に記入していきます。
![ルクセリタス 子テーマの編集](http://enriyl.info/wp-content/uploads/2019/01/2019-01-12_23h20_33-1.png)
「border-left:0 none;」では消えない
Googleで「ルクセリタス H2見出しタグ 横線 消去」という感じで調べてみると
/* 見出し */
.post h2, .post h3, .post h4{
border-left:0 none;
}
で消えるとあります。そのまま先ほどの「style.css」へ書くと、
![ルクセリタス 見出し変更中](http://enriyl.info/wp-content/uploads/2019/01/2019-01-12_22h16_54.png)
あれっ!? H4見出しタグの横線しか消えていない!?
となった訳です。
答えは「::after」
調べた結果、下記のコードで無事にH2H3見出しタグの横線を消すことができました。たったこれだけのことですが、わからない時はわからないものです。
.post h2::after, .post h3::after{
background:0 none;
}
このままでは何もないので、例えばこのサイトでは
.post h2, .post h3{
border-left:10px solid #1e73be;
border-bottom:2px dashed #1e73be;
}
.post h2::after, .post h3::after{
background:0 none;
}
というように書いています。参考にしてみて下さい。