Bloggerの構造を調べてみました

公開日 : 最終更新日 :

カテゴリー :

最近、テンプレートを触っていてBloggerの構造に興味を持ったので、BloggerののHTML構造を調べてみました。Bloggerは、正確に言えばHTMLではなくXHTMLになります。XHTMLは、HTMLとXMLを足したような構造でHTMLではできないことをXMLを使って補っています。XHTMLについて詳しいことは調べてください。

セクションタグの属性

まずは、ブログのレイアウトからです。レイアウトは<b:section></b:section>タグを使います。<b:section>タグでどのような属性のタグが設定します。設定した<b:section>タグは、CSSで実際のレイアウト定義を決めます。<b:section>の属性は以下のようなものが使用できます。

  • id : (必須) セクション固有の識別子を入力します。重複する名前は付けれません
  • class : (オプション) よく使用される識別子を指定できます。サイドバーなら「sidebar」、フッターなら「footer」など、セクションがどのようなものかをわかりやすくするのに便利です
  • maxwidgets : (オプション) セクションで使用できるウィジェットの数を指定できます。maxwidgetsの指定がない場合はウィジェットの上限はありません
  • showaddelement : (オプション) “yes”か”no”のどちらかを指定します。「ページ要素」タブにセクションの「ページ要素を追加」リンクを表示するかどうかの違いがあります。showaddelementの指定がない場合は、”yes”になります
  • growth : (オプション) “horizonal”か”vertical”のどちらかを指定します。ウィジェットを並べて表示するか、重ねて表示するかの違いがあります。growthの指定がない場合は、”vertical”になります。

<b:section>タグの属性は以上です。必須と書いてあるものは必ず指定する必要があります。オプションと書いてあるものは、書いても書かなくても大丈夫です。セクションを使う例としてこんな感じになります。

<b:section id='header' class='header' maxwidgets='1' showaddelement='no'>
・・・・・
</b:seciton>

上の例は、ヘッダーにセクションを設けるときの例です。id=’header’という固有のものを指定し、class=’header’でどんなものかを指定します。maxwidgets=’1’はウィジェットが1つのみ指定できるということです。showaddelement=’no’は、Bloggerの管理画面でウィジェットの追加ができないということです。最低限、以下のようなものがあれば大丈夫です。

<b:section id='sample'>
・・・・・
</b:section>

<b:section>タグの中には、<b:widget></b:widget>タグで囲んであるもののみ入れることが出来ます。<b:section>タグに<b:section>タグを入れたりすることは出来ません。

ダメな例

<b:section>
   <b:section>
   </b:seciton>
</b:section>

良い例

<b:section>
   <b:widget />
</b:section>

ウィジェットタグの属性

<b:section>タグに唯一入れることが出来る<b:widget>タグについて紹介します。<b:widget>タグはレイアウトで追加できるラベルやブログアーカイブなどを記述してあるタグになります。<b:widget>タグの属性は以下の通りです。

  • id : (必須)ウィジェット固有の識別子を入力します。重複する識別子は付けれません。ウィジェットのidの識別子は一度入力すると変更できません。idを変更する場合は、一度<b:widget>タグごと削除して新しく、<b:widget>タグを作成する必要があります
  • type : (必須)使用するウィジェットの種類を指定します。指定できる後で紹介します
  • locked : (オプション) ‘true’か’false’で指定します。’true’はレイアウト画面で、ウィジェットの移動・削除ができません。falseは、レイアウト画面でウィジェットの移動・削除が出来ます。lockedの指定がない場合は、’false’になります
  • title : (オプション) ウィジェットに表示するタイトルを入力できます。titleの指定がない場合は、type属性にあったタイトルが表示されます
  • pageType : (オプション) ‘all’、’archive’、’main’、’item’のどれかを指定します。この属性が指定されているページのみ表示できるようになります。レイアウト画面では、pageTypeの指定は反映されません。pageTypeの指定がない場合は、’all’になります
  • mobile : (オプション) ‘yes’、’no’、’only’のいずれかを指定します。ウィジェットをモバイルテンプレートで表示するかどうかを指定出来ます。’yes’ならモバイルも表示、’no’ならモバイルは表示しない、’only’はモバイルだけ表示、ということです。mobileの指定がない場合は、’default’になります。’default’の場合は、Header、Blog、Profile、PageList、AdSense、Attributionのtype属性が表示されます。

<b:widget>タグのtype属性で指定できる種類は以下の通りです。必須と書いてあるものは必ず指定する必要があります。下にあるいずれかを指定する必要があります。複数の指定はできません。

ウィジェットタグのtype属性の種類

  • BlogArchive :アーカイブウィジェットです
  • Blog : ブログコンテンツそのもののウィジェットです
  • Feed : フィードウィジェットです
  • Header : ヘッダーウィジェットです
  • HTML : HTML/Javascriptウィジェトです
  • SingleImage : 画像ウィジェットです
  • LinkList : リンク集ウィジェットです
  • List : リストウィジェットです
  • Logo :Bloggerのロゴウィジェットです
  • BlogProfile : プロフィールウィジェットです
  • Navbar : ナビゲーションバーのウィジェットです
  • VideoBar : 動画バーウィジェットです
  • NewsBar : ニュースリールウィジェットです

ウィジェットタグの使い例は以下の通りです。

<b:widget id='header' type='Header' locked='true' title='Header1'/>

基本的にウィジェットを1から作成することはあまりないと思いますが、<b:widget>タグを展開してウィジェットの詳細を見ることも出来ます。展開した場合は以下の通りです。

<b:widget id='header' type='Header' locked='true' title='Header1'>
・・・・・
</b:widget>

ウィジェットの詳細については今度記事にします。ブログを公開するときは、<b:section>タグ、<b:widget>タグどちらも<div>タグに置き換えられ、<div>タグのidが指定されます。なのでCSS等で「div#セクションID」や「div#ウィジェットID」といた具合に参照できます。

参考

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>