WordPressで見出し2のスタイルに線が入る原因と消す方法

2016-05-312020-05-04Web制作

WordPressでお使いのテーマによっては、デフォルトで見出しに装飾が施されています。

例えばSimplicityの見出し2は、下記のように左側に黒い線が入るスタイルになっています。

見出しのスタイルを変更したくて、子テーマのstyle.cssにスタイルシートを追加すると。

デフォルトのスタイルが残ってしまう場合があるんです。

元々の黒い線は要らない！という方のため、デフォルトの線を消す方法を解説しています。

Contents

1. WordPressで見出し2の線を消す方法（Simplicityの場合）
2. 見出し2に線が表示されてしまう原因（Simplicityの場合）
3. 見出し2のデザインリセット方法　あとがき

WordPressで見出し2の線を消す方法（Simplicityの場合）

style.cssの.article h2に border: none; という文字列を入れるだけです。

.article h2{
	border: none;
	ここに見出し2用のスタイルシートをコピペ
}

注意していただきたのは、必ず.article h2開始直後に border: none; を入れること。

最後に挿入するとコピペしてきたスタイルが無駄になってしまいます。

グラデーションの見出しだとこのようなスタイルシートになります。

.article h2{
	border: none;
	background: -webkit-linear-gradient(left, #D27EB3, #B492CC);
	background: -moz-linear-gradient(left, #D27EB3, #B492CC);
	background: linear-gradient(left, #D27EB3, #B492CC);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.article h2:before, .article h2:after{
	content: '';
	margin: 10px 0px;
	display: block;
	height: 1px;
	width: 100%;
	background: -webkit-gradient(linear, left top, right bottom, from(#D27EB3), to(#B492CC));
	background: -moz-linear-gradient(left, #D27EB3, #B492CC);
	background: linear-gradient(left, #D27EB3, #B492CC);
}

これで無事線が消えました。

まだ消えないよ！という方は

border: none !important; にする
ブラウザでCtrl+F5する（スーパーリロード：キャッシュをクリアして表示する）

を試してみてください。

ちなみに当ブログで使用しているテーマ、Luxeritasの場合は.articleを.postに置き換えれば消えます。

見出し2に線が表示されてしまう原因（Simplicityの場合）

スキン機能のスタイルが呼び出される順番は以下のようになっています。

Simplicity（親テーマ）のstyle.css

Simplicity（親テーマ）のmobile.css （responsive.css）

スキンのstyle.css

スキンのmobile.css

テーマカスタマイザーで変更したスタイル

子テーマのstyle.css

子テーマのmobile.css （responsive.css）

スタイルシートは、同じセレクタなら後から呼び出されたもの、HTML内で指定されているものが優先されるので、1が最も優先度が低く、7が1番優先度が高くなります。

Simplicityのスキン機能の仕様 – Simplicity