はてなブログ

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

CSS 反映しない

 

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

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

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

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

CSSを追記して青い見出しのデザインに変更してから困ったことに、記事内だけではなくブログ全体に反映されてしまいました。この見出しは「h2」でブログテーマPLAINはタイトル下のブログの説明カテゴリーも「h2」です。

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

見出しデザイン

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

僕が使用していたCSSコードはh2{  お好みのデザインコード }です。

このようなCSSで指示していたのが問題だったようです。これではブログ内の「h2」全部に「青いデザインに変更せよ」という指示が出ている状態です。解決方法はブログ全体ではなく「記事の中にあるh2にデザインを変更せよ」と追加で記述します。

.entry-content h2 {  お好みのデザインcss  }

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

見出し css

さいごに

単純なことでもCSSを変更は素人には難易度が高いです。思っているようにできなかった場合に知識がないので修正できない。結局はネットで調べてコピペをするしかなく、レベルが低すぎて応用が利かなかったりします。

これからも、はてなブログについて自分が困ったことや解決したことをご紹介します。