Blogger：テンプレート編集(5)ウィジェットはインクルードの入れ物

前の関連記事：Blogger：テンプレート編集(4)練習用ブログを作っていろいろやってみる

ウィジェットはtitle属性があるので特定しやすい

前回記事に引き続き今度はウィジェットをテンプレートから書き出します。

<b:widgetで検索します。一緒にsectionタグも抜き出します。

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
    <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='テスト用(Header)' type='Header'>

 <b:section class='main' id='main' showaddelement='no'>
            <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>
 <b:section class='foot' id='footer-3' showaddelement='no'>
        <b:widget id='Attribution1' locked='true' title='' type='Attribution'>

</b:section-contents><b:section-contents id='sidebar-right-2-1'>
  <b:widget id='Profile1' locked='false' title='自己紹介' type='Profile'>
ウィジェットにはtitle属性があるのでどの部分に相当するかは一目でわかりますね。

ちゃんと全部セクションの中に入っています。

ウィジェットの属性でモバイルで表示できるか指定できる

ウィジェットでは、次の属性を指定できます。

• id - （必須）文字と数値のみを使用できます。テンプレート内のウィジェットの ID はそれぞれ一意である必要があります。ウィジェットの ID は変更できません。ウィジェットの ID を変更する必要がある場合は、一度そのウィジェットを削除して、新しく作成します。
• type - （必須）ウィジェットの種類です。下記の有効なウィジェットの種類のいずれかである必要があります。
• locked - （オプション）'yes' か 'no' のいずれかを指定します。デフォルトは 'no' です。ロックされたウィジェットを [ページ要素] タブから移動、削除することはできません。
• title - （オプション）ウィジェットの表示タイトルです。指定しない場合、'List1' などのデフォルトのタイトルが使用されます。
• pageType - （オプション）'all'、'archive'、'main'、'item' のいずれかを指定できます。デフォルトは 'all' です。このウィジェットは、ブログの指定ページにのみ表示されます（[ページ要素] タブには、pageType の設定にかかわらず、すべてのウィジェットが表示されます）。
• mobile - （オプション）'yes'、'no'、'only' のいずれかを指定できます。デフォルトは 'default' です。ウィジェットをモバイルで表示するかどうかを指定します。mobile 属性に 'default' を指定すると、モバイルでは Header、Blog、Profile、PageList、AdSense、Attribution が表示されます。

さっそくこのmoblie属性を使って簡単にモバイルサイトを編集できると思いましたがそうは簡単にいきませんでした。

なかなか一筋縄ではいかないBloggerです。

セクションはウィジェットを含みウィジェットはインクルードを含む

またまたBloggerのテンプレートをいじる - Araggerさんからの引用です。

<b:widget> は <b:includable> しか持てません。

<b:widget> には id='main' を指定した <b:includable> が1つ必要です。

参考にしたサイト

レイアウト用ページ要素タグについて - Blogger ヘルプ
セクションとウィジェットの公式ヘルプ

Bloggerのテンプレートをいじる - Aragger
こちらの方がわかりやすいです。

次の関連記事：Blogger：テンプレート編集(6)モバイルサイトの表示