レイアウト用のウィジェット タグ

ブログの body セクションの作成に [レイアウト] テーマを使用している場合、写真やブログロールなどのページ要素を追加するのにウィジェットを使用できます。

タグの種類

このセクションでは、終了タグ内で使用できる HTML について説明しています。

インクルード（b:include）

インクルードの使用法

インクルードは、同じコード セクションを複数の場所で再使用したり、特定の条件が満たされている場合にのみインクルードするようにしたりする場合に特に便利です。

その場合は、b:includable 内にコンテンツを入力し、そのコンテンツを表示させる場所に b:include を挿入します。

フォーマット

 

<b:includable id='main' var='thiswidget'>
  [ここにコンテンツを挿入]
</b:includable>

 

属性

  • id（必須）: 文字と数字で構成される固有の ID。各ウィジェットには、id='main' が指定された includable セクションが必ず 1 つ必要です。
  • var（省略可）:文字と数字で構成される固有の ID。このセクション内のデータを参照する際に使用します。

`main` 以外の ID を持つ includable セクションを追加で作成した場合、自動的には表示されません。ただし、includable セクションを作成する際にたとえば id='new' を指定した場合は、<b:include name='new' /> と指定してメインの includable セクションを参照することで、セクションが表示されるようになります。

b:include タグの属性は、次のとおりです。

  • name（必須）: 文字と数字で構成される ID。同一ウィジェット内にある既存の b:includable の ID と一致している必要があります。
  • data（省略可）: includable セクションに渡すデータ式やデータの一部。これは、includable セクションの var 属性の値になります。
  • cond（省略可）結果が true のときにのみインクルードを行う条件式。これは b:if の cond 属性と同じです。

例

b:includable と b:include の使用例を紹介します。

ここでは主に、"main" セクションに "post" セクションをインクルードする方法について説明します。投稿用に b:include セクションを作成して属性を name="post"、data="p" とすると、そこから var ="post" の b:includable セクションを参照してインクルードし、タイトルが表示されます。

このインクルードは、インデックスが 10 未満の場合にのみ動作します。この例では最大 10 件の投稿がレンダリングされます（インデックスは 0 から始まります）。

 

<b:includable id='main'>
  <b:loop var='p' index='index' values='posts'>
    <b:include name='post' data='p' cond='index < 10'/>
  </b:loop>
</b:includable>
<b:includable id='post' var='post'>
  タイトル: <data:post.title/>
</b:includable>

 

データの出力（data:）

例

  • <data:title/> は、ウィジェットのタイトルを表示します。

  • <data:photo.url/> - Size: <data.photo.width /> x <data.photo.height /> は、photo コンポーネントのいくつかの属性を表示します。photo コンポーネントには、url、height、width などの属性があり、表示する属性を "." 記法で指定できます。たとえば写真の URL を表示するには photo.url と指定します。

その他の例

詳しくは、サポートされているレイアウト データタグ一覧をご覧ください。

 

ループ（b:loop）

b:loop の使用法

b:loop タグを使用して、コンテンツのセクションを繰り返し表示することができます。このタグは、投稿、コメント、ラベルをページ上でリスト表示する場合によく使用されます。

フォーマット

ループの一般的なフォーマットは次のとおりです。

 

<b:loop var='identifier' values='set-of-data'>
  [ここに繰り返すコンテンツを記述]
</b:loop>

 

'identifier'（i）の部分には任意の名前を使用できます。'identifier' は、ループを繰り返すたびに新しく生成されるリスト内の各アイテムを指します。'values' で指定するデータセットには、データタグについての記事で説明されている任意のデータをアイテムのリストとして使用できます。

たとえば、ブログの投稿ウィジェットの場合、posts がリストになります。次のコードでは、posts に含まれる各投稿をループして、投稿のタイトルをヘッダータグで囲んで出力します。

 

<b:loop var='i' values='data:posts'>
  <h2><data:i.title/></h2>
</b:loop>

 

各投稿のタイトルを取得するために、"i" を使用して各投稿の値を順に取得している点にご注目ください。

数値の範囲

loop タグでは、繰り返しの回数を ‘1～3'、‘-3～-9' のように数値の範囲で指定することもできます。var で指定した変数には、value の値の範囲に対応する数値が順に代入されます。以下の例では、「1」「2」「3」という順序なしリストが出力されます。

 

<b:loop var='i' values='1 to 3'>
  <li><data:i /></li>
</b:loop>
 

index 属性

loop タグでは index 属性を使用することもできます（省略可）。これにより、0 から始まるインデックスをループの現在の繰り返し部分で利用できるようになります。

 

<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>インデックス: <data:index />、数字: <data:number /></li>
  </b:loop>
</ul>

 

上の例では、以下の順序なしリストが出力されます。

  • インデックス: 0、数字: 9
  • インデックス: 1、数字: 8
  • インデックス: 2、数字: 7
if、elseif、else（b:if）

if、elseif、else の使用法

b:if、b:elseif、b:else タグを使用して、ある条件では特定のコンテンツを表示し、別の条件では異なるコンテンツを表示することができます。たとえば、ホームページ上では特定のテキストを表示し、個別の投稿では別のテキストを表示するような場合に利用できます。

フォーマット

 

<b:if cond='condition'>
  [if 条件が true の場合に表示するコンテンツ]
<b:elseif cond='another condition'/>
  [これまでの if 条件または elseif 条件がすべて true でなく、この elseif 条件が true の場合に表示するコンテンツ]
<b:else/>
  [いずれの if 条件または elseif 条件も満たされていない場合に表示するコンテンツ]
</b:if>

 

b:elseif と b:else タグは必須ではありません。これらのタグを使用しない場合、b:if セクションに記述したコンテンツは、表示、非表示のいずれかになります。ただし、これらのオプションタグを使用するかどうかにかかわらず、</b:if>で閉じる必要があります。

条件部分には、true か false を評価する任意の条件式を挿入することができます。なお、投稿の allowComments のように、評価なしで true や false を返すデータタグもあります。その他のデータを使用する場合は、データを特定の値と比較して true か false を評価します。次の例をご覧ください。

  • <b:if cond='data:post.showBacklinks'>
    現在の投稿がバックリンクを表示するように設定されている場合は true。
  • <b:if cond='data:blog.pageType == "item"'>
    現在のページがアイテムページ（投稿ページ）である場合は true。
  • <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
    現在のページがアイテムページ（投稿ページ）であり、かつ現在の投稿がバックリンクを表示するように設定されている場合は true。
  • <b:if cond='data:displayname != "Fred"'>
    ハンドルネームが Fred でない場合は true。
  • <b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
    ハンドルネームが Fred であるか、現在のページが静的なページである（投稿ページではない）場合は true。
  • <b:if cond='data:post.numComments > 1'>
    現在の投稿に複数のコメントがある場合は true。
  • <b:if cond='data:blog.pageType in {"static_page", "item"}'> または <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
    現在のページが、指定の投稿やページに該当する場合は true。
スイッチ（b:switch）

スイッチの使用法

b:switch タグは、ひとつの b:if tag と複数の b:elseif タグを使用する場合と同じように使用できます。スイッチで条件分岐を行う場合のメリットは、変数名を繰り返し記述する必要がない点です。各 case 定義や既定の case 定義も読みやすくなります。

フォーマット

<b:switch var='[データ式]'>
<b:case value="[値 1]" />
 [値が「値 2」と評価された場合の出力を記述]
<b:case value="[値 2]" />
 [値が「値 2」と評価された場合の出力を記述]
[その他の値の場合を記述]
<b:default />
 [b:case のどの条件にも等しくないと評価された場合の出力を記述]
</b:switch>

例

以下は、レンダリングするページの種類に応じて異なるヘッダーを出力する方法の例です。

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>ページ</h1>
<b:case value="item" />
  <h1>投稿</h1>
<b:default />
  <h2>ブログ投稿</h2>
</b:switch>

属性の条件式（expr:）

条件式の使用法

expr 属性を使用して、データ ディクショナリの値に基づいた属性値を設定できます。

例

  • <a expr:href='data:blog.homepageUrl'>ホーム</a>
    ブログのホームページ アドレスへのホームリンク。
  • <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>RSS を投稿</a>
    ブログポストの RSS フィード URL へのリンク。‘+' 演算子を使用して 2 つの文字列を連結します。
  • <a expr:class='data:post.allowComments ? "comment" : "no-comment">Comment</a>
    コメントが許可されている場合はリンクに "comment" クラスを追加し、許可されていない場合は "no-comment" クラスを追加。三項演算子（?:）に与えられたブール値が true の場合は 1 番目の値（? の後）を使用し、ブール値が false の場合は 2 番目の値（: の後）を使用します。
評価された式（b:eval）

評価された式の使用法

b:eval タグを使用して、標準のデータタグよりも複雑な式を評価することができます。

フォーマット

<b:eval expr='[式]' />

例

  • min-height: <b:eval expr="data:newWidth * data:height / data:width" /> px;
    新しい幅の値を元に算出された相対的な高さを出力します。
  • <b:eval expr="data:post.labels[0].url" />
    最初の投稿ラベルの URL を出力します。
  • <b:eval expr='data:post.allowComments ? "コメント" : "無効なコメント" />
    コメントが許可されている場合には “コメント”、許可されていない場合には “無効なコメント” をそれぞれ出力します。なお、この式では三項演算子を使用しています。
変数のエイリアス（b:with）

変数のエイリアスの使用法

b:with タグを使用して、式から算出された値を保存したり、インライン式を簡潔に記述したりすることができます。

フォーマット

<b:with var='myComputedValue' value='[データ式]' />

例

データ変数を多数使用して属性のスタイルが複雑になった場合、属性の演算を先に行ってから HTML の残りの部分を出力することで、ネストした HTML が読みやすくなります。

<b:with var='style'
       value='"background-image: url(\"" + data:sourceUrl "\"); "
           + " width: " + data:width + "px; " '>
 <div id='header-outer'>   
   <div id='header-inner' expr:style='data:style'>
     <h1>見出し</h1>
   </div>
 </div>
</b:with>

ただし、この変数が存在できるのは b:with タグの子ノードのみです。

例を見る

以下の例をクリックして、ブログの PageList ウィジェットの HTML でタグがどのように使用されているかを確認できます。

例

以下のウィジェットでは、b:widget、b:includable（b:include）、b:if（b:else）、b:loop タグを例として使用しています。

 

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:mobile'>
        <select expr:id='data:widget.instanceId + "_select"'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option> 
          </b:if>
        </b:loop>
        </select>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      <b:else/>
        <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          <b:else/>
            <li>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          </b:if>
        </b:loop>
        </ul>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

 

さらにサポートが必要な場合

次の手順をお試しください。

ヘルプ コミュニティに投稿する コミュニティ メンバーから回答を得る
true
検索
検索をクリア
検索を終了
Google アプリ
メインメニュー