ライフスタイル

意図しない場所に見出しデザインが反映する時の対処法

はてなブログで見出しのデザインをCSSで変更すると、意図しない部分まで一緒に反映されてしまいました。変更したくない部分までなぜ反映されてしまうのか?解決する方法をご説明します。

ブログテーマはPLAINで運用しています。

2019/03/10追記:PLAINからZENO-TEALに変更しました。

cssデザインが意図しない部分に反映する原因

CSSを追記して青い見出しのデザインに変更すると、困ったことに記事内だけではなくブログ全体に反映されてしまいました

PLAINは見出しだけではなく、タイトル下のブログの説明カテゴリーも「h2」です。

記事内の見出しデザインだけを変更したつもりでも、ブログ全体で「h2」が使われているところがすべてこの青いデザインに変更されてしまいました

見出しデザイン

記事内だけデザインを反映させる方法

僕が使用していたカスタムCSSはh2{  デザインコード }です。

このようなCSSで指示していたのが問題だったようで、これではブログ内の「h2」全部に「青いデザインに変更せよ」という指示が出ている状態です。

解決方法はブログ全体ではなく「記事の中にあるh2にデザインを変更せよ」に追加で記述します。

.entry-content h2 {  デザインコード  }

「.entry-content」が「記事の中」を示しています。こうすることによって、記事の中にある「h2」のみ青いデザインの見出しに変更できます。

見出し css

さいごに

単純なことでもCSSを変更は素人には難易度が高いです。

思っているようにできなかった時に知識がないので自己修正できない。結局はネットで調べてコピペをするしかなく、レベルが低すぎて応用が利かなかったりします。

これからも、はてなブログについて自分が困ったことや解決したことがあれば記事にしていきます。