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

スクリーンショット 2014 08 02 22 33 13

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

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

 

見出しの変更

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

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

NewImage

 

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

 

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

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

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

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

できあがりはこちら。

スクリーンショット 2014 08 07 7 15 49

 

 

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

スクリーンショット 2014 08 07 7 15 59

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

 

Tomo’s Comment 

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

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

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください