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

2016-05-31Web制作

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

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

20160531_01

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

20160531_02

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

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

スポンサーリンク

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

 

20160531_03

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

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

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

を試してみてください。

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

 

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

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

  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は全部いらないよ!」と指定してあげる必要があるのです。

 

見出し2のデザインリセット方法 あとがき

実は私もSimplicity導入当時、この線に苦しめられました。

「子テーマでは指定してないのに黒い線が! 一体どこからきているんだこれは!」と。

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

 

シンプル&可愛い見出しデザインの記事もありますのでどうぞ。

スポンサーリンク

おすすめ記事セレクション
シンプルなインテリアを目指す方へ → 買ってよかったホワイトの生活家電・生活用品まとめ
おしゃれな写真は誰でも撮れます → ブログ映えするオシャレな写真撮影&加工テクニック
デキる大人への第一歩 → 私のEvernoteの活用術・10個の事例【初心者でもできる活用法】
意識を変えるだけで貯まる! → 年収300万円のOLが8年で1000万円以上貯めた方法と習慣

この記事を読んだ人は他にこんな記事も読んでいます