サイドバー見出しのデザインを変更する方法【Simplicity2の場合】

ブログテーマはSimpicityを使用しています。無料であること、そしてカスタマイズしやすいことが魅力のテーマです。

このブログでは、「部長ナビ」や「寝ログ」の記事などを参考にしながら、Simplicityのカスタマイズにも取り組んでいます。

ところが、サイドバー見出しに下線をつけたはずなのに、うまく表示されないという状況が続いていました。ようやく、その原因に気づくことができたので記事にします。

「h3」と「h4」の違いは大きい

このブログをカスタマイズする際、「部長ナビ」に公開してあったCSSを参考にしました（ほとんどコピペです）。

ところが、サイドバーの見出しにつけたはずの下線が反映されませんでした。その部分に関するCSSはこんな記述でした。

#sidebar h4 {
  font-size:20px;
  border-bottom:5px solid #FF837B;
  padding:10px 0;
}

そのまま貼り付けると、下線の色まで「部長ナビ」になってしまうので、色だけは変更することにしました。しかし、見出しは変化がありません。そこで、今度は「部長ナビ」と全く同じ記述にしてみましたが、やはり考えたようにはなりませんでした。

複数のカスタマイズ作業に取り組んでいたので、その時は、その原因を深く考えることもなく、解決できない状況が続いていました。

それからしばらくして、Simplicity2のstyle.cssを眺めている時に、偶然、その原因に気づくことができました。

Simplicity2.x.xになって、サイドバー見出しに関する記述が「h4」ではなく「h3」になっていたのです。

#sidebar h3{
  margin-bottom: 10px;
  font-size:20px;
}

そこで、サイドバー見出しに関する記述を次のように変更しました。

#sidebar h3 {
  font-size:20px;
  border-bottom:5px solid #FF837B;
  padding:10px 0;
}

すると、サイドバー見出しに下線がつきました。「h3」と「h4」の違いだけだったのですが、その違いは大きな違いでした。このため、Simplicity1.x.xの場合はうまく表示できても、Simplicity2.x.xの場合は無効になってしまっていたわけです。

これで、状況を改善することができるようになったので、ブログ全体の配色などを見直すことにしました。サイドバー見出しは次のように変更してみることにしました。

#sidebar h3 {
color:#fff;
font-size:18px;
background:#333333;
padding:10px 10px;
}

ようやく、サイドバー見出しの表示問題が解決できました。
最近、ブログを眺めていて気になり始めたことがあります。それは、せっかくSimplicityというテーマを使っているのに、まったくシンプルなデザインになってきていることです・・・