ブログエントリの間に区切り線を入れる

RW3.6検証済み
このエントリの内容は RapidWeaver 3.6 を使用して検証、カスタマイズされた時のものですが、このバージョンでの動作を保証するものではありませんのでご注意下さい。また、表示の無いバージョンでは動作しない、エラーが出ないという意味ではありません。
このブログで使用しているBravoテーマでもそうですが、ブログのエントリ間に区切り線(罫線)が無いものがあります。
個人差があると思いますが、前後のエントリと区別がつき難く見づらいので、今回は間に罫線(border-bottom)を入れることにしました。

その方法ですが、まずテーマの
style.cssを開きます。(カスタマイズの基本を読んでいることを前提として話を進めていきます。)
style.cssを開くと、
.blog-entry というclassがあるとおもいます。このブログ(現時点ではBravoテーマ)の場合、そのclassに

border-bottom: dashed 1px;

を追加しました。上下の間隔の調整は

margin-bottom: 30px;padding-bottom: 20px;

としました。margin-bottomは下のエントリタイトルとの間隔、padding-bottomcommentsとtrackbackとの間隔を調整しました。

まとめると、

.blog-entry { margin-bottom: 30px; padding-bottom: 20px; border-bottom: dashed 1px; }

となります。

標準でインストールされている他のThemeを見ると、
.blog-entry-body というクラスで区切り線を指定したものもありました。個人的には border-bottom を使用する場合は.blog-entry で指定してやる方がいいような気がします。

blog comments powered by Disqus