Bloggerでテンプレートの編集part3

前回に引き続きBloggerのテンプレートを編集したいと思います。

今回は、投稿文と投稿文の間に線を一本引きたいと思います。
デフォルトの状態だと、線がないため投稿文と投稿文の間の境目がわかりにくくなっています。

線なしの状態

・線を引く
まず線を引く場所ですが、日付とタイトルの間にします。ここに一本線を引きます。
CSSを使って線を引く方法はPart１で使用した枠線のコードとにています。

border-top: 1px solid #cccccc;

このコードを書けば線が引けます。
線は日付とタイトルの間に引きたいので、タイトルのデザインを行っている部分を探します。

.post h3 {
    color: #000000;
    font-size: 170%;
    font-weight: bold;
    line-height: 1.4em;
    margin: 0.25em 0 0;
    padding: 0 0 4px;
}

どうやらこの部分でタイトルのデザインを行っているようなので、先ほどのコードをここに追加します。

線ありの状態

 

これで線が引かれて前より見やすくなったはずです。