日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年5月27日火曜日

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 の場合には、目立たせる装飾を施しています。

結果

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


ブログアーカイブ:現在表示している記事を目立たせる
太字・背景明るい黄色で表示されている部分が現在表示されている記事





関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...