【第2回】これでわかった!Bloggerのページ要素タグまとめ
第2回ではBloggerのテーマの仕組みと基本的な構成要素についてみていきます。
テーマの仕組み
テーマの中身をもう少し具体的に見ていきます。
テーマの中身はXML
下の図は、テーマの編集画面ですが、1行目を見てわかるかもしれませんが、中身はXMLです。
XMLといっても、中身のほとんどはブログを表示するためのHTML/CSS/JavaScriptがそのまま書かれています。あとは、ブログの「投稿」や「ページ」などのコンテンツは「レイアウト用のデータタグ」というBlogger特有のタグ(要素)で参照して表示していきます。
なので、Bloggerでブログを作成するのに必要な知識としては、HTML/CSS/JavaScriptの知識に加えて、Blogger特有の「ページ要素タグ」「制御構文」「レイアウト用のデータタグ」になります。
テーマの構成要素
まずはテーマの構成要素のページ要素タグを見ていきます。
b:section
<b:section>
はレイアウトを区切る領域を定義します。
例えば、「ヘッダー」「メイン」「サイドバー」「フッター」といったような領域です。
セクション自体はコンテンツではなく単なる枠でしかありません。実際、<b:section>
はブログとして表示される際には<div>
に置換されて表示されます。
実際にコンテンツを表示するのは<b:widget>
の役割になります。<b:section>
内には少なくとも1つの<b:widget>
が必要です。
また、<b:section>
と<b:widget>
の間は記載しても表示されませんので注意が必要です。
<b:section>
<!-- b:sectionとb:widgetの間は記載しても表示されない -->
<b:widget>
<!-- 少なくとも1つのb:widgetが必要 -->
</b:widget>
</b:section>
b:sectionの属性
<b:section id='header' class='header' maxwidgets='1' showaddelement='no' growth='vertical'>
</b:section>
- id (必須)
- セクションで一意の名前を指定する。HTMLのid属性と同じと考えてよい。
- class (省略可)
- クラス名を記載する。HTMLのclass属性と同じと考えてよい。
- 「navbar」、「header」、「main」、「sidebar」、「footer」がよく使われる。
- maxwidgets (省略可)
- セクション内に使用可能なガジェットの最大数。省略した場合は上限なし。なので、省略しておくのがよい。
- showaddelement (省略可)
- [レイアウト]画面で[ガジェットを追加]を表示するかどうかを指定する。'yes’なら表示、'no’なら非表示となる。省略した場合は’yes’なので、省略しておくのが良い。
- growth (省略可)
- ガジェットを並べる際に、縦方向に並べるか、横方向に並べるかを指定する。'vertical’なら縦方向、'horizontal’なら横方向となる。省略した場合は’vertical’なので、省略しておくのが良い。
b:widget
<b:widget>
はガジェットを定義します。「レイアウト」の編集で出てきたガジェットです。
Googleのヘルプでは「ガジェット」と書かれていたり、「ウィジェット」と書かれたりしますが、どちらも同じ意味です。
ガジェットは「最新記事一覧」や「ページリンク」「コメント」のようなブログのコンテンツを表示するパーツです。これらを組み合わせてブログサイトを作っていきます。
また、セクションと同様にガジェットも実際にブログとして表示されるときには<div>
に置換されます。
b:widgetの属性
<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>
<b:widget id="BlogArchive1" locked="false" mobile="yes" title="Blog Archive" type="BlogArchive"/>
- id (必須)
- ガジェットで一意の名前を指定する。HTMLのid属性と同じと思ってよい。
- type (必須)
- ガジェットの種類を指定する。指定可能な種類は、 ‘Header’、‘Blog’、‘Profile’、‘PageList’、'Attribution’などがある。
- locked (省略可)
- 'yes’か’no’を指定する。'yes’を指定した場合、ガジェットを移動・削除することができない。'no’を指定した場合は、ガジェットを移動・削除することができる。省略した場合は、'no’となる。
- title (省略可)
- 表示タイトルを指定する。省略した場合は’type’属性で決まっているデフォルトのタイトルが表示されるようだ。
- pageType (省略可)
- ‘all’、‘archive’、‘main’、'item’のいずれかを指定する。省略した場合は、'all’となる。
- 'all’の場合は、すべてのページでガジェットが表示されるが、それ以外は指定したページの場合にのみ表示される。
- mobile (省略可)
- ‘yes’、‘no’、'only’のいずれかを指定する。省略した場合は、'default’となる。
b:includable, b:include
<b:includable>
は実際にブログのコンテンツを表示する要素になります。<b:widget>
内に定義し、コンテンツの表示の仕方を定義します。
それぞれの<b:widget>
には<b:includable id='main'>
が存在してなくてはなりません。<b:includable id='main'>
は、プログラムでいうメイン関数で、プログラムの入り口です。
この<b:includable id='main'>
でブログのコンテンツを表示するコードを書いていきます。
また、<b:includable>
は<b:widget>
内に複数定義することができます。例えば、ブログの記事を表示するガジェットでは、「タイトルを表示するincludable」「パンくずを表示するincludable」のように複数定義ができます。このように、一つ一つの<b:includable>
の役割を小さく分割しておくことで、テーマのメンテナンスがしやすくなります。
分割した<b:includeable>
は以下のように<b:include>
を使って呼び出します。
// 記事を表示する
<b:includable id='main' var='post'>
<b:include name='title' data='post'/>
<b:include name='breadcrumb' data='post'/>
</b:includable>
<b:includable id='title' var='post'>
// タイトルを表示するコード
</b:includable>
<b:includable id='breadcrumb' var='post'>
// パンくずを表示するコード
</b:includable>
<b:includable>
は関数の定義、<b:include>
は関数の呼び出しと覚えておくとよいですね。
b:includableの属性
<b:includable id='breadcrumb' var='post'>
// パンくずを表示するコード
</b:includable>
- id (必須)
- includable固有のIDを指定する。ガジェットには必ず1つ
<b:includable id='main'>
を定義する必要がある。
- includable固有のIDを指定する。ガジェットには必ず1つ
- var (省略可)
<b:include>
か呼び出される際に、渡されるデータの引数を指定する。
b:includeの属性
<b:includable id='main' var='post'>
<b:include name='title' data='post'/>
<b:include name='breadcrumb' data='post'/>
</b:includable>
- name (必須)
- インクルードする
<b:includable>
のid属性を指定する。
- インクルードする
- data (省略可)
<b:includable>
に渡すデータを指定する。
- cond (省略可)
- インクルードする条件式を指定する。書式はb:ifと同じ。
b:skin
テーマで使用するCSSを記載します。
<b:skin>
はテーマに必須の要素で、<head>
タグ内に記載します。必須の要素なので使用しない場合は空(<b:skin></b:skin>
)で定義します。
<b:skin>
が<b:template-skin>
と異なる点はGroup要素とVariable要素が使えることです。
Group, Variable
Group要素とVariable要素はフォントサイズや色などのスタイルを変数として定義することができます。定義した変数の値は「テンプレートデザイナー」のGUIで編集ができるようになります。
b:widget-settings
<b:widget-settings>
はガジェットの設定を定義する要素です。ガジェットの設定は「レイアウト」のガジェット右下にある「編集」ボタンで設定できますが、あらかじめテーマで設定しておくことができます。
以下は「ブログの投稿」のガジェットの設定の抜粋です。
ガジェットによって設定可能なものが異なります。
<b:section class='region-background primary-50' id='contents' name='Contents' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='ブログの投稿' type='Blog' version='1'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>true</b:widget-setting>
<b:widget-setting name='style.textcolor'>#000000</b:widget-setting>
<b:widget-setting name='showShareButtons'>true</b:widget-setting>
<b:widget-setting name='authorLabel'>By</b:widget-setting>
<b:widget-setting name='showCommentLink'>true</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='top'>
<!-- [region] Content area -->
<div class='region-content'>
<article>
<h2><data:post.title/></h2>
<!-- Content -->
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</article>
</div>
</b:includable>
まとめ
Bloggerの基本的な構成要素について見てきました。
これまで、チンプンカンプンだったテーマのファイルが、なんとなく読めるようになっていると思います。一度、適当なテンプレートをダウンロードして読んでみるとよいですね。
最後まで読んでいただき、ありがとうございます。
また読んでくださいませ。
そんじゃーね。