記事タイトルの幅をボディいっぱいに表示する方法

Brogramming with Tom
記事タイトルをボディの幅いっぱいに表示する方法を紹介します。

photo credit: ryanoshea via photopin cc



まず、 <h3 class='post-title entry-title' itemprop='name'>とでも検索し、その部分を post-outerの上辺りに持ってきます。


<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<a expr:name='data:post.id'/>

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

</div>
<div class='post-outer'>



そして、CSSは、以下のように書きました。

.post.hentry {
margin: 0;
}

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

.post h3 {
background-color:  #F5F5F5;
border-left:12px solid #ccc;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
padding:.1em .8em
}