【Blogger】ページ / リンクリストガジェットを使わずにページリストを作る

Blogger でサイドバー等にページリストを載せたいとき、公式のページガジェットやリンクリストガジェットを使うのが一般的だと思う。

しかし、あえてそれらを使わずにページリストを作りたくなったので、やり方を考えた。

ページリストの作成方法

このようなページリストを作成するとする。

<ul>
  <li><a href='【ページ URL】'>【ページタイトル】</a></li>
  <li><a href='【ページ URL】'>【ページタイトル】</a></li>
  <li><a href='【ページ URL】'>【ページタイトル】</a></li>
</ul>

上のコードを直接打ち込んでもいいのだが、リストの構造を変えたいと思ったとき、項目ひとつひとつを修正しなければいけないのが大変だ。

そこで、Blogger で繰り返し処理を行う独自タグ b:loop を用いてページリストの作成を試みた。

• La balise de boucles / The loop tag : <b:loop> - Blogger Code PE

以下のページに記されているように、b:loop の values 属性にはデータタグ（<data:.../>）だけではなく任意の値も設定できる。

• Tableau de données / Type of Array data - Blogger Code PE

上の記事のTableau d'objetsの項目を参考にして考えたページリストのコードがこちら。

<ul>
  <b:loop values='[{title: "【ページタイトル】", url: "【ページ URL】"}, {title: "【ページタイトル】", url: "【ページ URL】"}, {title: "【ページタイトル】", url: "【ページ URL】"}]' var='page'>
    <li><a expr:href='data:page.url'><data:page.title/></a></li>
  </b:loop>
</ul>

b:loop の values 属性に、以下のように記事のタイトルと URL を埋め込んでいる。

[{title: "【ページタイトル】", url: "【ページ URL】"}, {title: "【ページタイトル】", url: "【ページ URL】"}, {title: "【ページタイトル】", url: "【ページ URL】"}]

記事ごとの情報は { と } の間にまとめられているので、リストの項目を増やしたい場合は、半角コンマ , を追加したあとに同じように情報を追加していけばオッケーです🙆

あとがき

Blogger のレイアウト画面は標準 JS を有効にしないと使えない。しかしそれを有効にするとブログが重くなるという弱点があった。

レイアウト画面を使うたびに標準 JS を有効にしなければならないのは正直だるすぎる。しかし、ページガジェットにしろリンクリストガジェットにしろ、項目を追加するにはレイアウト画面から行うのがセオリーみたいなところがあった。

そんなこんなでなんとかガジェットに依存せずにページリストを作れないかなあというエゴの塊みたいなカスタマイズだけれども、誰かの参考になるのかもしれないと思ってこの記事を書いた。誰かには届け。