アタックフォーメーション!

元ディーラー整備士が車業界から飲み物まで様々なテーマを本音で綴るブログ

アタックフォーメーション!

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

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

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

www.attack.work