ゆーいです(^^)

ワードプレスでSimplicity2（シンプリシティ）

を使っていたある日、ふと

「サイトをおしゃれにしたい」

なんて時がきますよね。

僕も「見出し」のおしゃれなCSSを探し、

いざ貼り付けてみたところ

「あれ？横・下線が消えない」

「調べてやり直しても消えない...」

そんな見出しの横・下線を消す方法

についてご紹介していきます。

ワードプレスの見出しの横・下線を消す方法は？(Simplicity2)

※おしゃれな見出しを作るCSSの貼り方などは

　他のサイトを参考にしてください。

　分かっているものとして話を進めます。

初期のシンプリシティの見出しは次のようになっています。

「見出し２」なら見出しの横に線があります。

「見出し３」なら下に下線が。

「見出し４」なら下に点線が。

※今回は見出し３、見出し４でやってますが、

　その他の見出しでもやり方は一緒です。

おしゃれなCSSを追加しようとコピー&貼り付け

本来なら最終的にこうなります。

ですが、CSSを貼ると...

下線だけが初期のままで明らかにおかしい。

他サイトで調べた下線を消すCSS

を入れてみます。

※こちらのCSSはのでコピーせず、後述するCSSを
　コピーしてください

h2見出しタグの左の線を消す

/* h2見出しタグの左の線を消す */
 .article h2 { border-left: none; }

h3見出しタグの下線ボーダーを消す

/* h3見出しタグの線を消す */
 .article h3 { border: none; }

h4見出しタグの下線、点線ボーダーを消す

/* h4見出しタグの線を消す */
 .article h4 { border: none; }

すると...

下だけが消えてしまった...

この問題を解決するのが、

「CSSの強さ」です

CSSには

h2＜.article h2＜#main .article h2

という順に強さがあって

指定方法がh2の場合は.article h2の

ほうがCSSは効きません。

ようは、

「おしゃれなCSS」＜「下線を消すCSS」

となっていて、下線を消すCSSが上書きして

しまっているということ。

これを直すには下の画像のように

.article h3の「.article」の部分を

「h3」の前に移動させればいいだけ！

見出し３（h3）と見出し４（h4）も

修正した結果がこちら↓↓

.article h3 {
color: #364e96;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #364e96;/*上線*/
border-bottom: solid 3px #364e96;/*下線*/
}
　　↑がおしゃれなCSS


/* h3見出しタグの線を消す */
h3 { border: none; }

　↑見出し３はこれをコピー


.article h4 {
color: #364e96;/*文字色*/
border: solid 3px #364e96;/*線色*/
padding: 0.5em;/*文字周りの余白*/
border-radius: 0.5em;/*角丸*/
}

/* h4見出しタグの線を消す */
h4 { border: none; }

　↑見出し４はこれをコピー

/* h2見出しタグの左の線を消す */
 h2 { border-left: none; }

　↑見出し２はこれをコピーしてください

しっかりと「おしゃれなCSS」が正常に表示されました！

ワードプレスの見出しの横・下線を消す方法のまとめ

ワードプレスの見出しの横・下線を消す方法のまとめ

（h3の場合）

１：ホームページで好きなデザインの見出しコードを探す。

２：子テーマのstyle.cssに選んだコードを貼り付ける。

３：.article h3の「.article」の部分を

選んだCSSの「h3」の前に移動