Bloggerテーマの基礎知識 - <b:section>要素について知ろう

Bloggerではテーマの中でのみ使える固有の要素タグがあります。
この固有の要素タグはブログが表示される時に様々な制御が行われて最終的なHTMLが作り上げられていきます。

ここではレイアウトを担う<b:section>要素について解説します。



<b:section>要素とは

<b:section>要素はページのレイアウトを担う要素で<body>要素の中で使われます。
ヘッダー・サイドバー・ページ本文・フッターといった領域を定義する為の物です。
<b:section>要素の中に<b:widget>要素を入れ込んでいくという使い方になります。

Bloggerではメニューの「レイアウト」からガジェットの追加や編集が行えますが、そのガジェットの領域を制御するのが<b:section>要素という事になります。

ブログが表示される時には<b:section>は<div>に置き換わって出力されます。



<b:section>要素の属性

id

一意の名前を指定します。必須です。
ブログが表示される時には<div>要素の id 属性として出力されます。

class

クラス名を指定します。省略できます。
ブログが表示される時には<div>要素の class 属性として出力されます。

name

名前を指定します。省略できます。
ブログが表示される時には<div>要素の name 属性として出力されます。
「レイアウト」画面で表示される名前はココの値が使われるようです。
また、一部の名前は自動で日本語に置き換えられるようです。
  • name='Header'     → name='ヘッダー'
  • name='Page List (Top)' → name='ページリスト(先頭)' 
  • name='Page Body'   → name='ページの本文'
  • name='Sidebar'     → name='サイドバー'
  • name='Footer'     → name='フッター'

maxwidgets

セクション内に使用可能なガジェットの最大数です。
省略すると上限なしです。

showaddelement

「レイアウト」画面でガジェットの追加を可能にするかどうかを指定します。
'yes'を指定すると可能に、'no'を指定すると不可能になります。
省略すると 'yes' です。

growth

ガジェットを並べる方向を指定します。
'vertical’なら縦方向、'horizontal’なら横方向に配置されます。
省略すると 'vertical' です。





コメント