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

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

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

この記事は2015年11月24日にSimplicity1でアップしたものを、「Simplicity2」版として再編集、再アップしたものです。Simplicity1系との違いは記述していますので、そちらを参照してください(2016年3月20日、4月7日追記、5月14日修正) こんにちは。WordPressにてテーマ「Si...

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

スポンサーリンク

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

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

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

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

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

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

スポンサーリンク

「h4」から「h3」へ

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

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

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

スポンサーリンク

まとめ

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

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