【ルクセリタス】H2H3見出しタグの横線消去

2019年1月13日PC, WordPress

このサイトは、るなさんの無料テーマ「Luxeritas」を使用させてもらっています。早速サイトをカスタマイズしていたのですが…早速つまずきました。 ちなみに、子テーマは「musica seriem」を使用しています。

H2H3見出しタグ横線消去

スポンサーリンク

カスタマイズのやり方

今回は、左のような初期の見出しを右のように変更します。単純に左の横線を消すだけですが、H2H3見出しタグとH4見出しタグではCSSの書き方が異なっていたために、つまずいたのでした。

まずは、CSSのカスタマイズ方法からです。

ルクセリタス 子テーマの編集

左のように

「Luxeritas」 → 「子テーマの編集」

と選んで下さい。そうすると下のような

「style.css」

のタブがありますので、そこの36行目以降に記入していきます。

ルクセリタス 子テーマの編集

「border-left:0 none;」では消えない

Googleで「ルクセリタス H2見出しタグ 横線 消去」という感じで調べてみると

/* 見出し */
.post h2, .post h3, .post h4{
border-left:0 none;
}

で消えるとあります。そのまま先ほどの「style.css」へ書くと、

ルクセリタス 見出し変更中

あれっ!? 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;
}

というように書いています。参考にしてみて下さい。

PC, WordPress

Posted by 管理人