イントロダクション
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 + "-1"' preferred='yes' showaddelement='yes'/>
<macro:if cond='data:col.num >= 2'>
<table border='0' cellpadding='0' cellspacing='0' mexpr:class='"section-columns columns-" + data:col.num'>
<tbody>
<tr>
<td class='first columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-1"'/>
</td>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-2"'/>
</td>
<macro:if cond='data:col.num >= 3'>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-3"'/>
</td>
</macro:if>
<macro:if cond='data:col.num >= 4'>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-4"'/>
</td>
</macro:if>
</tr>
</tbody>
</table>
<!-- *** 新規に追加した部分 開始 *** -->
<table border='0' cellpadding='0' cellspacing='0' mexpr:class='"section-columns columns-" + 3'>
<tbody>
<tr>
<td class='first columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-3-1"'/>
</td>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-3-2"'/>
</td>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-3-3"'/>
</td>
<macro:if cond='data:col.num >= 4'>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-3-4"'/>
</td>
</macro:if>
</tr>
</tbody>
</table>
<!-- *** 新規に追加した部分 終了 *** -->
<macro:if cond='data:col.includeBottom'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-3"' 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
にて、公開中です。
コメントを投稿
コメント投稿機能について