昨日は、Blogger に目次を表示させる方法を書いた。今日は、その目次に投稿日も表示させるようにしてみやう。
投稿日の表示方法には、timestamp を使う方法と dateHeader を使う方法の二通りがある。前記事のおさらいをした後、二つの方法を順に説明しませう。
おさらい
目次を表示するためのコードは、次のやうなものだった。
<b:includable id='contents'>
<div id='blog-contents'>
<b:if cond='data:blog.pageType != "item"'>
<h2>目次</h2>
<ul>
<b:loop values='data:posts' var='post'>
<li><a expr:href='data:post.url'><data:post.title/></a></li>
</b:loop>
</ul>
</b:if>
<!-- navigation -->
<b:include name='nextprev'/>
</div>
</b:includable>
まず、これをテンプレートの main セクションに追加。そして、目次を表示させる場所に
<b:include name='contents'/>
を挿入するんだったね。詳しくは前記事をどうぞ。
今回は、contents includable の変更点に話題を絞る。
timestamp を使う方法
timestamp は、記事のフッターに表示される投稿日情報のこと。timestamp を追加するには、
<b:loop values='data:posts' var='post'>
<li><a expr:href='data:post.url'><data:post.title/></a></li>
</b:loop>
を、次のように修正する。
<b:loop values='data:posts' var='post'>
<li><data:post.timestamp/> <a expr:href='data:post.url'><data:post.title/></a></li>
</b:loop>
ただし、本ブログのやうに、timestamp の書式を「投稿日の時刻のみ表示」にしていると、間抜けな目次が出来上がってしまう。その場合は、設定から timestamp の書式を適切なものに切り替えるか、次の dateHeader を使う。
なお、timestamp の書式の設定は、Settings > Formatting > Timestamp Format から行なえる。
dateHeader を使う方法
dateHeader は、記事タイトル前に表示されている投稿日情報のこと。dateHeader の表示には、<data:post.dateHeader/> を使う。
ただし、dateHeader は一日の記事に一つしか付かない。つまり、一日に 3 つの記事を投稿したら、最新の記事にのみ dateHeader 情報が付加され、残り 2 つの記事には dateHeader が用意されない。そのため、dateHeader の有無で、スタイル・シートを追加し、見た目を整える必要がある。
clmemo@aka では、
<b:loop values='data:posts' var='post'>
<li><a expr:href='data:post.url'><data:post.title/></a></li>
</b:loop>
を次のやうに修正し、
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<li class='with-date-header'><data:post.dateHeader/> <a expr:href='data:post.url'><data:post.title/></a></li>
<b:else/>
<li><a expr:href='data:post.url'><data:post.title/></a></li>
</b:if>
</b:loop>
下記のスタイル・シートを適用している。
#blog-contents li {
padding-left: 2em;
text-indent: -1em;
}
#blog-contents li.with-date-header {
text-indent: -2em;
}
これでも見た目は、まだよろしくない。誰かセンスのいい方、もう少しマシなスタイルを作って下さい ^^;
No comments:
Post a Comment