【WordPress】左サイドバーに変更したことに伴って見出し（h2とh3）のスタイルを見直してみました。

先日サイドバーとメインの位置を入れ替えてサイドバーが左に来るレイアウトに変更してみました。

見慣れていないという違和感だけではなく、ところどころ見苦しい点が出てきたので微調整してみました。

見出しの変更

見出しh2についてはこれまではStinger3に標準でついてい

る吹き出しマークを入れて、メインの枠から少し左にはみ出すデザインにしていました。

しかしメインが右に来たため、見出しがはみ出していると隣のサイドバーと近くなってしまいちょっと見苦しく感じます。

設定に際してはこちらのサイトが参考になります。

えけこのくるる

まずは見出しがはみ出さないように設定をしました。

スタイルシート（style.css)でh2の記述を探し、margine-leftの数値をいじることで解決しました。私の設定では-20にしたらちょうどメインの枠と同じあたりに左端があいました。

そして吹き出しマークもやめてシンプルな二重線にします。background-imageを削除してborder-leftの部分をいじります。「border-left: 15px double #191970;」としました。また吹き出しを入れることで少し縦幅を広くしていたのを調整したり、下のスペースを狭めたりします。（paddingの数値をいじります。）

できあがりはこちら。

次にh3についてもh2に合わせてシンプルな一重のラインを左に配置しました。そして位置は少し右に下げてあります。

バックグラウンドの色をh2と合わせるか悩みましたがとりあえずこのままにしてみたいと思います。

Tomo’s Comment　

細かい変更ですが、少し見やすくなったように思います。

見出しのバックグラウンドの色についてはもう少し考える必要がありそう。なんとなくh2の色が浮いている感じ。思い切ってもう少しビビッドな色にしてしまうか、逆に地の色に合わせてしまうか、悩ましいところです。