Step

【2023年】これからブログを始める人へおすすめの書籍

Kissy

【第３回】これでわかった！Bloggerの制御タグ・データタグまとめ

作成: 更新:

Bloggerの制御タグ・データタグ

第３回ではBloggerの制御タグ・データタグをまとめています。

分かってくると面白い仕組みなので、ぜひ使ってみてください。

制御構文

data:

ブログのコンテンツを出力する構文で、data:に続いて参照したいデータを記載すると、そのデータを出力できます。

<data:title/>

この例では、ブログのタイトルを出力しています。

参照できるデータは、グローバルに参照できるデータと、ガジェット毎に参照できるデータがあります。参照できるデータについては、Googleのヘルプにまとまっていますので、そちらを参照ください。（記事の最後にリンクをまとめています）

b:if～b:elseif～b:else～

条件によって表示を切り替える際に使用します。

<b:if cond='data:blog.pageType == "item"'>
  <!-- 表示するページの種類が「投稿」の場合 -->
<b:elseif cond='data:blog.pageType == "static_page"'/>
  <!-- 表示するページの種類が「ページ」の場合 -->
</b:if>

この例では、表示するページが「投稿」の場合と、「ページ」の場合で処理を切り替える例です。プログラムのif文と同じですね。

複数の条件を書く場合には、orやandが使用できます。

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
  <!-- 表示するページの種類が「投稿」または「ページ」の場合 -->
</b:if>

<b:if cond='data:displayname != "Kissy" and data:blog.pageType == "static_page"'>
  <!-- ハンドル名が"Kissy"でなく、かつ、表示するページの種類が「ページ」の場合
</b:if>

また、指定した集合に値が含まれるかどうか、というような指定もできます。

<b:if cond='data:blog.pageType in {"static_page", "item"}'>
  <!-- 表示するページが「ページ」または「投稿」の場合 -->
</b:if>

<b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  <!-- 表示するページが「ページ」または「投稿」の場合 -->
</b:if>
  • cond属性
    • 条件式を書く。条件式には以下が使用可能。
      • A == B
      • A != B
      • A ? B : C
      • A or B
      • A and B
      • A in {B1, B2, B3}
      • {A1, A2, A3} contains B

b:switch～b:case～b:default～

b:ifと同様に、条件によって表示を切り替える際に使用します。こちらもプログラムのswitch文と同じです。

<b:switch var='data:blog.pageType'>
  <b:case value="item"/>
    <!-- 表示するページの種類が「投稿」の場合 -->
  <b:case value="static_page"/>
    <!-- 表示するページの種類が「ページ」の場合 -->
  <b:default/>
    <!-- 表示するページの種類が「投稿」でなく、「ページ」でもない場合 -->
</b:switch>

b:loop～

あるデータの集合に対して、繰り返し処理を行う場合に使用します。プログラムでいう、forやforeach文ですね。

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

この例では、すべての「投稿」を先頭から順番に、インデックスとタイトルを出力しています。

また、任意の回数だけ実行したい場合は、数値の範囲を指定して繰り返し処理を行うこともできます。

<b:loop var='i' values='1 to 10'>
  <li><data:i></li>
</b:loop>
  • values属性
    • 繰り返し処理を行うデータの集合を指定する。
    • `data:'のデータの集合も指定可能。
    • '1 to 10’のような整数の集合も指定可能。
  • var属性
    • values属性でしていたデータから順次取り出し、var属性で指定した変数にデータが格納される。
    • データを参照する場合は、<data:var属性値>で参照できる。
  • index属性
    • インデックスを格納する変数名を指定する。
    • インデックスを参照する場合は、<data:index属性値>で参照できる。
    • インデックスは0から開始され、繰り返しが実行される毎に1加算される。

expr:～属性

expr属性を使用すると、式で計算した値を属性値として指定できるようになります。言葉ではわかりづらいので、例を見てもらうとわかりやすいです。

<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>RSS を投稿</a>

この例では、ブログのホームページURLに"feeds/posts/default"を連結した文字列をhref属性値として指定しています。

b:eval～

<b:eval>を使うと、式で計算した値を出力できます。こちらも言葉より、例を見たほうがわかりやすいです。

length: <b:eval expr="data:mm / 25.4" /> inch;

この例では、mmをinchに変換して出力しています。expr属性は属性値に値を入れる場合に使用しますが、<b:eval>は出力する場合に使います。

b:with～

<b:with>を使うと、変数に別名（エイリアス）をつけることができます。計算式が長い場合などに使うと、ソースが見やすくなります。

<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>

べんりな関数

Googleのヘルプでちゃんとしたリファレンスが見つけられていませんが、非常に便利な関数があります。

これらの関数はとても便利なので、ぜひ使いましょう。

snippet()

snippet(元となるデータ, {length: 整数値, links: ブール値, linebreaks: ブール値, ellipsis: ブール値})

要約（スニペット）を作る関数です。本文の先頭の○○文字を取り出して、スニペットを作ります。

  • length
    • 切り出す文字数を指定する。
  • links
    • リンクを有効にするかをブール値（true/false）で指定する。
  • linebreaks
    • 改行を有効にするかをブール値（true/false）で指定する。
  • ellipsis
    • 中略記号（…）を表示するかをブール値（true/false）で指定する。

＜例＞

<b:eval expr='snippet(data:post.body, {length:60, links:false, linebreaks:false, ellipsis:true}'/>

resizeImage()

resizeImage(イメージURL, 新しい画像の幅, 画像のアスペクト比)

画像をリサイズする関数です。

＜例＞

<!-- 幅300pxの画像にリサイズ -->
<img expr:src='resizeImage(data:post.firstImageUrl, 300)'/>

<!-- 幅600px、縦横比1:1の画像にリサイズ -->
<img expr:src='resizeImage(data:post.firstImageUrl, 600, &quot;1:1&quot;)'/>

<!-- 幅900px、縦横比4:3の画像にリサイズ -->
<img expr:src='resizeImage(data:post.firstImageUrl, 900, &quot;4:3&quot;)'/>

sourceSet()

sourceSet(イメージURL, [スマホ向けの新しい画像の幅,タブレット向けの新しい画像の幅,PC向けの新しい画像の幅], 画像のアスペクト比)

表示するデバイス（スマホ、タブレット、PC）の画面サイズに合わせて、画像をリサイズする関数です。

＜例＞

<!-- スマホは128px、タブレットは256px、PCは512pxにリサイズ -->
<img expr:src=’data:post.firstImageUrl’ expr:srcset=’sourceSet(data:post.firstImageUrl, [128, 256, 512])’ />

ガジェットの種類

主なガジェットの種類です。

  • Header
  • Blog
  • Label
  • PopularPost
  • FeaturedPost
  • BlogArchive
  • BlogSearch
  • PageList
  • LinkList
  • HTML
  • Poll
  • Profile
  • Attribution

参考サイト

Bloggerのヘルプもとても参考になります。合わせて読むとよいですね。

レイアウト用ページ要素タグについて - Blogger ヘルプ

レイアウト用のウィジェットタグ - Blogger ヘルプ

レイアウト用のデータタグ - Blogger ヘルプ

最後まで読んでいただき、ありがとうございます。
また読んでくださいませ。

そんじゃーね。

関連記事

SPONSORED LINK
SPONSORED LINK