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

私のブログは、「Blogger Template」でとってきたEducation Blogというテンプレートを使用しています。

※リンク
BTemplates：http://btemplates.com/
Education Blog：http://btemplates.com/2012/blogger-template-educationblog/

このままでも悪くないんだけど、気になったところもあったので少し編集しました。

・投稿文に枠線を足す
このテンプレートはデフォルトのままだと、投稿文の枠がありません。また、背景画像と、投稿文の背景色がとても近いので、どこが投稿文なのかわかりにくいです。

というわけでHTMLの編集をします。BloggerのテンプレートからHTMLの編集を開き、投稿文に関するCSSを探します。
#main-wrapper {
    background: none repeat scroll 0 0 #FFFFFF;
    float: left;
    margin-left: 0;
    margin-top: 0;
    overflow: hidden;
    padding: 10px;
    width: 616px;
    word-wrap: break-word;
}
どうやらここが投稿文のデザインをしている部分のようなのでここに枠線を表示する文を付け足します。

border-style: double; /* 枠線の形 */
border-color: #cccccc;/* 枠線の色 */
border-top-width: 2px; /* 上の枠の太さ */
border-bottom-width: 2px; /* 下の枠の太さ */
border-left-width: 2px; /* 左の枠の太さ */
border-right-width: 2px; /* 右の枠の太さ */
以上で投稿文に枠線が表示されるようになりました。

枠線なし

 

枠線あり

 

これで前より少し見やすくなったと思います。