Blogger のアーカイブページやラベルページに目次を付ける

別ブログの Natural Interior のアーカイブページやラベルページに目次を付けました。
livedoor ブログでやっていたインテリアブログで、カテゴリページや月別ページに目次を付けていたので、Blogger でも同じようにしたいと思っていたのです。

naminorito さんの 「Bloggerのアーカイブページやラベルページで記事タイトル一覧を表示」を参考にやってみました。

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<ul id='post-title-navigation'>
<span>このページの記事一覧</span>
<b:loop values='data:posts' var='post'>
  <li>
    <b:if cond='data:post.link'>
      <data:post.dateHeader/> - <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <data:post.dateHeader/> - <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.dateHeader/> - <data:post.title/>
       </b:if>
    </b:if>
  </li>
</b:loop>
</ul>
</b:if>
</b:if>

このコードを クリボウさんの記事 を参考に、<b:include data='top' name='status-message'/> の次の行へ挿入してみたのですが、NG。表示されません。

saco さんの記事 のアドバイスに従って、<b:includable id='main' var='top'> の下に貼り付けてみたら、やった！ うまく表示されました。

でも、私が使っているテンプレートの場合、背景画像の上に直接目次が表示されるので、見にくい。
そこで、目次部分を白くしてみました。

方法は、スタイルシートの最後に次のコードを貼って、

.post-title-navigation {
background-color:white;
padding:20pt;
}

目次を表示するコードの中で呼び出します（赤字部分）。

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div class='post-title-navigation'>
<ul id='post-title-navigation'>
<span>このページの記事一覧</span>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:post.link'>
<data:post.dateHeader/> - <a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<data:post.dateHeader/> - <a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.dateHeader/> - <data:post.title/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:if>
</b:if>

ブログのカスタマイズなんて数年ぶりなので、かなり手間取ってしまった・・・ーー;

8月27日追記：目次にナビゲーションを付けました。アーカイブページやラベルページに表示される記事が多いと、1 ページには収まらないので、目次の下に 「新しい投稿」「前の投稿」があった方が便利だろうと思い。

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div class='post-title-navigation'> --- スタイルシートの呼び出し
<ul id='post-title-navigation'>
<span>このページの記事一覧</span>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:post.link'>
<data:post.dateHeader/> - <a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<data:post.dateHeader/> - <a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.dateHeader/> - <data:post.title/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='nextprev'/> ------ ナビゲーション
</div>
</b:if>
</b:if>

ちなみに、livedoor ブログではメインページに表示する記事数と月別ページやカテゴリ別ページに表示する記事数を個別に指定できたように記憶しているのですが、Blogger ではメインページに表示する記事数しか指定するオプションがなく。

メインページの記事数はあまり多くしたくないけれど、アーカイブページやラベルページに表示される目次の件数があまり少ないのでは目次の意味が薄れる気もして。

今はまだブログ全体の記事数が少ないからいいけれど、記事が増えてきたら、最適な記事数を探らねば・・・・。