前の関連記事：Blogger：テンプレート編集(2)インクルードincludeは関数に相当
実際にテンプレートのHTMLを解析していく
レイアウト用ページ要素タグについて - Blogger ヘルプ
ヘルプを読んでもよくわからないので実際に私が使っていPicture Windowテンプレートを解析していくことにしました。
管理画面→テンプレート→HTMLの編集
HTMLの編集画面で検索する
HTMLの編集はChromeでやります。Sleipnir4では折りたたんだ中は検索できませんでした。
この画面でHTMLテンプレート内をクリックしたあとCtrl+Fで右上に検索語入力欄がでてきます
検索語を入力してEnterボタンを押します。
折りたたんだ部分も展開して検索してくれます。
折りたたむときは折りたためるタグの行番号をクリックすると折りたためます。
とりあえず<b:section>を全て書き出してみる
<b:sectionで検索してダウンロードしたxmlファイルからセクションを全て書き出してみました。
管理画面→レイアウト、でみれるレイアウトのどれに相当するか調べます。
検索された順に書き出していきます。
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
右上のNavbarセクション
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
ブログタイトルの入るHeaderセクション
ブログタイトルの入るHeaderセクション
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
Headerセクションの下のセクション
crosscol=cross-column=列をまたぐ、という意味らしい。
Headerセクションの下のセクション
crosscol=cross-column=列をまたぐ、という意味らしい。
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
その下のガジェットを追加できない領域を指す模様。
<b:section class='main' id='main' showaddelement='no'>その下のガジェットを追加できない領域を指す模様。
メインのブログ投稿セクション
<b:section class='foot' id='footer-3' showaddelement='no'>
一番下のAttributionセクション
一番下のAttributionセクション
以下は<macro:includable id='sections' var='col'>の中にありました。
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-1"' preferred='yes' showaddelement='yes'/><b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-1"'/>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-2"'/>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-3"'/>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-4"'/>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-3"' showaddelement='no'/>
これらはどこに相当するかわかりませんでした。
そもそもmacroとはなにかがわかりませんね。
右のサイドバーとAttribution以外のセクションはsection-contentsになっています。
<b:section-contents id='sidebar-right-1'>
ブローグアーカイブ部分
<b:section-contents id='sidebar-right-2-1'>
自己紹介部分
以下はガジェットが空の部分
<b:section-contents id='sidebar-right-2-2'/>
<b:section-contents id='sidebar-right-3'/>
以下の3つはAttribution以外のガジェットが入っていないセクション。
<b:section-contents id='footer-1'/>
フッタ1行目
<b:section-contents id='footer-2-1'/>
フッタ2行目左
<b:section-contents id='footer-2-2'/>
フッタ2行目右
公式ヘルプを探してもわからないことがある
公式ヘルプに載っているセクションの属性を転載します。
<b:section> タグでは、次の属性を指定できます。- id - （必須）一意の名前です。文字と数値のみを使用できます。
- class - （オプション）よく使用されるクラス名は 'navbar'、'header'、'main'、'sidebar'、'footer' です。後からテンプレートを切り替える場合、これらのクラス名は、最適なコンテンツ変換方法を判断するのに役立ちます。必要に応じて、他の名前を使用することもできます。
- maxwidgets - （オプション）このセクションで使用できるウィジェットの最大数です。指定しない場合、上限はありません。
- showaddelement - （オプション）'yes' か 'no' のいずれかを指定できます。デフォルトは 'yes' です。[ページ要素] タブに、このセクションの [ページ要素を追加] リンクを表示するかどうかを指定します。
- growth - （オプション）'horizontal' か 'vertical' のいずれかを指定します。デフォルトは 'vertical' です。このセクション内のウィジェットを、並べて表示するか重ねて表示するかを指定します。
[ページ要素]というのはガジェットを指すと思います。
showaddelement属性がyesのセクションはガジェットを追加できます。
さらにガジェット追加後新たに空のセクションが追加されるようですが、Headerの下のセクションだけは新たなセクションは追加されません。
classはテンプレートの切替時に使われるようですので迂闊に変更しないほうがよさそうです。
idはセクション名です。
maxwidgetsはセクションに含むことが可能なウィジェットの上限数です。
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-1"'/>
ここででてきたmexprはmacroの中で使われているexprということだと思います。
exprはXHTMLタグの中でBloggerのタグを使う場合はXHTMLの属性の前に expr:を使うようです。
これはBloggerのテンプレートをいじる - Aragger ここに書いてありました。
セクションの性質
<b:section> の中に <b:section> は入れ子にできません。
<b:section> は <b:widget> しか持てません。
<b:section> は複数の <b:widget> を持てます。
このわかりやすい解説は公式ヘルプでなくBloggerのテンプレートをいじる - Araggerから頂きました。
<b:section> は <b:widget> しか持てません。
<b:section> は複数の <b:widget> を持てます。
このわかりやすい解説は公式ヘルプでなくBloggerのテンプレートをいじる - Araggerから頂きました。
参考にしたサイト
レイアウト用ページ要素タグについて - Blogger ヘルプ
セクションとウィジェットの公式ヘルプ
Bloggerのテンプレートをいじる - Aragger
公式ヘルプよりいろいろ載っています。
0 件のコメント:
コメントを投稿