検索
検索をクリア
検索終了
Google アプリ
メインメニュー

レイアウト用ページ要素タグについて

レイアウト テンプレートの <body> セクションは、いくつかのセクションとウィジェットで構成されています。

  • セクションは、ページ内にあるサイドバー、フッターなどの領域を指します。
  • ウィジェットは、ページ、ブログロールなど、[ページ要素] タブで追加できるページ要素のことを指します。

テンプレート内のセクション間には、任意の HTML を挿入することができます。

セクション

テンプレート内の各セクションには、次に示すような開始タグと終了タグがあります。

<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」のいずれかを指定します。既定値は「yes」です。[ページ要素] タブに、このセクションの [ページ要素を追加] リンクを表示するかどうかを指定します。
  • growth –(省略可)「horizontal」か「vertical」のいずれかを指定します。既定値は「vertical」です。このセクション内のウィジェットを、並べて表示するか重ねて表示するかを指定します。

セクションに含めることができるのはウィジェットだけです。セクション内に追加のコードを挿入するには、そのセクションを 2 つ以上の新しいセクションに分割します。

ウィジェット

ウィジェットは 1 つのタグで表されるプレースホルダで、[ページ要素] タブでそのウィジェットをどのように処理するかを示します。

ウィジェットの例(ページヘッダーのウィジェットとリストのウィジェット)を次に示します。

<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 –(必須)文字と数値のみを使用できます。テンプレート内のウィジェットの 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 が表示されます。

詳しくは、ウィジェット タグの編集についてのページをご覧ください。

: ブログを公開すると、<b:section> タグや <b:widget> タグはすべて <div> タグに置き換えられ、ID が指定されます。したがって、CSS の div#header や div#myList などを参照できます。

この記事は役に立ちましたか?
改善できる点がありましたらお聞かせください。