Blogger:ブログアーカイブにて、現在表示している投稿を目立たせる

イントロダクション

ひと月に投稿する記事の数が多くなると、ブログアーカイブでは大量の記事タイトルが並ぶことになります。

その結果、今表示している記事がブログアーカイブのどの位置に対応しているのかわからなくなることがあります。

そこで、Blogger のテンプレートの HTML を修正して、ブログアーカイブにて、現在表示している記事を目立たせるようにしました。

コード

Blogger の テンプレートの HTML の編集にて、ブログアーカイブの HTML

<b:widget id='BlogArchive1' locked='false' title='ブログ アーカイブ' type='BlogArchive'>

内の

<b:includable id='posts' var='posts'>

内を以下のように修正します。

修正前

    <b:includable id='posts' var='posts'>
        <ul class='posts'>
          <b:loop values='data:posts' var='i'>
            <li>
              <a expr:href='data:i.url'>
                <data:i.title/>
              </a>
            </li>
          </b:loop>
        </ul>
      </b:includable>

修正後

    <b:includable id='posts' var='posts'>
        <ul class='posts'>
          <b:loop values='data:posts' var='i'>
            <li>
              <a expr:href='data:i.url'>

<b:if cond='data:blog.url == data:i.url'>
  <b style="background-color:#ffffcc;"><data:i.title/></b>
<b:else/>
<data:i.title/>
</b:if>
              </a>
            </li>
          </b:loop>
        </ul>
      </b:includable>

修正後の HTML

<b:if cond='data:blog.url == data:i.url'> にて、現在表示しているページの URL とブログアーカイブに表示しようとしている項目の URL を比較し、同じ URL の場合には、目立たせる装飾を施しています。

結果

以下のように、現在表示している記事を目立たせることができるようになりました。

ブログアーカイブ：現在表示している記事を目立たせる

太字・背景明るい黄色で表示されている部分が現在表示されている記事