クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> | > Blogger beta のページエレメントタグ

Blogger beta のページエレメントタグ

Posted at: 2006-09-04 Label: , 4

(はじめに)

前回の記事で、Blogger beta 用のレイアウト可能なテンプレートを書くには、新しい形式のタグを使わないといけない、ということを書きました。そのタグについてのヘルプ Blogger Help: Page Elements Tags for Layouts を自分の勉強のために日本語にしてみました。正式にヘルプが日本語化されるまでの間ですが、参考にしてもらえたら、と思います。


ページエレメントタグ

新しい Blogger beta テンプレートの body 要素内は、セクションとウィジェットで構成されます。

  • セクション … サイドバー、フッターといったページの領域のこと。
  • ウィジェット … 画像やリスト、ブログロールなど、Blogger beta 管理画面のページエレメントタブから加えることができる、ページの部品たち。

セクションタグ

たとえばヘッダーセクションではこのようなタグが使われています。
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
ヘッダーで表示する内容
</b:section>

この b:section タグで指定できる属性は次のとおりです。

  • id … (必須)英数字だけを使ったユニークな名前。
  • class … (オプション)テンプレートで共通に使われているのは、navbar、header、main、sidebar、footer。別の名前を使用することも可能。
  • maxwidgets … (オプション)そのセクションに含むウィジェットの最大数。未指定だと最大数を設けません。
  • showaddelement … (オプション)yes か no を設定することができます。これはページエレメントタブでこのセクションに Add a Page Element(ページエレメントを追加する)リンクを表示するかどうかです。未設定だと yes。
  • growth … (オプション)horizontal か vertical を設定します。これはそのセクションが含むウィジェットを水平(horizontal)に配置するか、垂直に配置するかを設定するもの。未設定は vertical。
この b:section タグは動的ページ生成の際に div 要素に書き換えられます(id はそのまま)。なので id='header' な b:section 要素に CSS を適用したい場合は、div.header を指定したスタイルを書きましょう。

セクションはウィジェットしか含むことが出来ません。他のセクションや他のコードは含むことができないので注意が必要です。


ウィジェットタグ

Blogger beta 管理画面の簡単な表示形式では、ウィジェットは一つのタグで表されます(内容を展開して表示する事も可能)。例を挙げるとこんな感じです。

<b:widget id="header" type='HeaderView' locked="yes"/>

<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>

b:widget タグが指定できる属性は、次のとおりです。

  • id … (必須)英数字のみの、テンプレート内でユニークな名前。ウィジェット ID はウィジェットを削除して新しいものを作らないと、変更することが出来ません。
  • type … (必須)どんな種類のウィジェットかを示します。指定できる文字列は次のとおりです。
    • BlogArchive
    • Blog
    • Feed
    • Header
    • HTML
    • SingleImage
    • LinkList
    • List
    • Logo
    • BlogProfile
    • Navbar
  • locked … (オプション)yes か no を指定します。ウィジェットをロックするかどうかの設定です。ロックされたウィジェットは動かしたり削除することができません。
  • title … (オプション)ウィジェットの表示タイトルです。未指定だと List1 などの文字列が自動的に使われます。
  • pageType … (オプション)そのウィジェットをどのページに表示するかを設定します。all(全ページ)、archive(アーカイブページ)、main(メインページ)、item(記事単独ページ) のいずれかを指定します。デフォルトは all です。この pageType に関わらず、ページエレメントタブにはウィジェットが表示されます。
自分でウィジェットを作る場合には、ウィジェットのレイアウトとコンテンツを、ウィジェット内容が展開された形式のフォームに書き入れます。
バックアップのために Edit HTML タブからダウンロードするコードは、この展開されたコードになります。
普通、このモードでウィジェットを操作する必要はないと思います。ページエレメントタブからそれらを変更するだけの方が簡単なので。

この b:widget タグも動的ページ生成の際に div 要素に書き換えられます(id はそのまま)。そのため id='myList' な b:widget 要素に CSS を適用したい場合は、div.myList を指定したスタイルを書くようにしましょう。


(おわりに)

テンプレートタグを新しいものに書き換えないと、ぐらいにしか考えていなかったんですが、テンプレートの仕組み自体が大きく変わっているんですね。ブログの部品のフォーマットがはっきりしている分、部品を導入したりはずしたりということが随分楽になりそうな予感。もちろん部品を作る方は、新しいタグの仕組みをしっかり覚えないといけませんが。

Blogger beta で用いる独自のウィジェット作成に関しては、ウィジェットタグの詳細 Widget Tags for Layouts や、ウィジェットで参照するデータ Layouts Data Tags も理解しておかないといけないと思うので、また日本語にしてこのブログで公開することにします。需要があるかはわかりませんが…(汗)。


スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。 

Comments:4

  1.  おおーっ。
     素晴らしい。
     私も、Blogger Help のセクションタグの部分を読んでみたのですが、も一つ良く判らなかったのですが、クリボウさんの訳と説明でよく判りました。

    >需要があるかはわかりませんが…(汗)。
     ご、ご謙遜を(笑)。

    ReplyDelete
  2. Beta の新テンプレートは、少し敬遠してました。でも、クリボウさんの記事を読んで、life@aka の方を新テンプレートにアップデートしました :)

    少し触った限りの感触ですが、この新テンプレートは凄いですね。新 Blogger になってカスタマイズの自由度が低くなったという声を聞きますが、逆のような気がします。自由度が高すぎて、今まで以上にカスタマイズのしがいが出てきたと思います。

    今週末、時間が取れれば、clmemo@aka も新テンプレートにアップデートする予定です。

    ReplyDelete
  3. > ちゃめさん
    翻訳で、ちゃめさんに褒めてもらえてうれしいです。
    技術的な話ばかりのエントリだとあまり面白くないかも、と思ってしまったんですが、これはこれで、役に立ちますね。自分自身で読み返すこともけっこうありますし。

    > @aka さん
    新しいテンプレートで、これまでできなかったいろんなことができそうですね。
    外部サーバーを利用している僕としては、恩恵にあずかれないのが寂しい限りです(涙)。

    ReplyDelete
  4. はじめまして

    ブログのポスト表示をmain-wrapperあるいは他のブロック要素で納めてスクロールバーで閲覧するようにしたいのですが、複数のポストをしていると表示自体は高さを決めたブロック内で表示されてるのですが、複数のポストの分、下方に大きく余白が出来てしまいレイアウトが崩れてしまいます。

    タグ自体はmain-wrapper、あるいは他のdiv要素でbセクションポストは囲っているのですが表示高さに影響されるだけで隠れた応対でポストのテキスト記述行分、下方に余白としてスクロール表示されてしまいます。

    このようにならない方法があるでしょうか。

    別ブログではそれが出来てます。

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.