フッターの段組みをもう１つ追加する：Bloggerのカスタマイズ

イントロダクション

Blogger のブログ画面のデザインは、本文のレイアウトとフッターのレイアウトからそれぞれ好きなものを選択することができます。

Blogger のレイアウト

フッターの部分には段組みの異なるデザインの中から、好きな段組みを選択できます。上記の図では、２段組みを選択していますが、他にも１段組み、３段組みを選択できます。


しかしながら、ブログ画面のデザインにこだわってくると、フッターのレイアウトをもっと自由に設定したくなってきます。


例えば、段組みの下に、もう一つ段組みを設定したいといった場合です。


今回は、２段組みの下に、３段組みを設定してみたいと思います。

2段組みの下に、3段組みを設置

基礎知識としては、

フッターのレイアウトはどのようにして作られているのか:Bloggerのテンプレート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>

<!-- *** 新規に追加した部分 開始 *** -->
      <table border='0' cellpadding='0' cellspacing='0' mexpr:class='&quot;section-columns columns-&quot; + 3'>
      <tbody>
      <tr>
        <td class='first columns-cell'>
          <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-3-1&quot;'/>
        </td>

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

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

        <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;-3-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 を追加します。


　<!-- *** 新規に追加した部分 開始 *** -->
と
　<!-- *** 新規に追加した部分 終了 *** -->
の間に記載したコードが追加したコードです。

</b:section-contents><b:section-contents id='footer-2-1'>
  <b:widget id='Label1' locked='false' title='ラベル' type='Label'>
    <!-- 表記上省略 -->
  </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-contents id='footer-3-1'>
  <b:widget id='Profile1' locked='false' title='著者情報' type='Profile'>
    <!-- 表記上省略 -->
  </b:widget>
</b:section-contents><b:section-contents id='footer-3-2'>
  <b:widget id='HTML2' locked='false' title='' type='HTML'>
    <!-- 表記上省略 -->
  </b:widget>
</b:section-contents><b:section-contents id='footer-3-3'>
  <b:widget id='HTML5' locked='false' title='週末の予定を共有' type='HTML'>
    <!-- 表記上省略 -->
  </b:widget>
</b:section-contents>
<!-- *** 新規に追加した部分 終了 *** -->

なお、全てのコードをそのまま引用すると非常に見づらくなっているため、以下のコメントを記載した個所は表記上省略しています。

    <!-- 表記上省略 -->


なお、人によって、b:section-contents タグ内に入っているウィジットは異なります。そのため、上記の b:section-contents タグ内のタグは参考程度に見ておいてください。


また、追加した b:section-contents の中に b:widget が入っていますが、そこには自分自身が追加したい ウィジットのコードを貼り付けます。

なお、b:section-contents が空であっても、あとからBlogger の設定のレイアウトから、マウスのドラッグ＆ドロップによって、そこの段組みに配置するウィジットを設定することもできます。

結果

次のように、２段組みの下に、３段組みを配置したデザインでブログを表示することが出来ました。

Blogger のフッター：2段組みの下に、3段組みを配置

なお、この方法は Blogger 公式のやり方ではないので（テンプレートの HTML を弄っているため）、将来的にこの方法が使えるかどうかはわかりません。


もしかしたらそのうちデザインを変えるかもしれないので、デザインが変わっているかもしれませんが、このデザインの Blogger のブログは、

Dr.ウーパの日常2

http://upa-life.blogspot.com/

にて、公開中です。