フッターのレイアウトはどのようにして作られているのか:BloggerのテンプレートHTMLを読み解く

イントロダクション

Blogger のフッターのレイアウトは、テンプレートデザイナーによって、1段組み・2段組み・3段組みを選択できます。

フッターのレイアウト

このフッターのレイアウトを設定したブログをブラウザで見てみると、次のようになります。

フッターの表示結果

フッターとして、人気の投稿とブログアーカイブで 2 段組みになっていることがわかります。


このフッターの段組みがどのようなテンプレートの HTML で実現されているのか気になったため、調査してみました。

テンプレートの HTML を調査

Blogger のテンプレートの HTML より、フッターのレイアウトを形作っている箇所を抜き出しました。

<macro:includable id='sections' var='col'>
  <macro:if cond='data:col.num == 0'>
  <macro:else/>
    <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-1&quot;' preferred='yes' showaddelement='yes'/>

    <macro:if cond='data:col.num &gt;= 2'>
      <table border='0' cellpadding='0' cellspacing='0' mexpr:class='&quot;section-columns columns-&quot; + data:col.num'>
      <tbody>
      <tr>
        <td class='first columns-cell'>
          <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-1&quot;'/>
        </td>

        <td class='columns-cell'>
          <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-2&quot;'/>
        </td>

        <macro:if cond='data:col.num &gt;= 3'>
          <td class='columns-cell'>
            <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-3&quot;'/>
          </td>
        </macro:if>

        <macro:if cond='data:col.num &gt;= 4'>
          <td class='columns-cell'>
            <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-4&quot;'/>
          </td>
        </macro:if>
      </tr>
      </tbody>
      </table>

      <macro:if cond='data:col.includeBottom'>
        <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-3&quot;' showaddelement='no'/>
      </macro:if>
    </macro:if>
  </macro:if>
</macro:includable>


<!-- 省略 -->


<b:section-contents id='footer-2-1'>
  <b:widget id='PopularPosts1' locked='false' title='人気の投稿' type='PopularPosts'>
  
<!-- 省略 -->

  </b:widget>
</b:section-contents><b:section-contents id='footer-2-2'>
  <b:widget id='BlogArchive1' locked='false' title='ブログ アーカイブ' type='BlogArchive'>
 
<!-- 省略 -->

  </b:widget>
</b:section-contents>

フッターのレイアウトを形作っているコードは大きく分けて、次の 2 つに分けられます。

１．フッターのレイアウト（表）を形作っている HTML

フッターのレイアウトを形作っている HTML は上記に示した HTML の前半部分です。

<macro:includable id='sections' var='col'>
  <macro:if cond='data:col.num == 0'>
  <macro:else/>
    <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-1&quot;' preferred='yes' showaddelement='yes'/>

    <macro:if cond='data:col.num &gt;= 2'>
      <table border='0' cellpadding='0' cellspacing='0' mexpr:class='&quot;section-columns columns-&quot; + data:col.num'>
      <tbody>
      <tr>
        <td class='first columns-cell'>
          <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-1&quot;'/>
        </td>

        <td class='columns-cell'>
          <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-2&quot;'/>
        </td>

        <macro:if cond='data:col.num &gt;= 3'>
          <td class='columns-cell'>
            <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-3&quot;'/>
          </td>
        </macro:if>

        <macro:if cond='data:col.num &gt;= 4'>
          <td class='columns-cell'>
            <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-4&quot;'/>
          </td>
        </macro:if>
      </tr>
      </tbody>
      </table>

      <macro:if cond='data:col.includeBottom'>
        <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-3&quot;' showaddelement='no'/>
      </macro:if>
    </macro:if>
  </macro:if>
</macro:includable>

どのように段組みを作っているのかといったら、table, tbody, tr, td タグを使用して段組みを作っていました。いわゆる表ですね。

data:col.num という変数は、おそらく Blogger のテンプレートのカスタマイズで設定した、段組みの段数でしょう。
（公式のデータ一覧を見ても載っていないデータなので推測です。）


段組みが 0 の場合には、この表は出力されません。
段数が 3 段の場合には、

<macro:if cond='data:col.num &gt;= 3'>

の部分の判定式が真になるため、3段目の段が表示される仕組みです。
（data:col.num &gt;= 3 はエスケープされているためわかりづらいですが、data:col.num >= 3 です。）

段数が 4 段の場合も 3 段の場合と同じ仕組みが適用されます。
（テンプレートデザイナーでは、3 段までの段組みしか用意されていないのに、4 段目を表示する仕組みがテンプレートの HTML に組み込まれているというのは面白いですね。）


表のセルに表示するウィジットは、

<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-1&quot;'/>

の mexpr:id に対応するものが表示されます。（例えば、data:col.idPrefix + &quot;-2-1&quot; は footer-2-1 となります。）
そのウィジットの実体を定義しているのが、最初に示した HTML の後半部分です。

２．フッターのレイアウトに配置するウィジットを形作っている HTML

フッターのレイアウトに配置するウィジットを定義しているのが、最初に示した HTML の後半部分である以下の部分です。

<b:section-contents id='footer-2-1'>
  <b:widget id='PopularPosts1' locked='false' title='人気の投稿' type='PopularPosts'>
  
<!-- 省略 -->

  </b:widget>
</b:section-contents><b:section-contents id='footer-2-2'>
  <b:widget id='BlogArchive1' locked='false' title='ブログ アーカイブ' type='BlogArchive'>
 
<!-- 省略 -->

  </b:widget>
</b:section-contents>

１．で示した表のセルの部分には、そこに記載されている

<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-1&quot;'/>

の  mexpr:id に対応する b:section-contents の id のウィジットが配置されます。

<b:section-contents id='footer-2-1'>


この例では、footer-2-1 には人気の投稿ウィジットが定義されているため、表のセルの 1 番目には、人気の投稿ウィジットが配置されます。


こうしてテンプレートの HTML を見てみると、フッターの段組みの仕組みが良くわかります。

まとめ

フッターのレイアウトの HTML は、表のレイアウトを定義する部分と、配置するウィジットで別々に定義されています。

表のセルに配置するウィジットをまとめた b:section-contents の id と、セルに記載された b:section の mexpr:id の一致を見ることで、どのウィジットが、どの段組みに配置されるのか HTML から見ることができます。


しかしながら、通常段組みを編集するのは HTML を直接弄る必要はありません。
テンプレートデザイナーの設定やテンプレートのカスタマイズで対処できます。

通常の設定では対処できない、複雑なことをやろうとした場合にはテンプレートの HTML を編集する必要が出てきます。
（テンプレートの HTML を直接修正するのは、元に戻せなくなる危険性が伴うので、事前にテンプレートの HTML をバックアップし、十分に注意して編集する必要があります。）