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

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

ここではブログを構成するデータを扱う<b:widget>要素について解説します。

<b:widget>要素とは

Bloggerのヘルプなどでは「ウェジェット」や「ガジェット」と呼ばれます。
投稿の本文やタイトルなどのブログを構成するデータを出力する為の要素です。
<b:widget>要素は<b:section>要素の中に配置されます。

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

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

<b:widget>要素の属性

id

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

type

ガジェットの種類を指定します。必須です。

locked

レイアウト画面でガジェットの移動や削除を行えるかどうかを指定します。
'yes'を指定すると可能に、'no'を指定すると不可能になります。
省略すると 'no' です。

title

レイアウト画面で表示されるタイトルを指定します。
省略するとデフォルトのタイトルになります。

visible

ガジェットを出力するかどうかを指定します。
'true’なら出力し、'false’なら出力されません。
省略すると 'true' なようです。

<b:widget>要素の中身

<b:widget-settings>要素

ガジェットの設定を格納する要素です。
「レイアウト」画面では各ガジェットに編集ボタンがあり、そこから種類毎の設定を行なう事が出来ますが、そこで設定した内容になります。

<b:includable>要素

このガジェットが出力するコンテンツの中身を記述する要素です。
<b:widget>の中には必ず１つ<b:includable id='main'>が必要です。

id='main'以外の<b:includable>も定義できますがそれだけでは出力されません。
これらは<b:include>要素を使って呼び出されます。
（プログラムの関数呼び出しをイメージすると分かりやすいかもしれません）

以下の例では 'main' と 'title' の<b:includable>を定義しています。
'main'の中から<b:include>を使って 'title' のコンテンツが呼び出されています。

<b:widget id='Header1' type='Header'>
  <b:includable id='main'>
    <div class='header-widget'>
      <b:include name='title'/>
    </div>
  </b:includable>
  </b:includable>
  <b:includable id='title'>
    <h1>
      <data:title/>
    </h1>
  </b:includable>
</b:widget>

参考：https://support.google.com/blogger/answer/46888?hl=ja