Bloggerへの本文省略機能の追加

他のブログにはついているRead More機能が付いていないので、投稿が長文になると非常に一覧性が悪くなるこのBlogger。

当然、カスタマイズを行っている先輩諸氏が大勢おられるので、それに習って私もカスタマイズを行おうと思ったのですが、なぜかどの先輩方の説明も私のテンプレートのケースにあてはまらないのです。

で、私なりにカスタマイズを行った結果をメモしておくことにします。

レイアウトの「HTMLの編集」でテンプレートの</head>タグの直前に

<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
.fullpost {display:block;}
.readmore {display:none;}
<b:else/>
.fullpost {display:none;}
.readmore {display:block;}
</b:if>
を追加します。

記事を以下の様に書きます。

導入文
<div class="fullpost">
省略文
</div>
<div class="readmore"><a href="記事のURL">続きを読む▼</a></div>

こうすることで「続きを読む▼」を押すと記事の単独ページに移動して、全内容を表示することができます。

続きを読む▼