「続きを読む」を記事の下に表示する方法

Brogramming with Tom
「続きを読む」を記事の下に表示する方法を紹介します。

photo credit: ryanoshea via photopin cc


レイアウトを考える際に、「続きを読む」は結構厄介でした。ボタンにしても文字にしても中途半端な位置にしか表示できず、記事のボディにうまく表示しようとするも、文字が隠れてしまう形になったり、記事ボディから出して、右、左に表示してみましたが、空き領域がどうしても気になってしまいます。また、記事ボディとその下の中間に表示してみても、意図せざるしてそうなった感が半端ありませんでした。よって、記事ボディの下に幅いっぱいに表示してみました。


jump-linkとでも検索し、 <b:if cond='data:post.hasJumpLink'>の部分を <div class='post-footer-line post-footer-line-3'/>の下辺りに持ってきます。


<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>
</div>
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><span class='fontawesome-play'/> <data:post.jumpText/> </a>
</div>
</b:if>


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


.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;
}

.jump-link a {
overflow: hidden;
position:absolute;
margin: 0;
left:0;
right:0;
width:100%;
padding: 10px 0px 10px;
border: 1px solid #CCC;
background: #EEE;
text-decoration: none;
text-align: center;
color: #000!important;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.jump-link a:hover {
border: 0px solid #06c;
background: #06c;
color: #fff!important;
}