Simplicityで見出し2のスタイルに線が入る原因とその解決方法

2016-05-31Web制作

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

こんにちは、とみーです。

Simplicityの見出し2って、デフォルトだとこんな感じに左側に黒い線が入るスタイルになっていますよね。

20160531_01

自分が気に入った見出しに変更したくて、子テーマのstyle.cssにスタイルシートを追加したとします。
そうすると黒い線が残ってしまう場合があるんです。

20160531_02

その黒い線(選択しているスキンによっては黄色い線や赤い線)は要らない! という方のための解決方法です。

上で使用している見出しデザインはこちらの記事でどうぞ。

スポンサーリンク

Simplicityで見出し2の線を消去する方法

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);
}

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

20160531_03

まだ消えないよ!という方は border: none !important; にしてみてください。

線が表示されてしまう原因

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

  1. Simplicity(親テーマ)のstyle.css
  2. Simplicity(親テーマ)のmobile.css (responsive.css)
  3. スキンのstyle.css
  4. スキンのmobile.css
  5. テーマカスタマイザーで変更したスタイル
  6. 子テーマのstyle.css
  7. 子テーマのmobile.css  (responsive.css)

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

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

Simplicityではいくつものスタイルシートを読み込んでいるため、それぞれで設定した値が画面に反映されてしまいます。
同じ要素を指定しているのであれば後から読み込まれた方で上書きされていきますが、特に指定していないと今回のようにそのまま残ってしまいます。
なので、.article h2の最初に「borderは全部いらないよ!」と指定してあげる必要があるのです。

あとがき

実はわたしもSimplicity導入当時この線に苦しめられました。
「子テーマでは指定してないのに黒い線が! 一体どこからきているんだこれは!」と。

同じような現象で困っている人のお役に立てれば幸いです。

こちらの記事もおすすめです