Bloggerのシンプルテンプレートで個別記事に枠を付ける

Brogramming with Tom
Bloggerのシンプルテンプレートで、個別記事に枠を付けてみました。

photo credit: ryanoshea via photopin cc



個別記事に枠をつける


Bloggerのシンプルテンプレートでは、個別記事には、枠はついていません。しかし、分かりやすさという点では、枠を付けたほうがパッと見た感じ、わかりやすいと思ったので、枠を付けてみました。





.post-outer {
border: 1px solid #DCDCDC;
}


        <div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
</div>



HTMLは、最初からこんな感じだったのかどうなのか忘れてしまいましたが、一応現在の状況を書いておきます。


CSS3で線に影をつける


それでもまだ分かりにくかったので、CSS3で線に影をつけてみました。線の太さを太くすれば、分かりやすくなるかもしれませんが、それでは、ちょっとカッコ悪くなるので、止めておきました。


    -webkit-box-shadow: 0 1px 0 #C1D6EC;
-moz-box-shadow: 0 1px 0 #C1D6EC;
box-shadow: 0 1px 0 #C1D6EC;



参考 : 立体感のある水平線をCSSだけで実現する方法


最終的には、以下の様な感じになりました。

.post-outer {
border: 1px solid #DCDCDC;
margin: 0px 0px 40px 0px;
padding: 20px 20px 0px 20px;
-webkit-box-shadow: 0 1px 0 #C1D6EC;
-moz-box-shadow: 0 1px 0 #C1D6EC;
box-shadow: 0 1px 0 #C1D6EC;
}