見出しのデザインが思ったとおりにできない!WordPressでブログを始めてつまずいた事と解決策②

前回の記事

「無効なURLです」から進めない!WordPressでブログを始めてからつまずいた事①

に引き続き、私がWordPressでブログを始めてからつまづいて、解決までに時間がかかった所をご紹介します。

今回のテーマはこちら。

変更後の見出しのデザイン「思ってたんと違う。」

WordPressでブログを立ち上げた際、私が選んだテーマが『Simplicity2』でした。

これは、使いやすいとのことで評判が良かったからと、シンプルなデザインが好みだったからです。

実際、使ってみてとても使いやすいですし、特に不自由を感じたことはありません。

記事を更新していく中で、文章にメリハリをつけるために『見出し3(h3)』を使用した際のこと。

「なんか・・・あんまり目立たないなぁ」

という訳で、見出しのデザインを変えることはできないか検索。

こちらのサイトに行きつきました。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

おお!いっぱい素敵なデザインがあるじゃないか!

わくわくしながら眺めて、私が選んだデザインがこちら。

左側のみに線のあるデザイン。シンプルでいい感じ。

コードをコピペして、後は貼り付けるだけで導入できる!

出典:CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選より

貼り付け方も調べました。

①ダッシュボード → ②外観 → ③カスタマイズ の順にクリック。

開いた先のページを下にスクロールして、

一番下にある『追加CSS』をクリック。

ここで好きなCSSを追加できるので、さっきコピペしたCSSを貼り付ければok!

ちなみに、コピペ元は”h1″になっていましたが、

私が変えたかったのは”h3″だったので、そこだけ名前を手動で変更しました。

ここを自分の変えたい見出しの名前に変えないとうまくいかないので注意。

入力を終えたら、最後に『公開ボタン』をクリックすれば反映されます。

ちゃんと貼り付けて、わくわくしながら、サイトを確認。

で・・・できてない・・・だと・・・?

デフォルトのグレーの下線がはいったままになってしまいました(´・ω・`)

なんでー?と思いつつ、めげずに原因を検索。

結果、『CSSの優先度』という存在を知りました。

元々『Simplicity2』で組まれているCSSの命令が、新しく私がコピペして入力したCSSの命令よりも優先されたらしいのです。

①外観 → ②テーマの編集 →③スタイルシート から、『Simplicity2』のCSSが確認できるとのことだったので、やってみる。

あった!

私が先程“h3”と入力していたのが、

『Simplicity2』のCSSでは“.article h3”という名前で命令されている!

どうやら、”h3″という名前よりも”.article h3″としっかり名前がついている方が優先度が高いと判断されてしまうらしい。

確かに、下線を命令する”border-bottom”というCSSが入ってる!

これだ!!

これを変えれば、ちゃんと思うように見出しを変更できる!

と思いましたが、元のスタイルシートを変にいじると、デザインがガタガタに、最悪の場合元に戻せなくなってしまう危険性が。

そんな複雑な編集じゃないので大丈夫だとは思いましたが、あまりいじりたくない所。

htmlやCSSをよく理解してないのならなおさら。

ふと、さっきのカスタマイズ画面で何とかできないか?と思いつき、とりあえずやってみることに。

①ダッシュボード → ②外観 → ③カスタマイズ → ④追加CSS

“h3″のところを、『Simplicity2』のCSSと同じ”.article h3″へ変更。

また、下線の命令を打ち消すために、”border-bottom: none;”という命令文を追加しました。

入力したら、『公開ボタン』をクリックするのを忘れずに。

ちなみに、

上線を打ち消したい時は”border-top: none;”

左線を打ち消したい時は”border-left: none;”

右線を打ち消したい時は”border-right: none;”

で対応できます。

サイトに戻って確認すると・・・

できた!

無事解決です!

この問題解決の際に、こちらのサイトが非常に参考になりました。

見出しのデザインをカスタマイズしても反映されない原因と対策

より詳しく説明してあるので、理解を深めたい方におすすめです。

同じことで悩んでいる方の参考になれば幸いです。

スポンサーリンク
スポンサーリンク

\シェアはこちらから/

\フォローはこちらから/