ブログテーマはSimpicityを使用しています。無料であること、そしてカスタマイズしやすいことが魅力のテーマです。
このブログでは、「部長ナビ」や「寝ログ」の記事などを参考にしながら、Simplicityのカスタマイズにも取り組んでいます。
ところが、サイドバー見出しに下線をつけたはずなのに、うまく表示されないという状況が続いていました。ようやく、その原因に気づくことができたので記事にします。
「h3」と「h4」の違いは大きい
このブログをカスタマイズする際、「部長ナビ」に公開してあったCSSを参考にしました（ほとんどコピペです）。
ところが、サイドバーの見出しにつけたはずの下線が反映されませんでした。その部分に関するCSSはこんな記述でした。
#sidebar h4 {
font-size:20px;
border-bottom:5px solid #FF837B;
padding:10px 0;
}
そのまま貼り付けると、下線の色まで「部長ナビ」になってしまうので、色だけは変更することにしました。しかし、見出しは変化がありません。そこで、今度は「部長ナビ」と全く同じ記述にしてみましたが、やはり考えたようにはなりませんでした。
複数のカスタマイズ作業に取り組んでいたので、その時は、その原因を深く考えることもなく、解決できない状況が続いていました。
それからしばらくして、Simplicity2のstyle.cssを眺めている時に、偶然、その原因に気づくことができました。
「h4」から「h3」へ
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というテーマを使っているのに、まったくシンプルなデザインになってきていることです・・・