Bloggerでラベルを表示するコードの使い方と解説

Orange ZELOでラベルを表示する方法はこちらの記事をご覧ください。

>>TOPの記事にラベルを表示する方法【Orange ZELO】

こちらが、Bloggerでラベルを表示するコードです。

これはBloggerの公式テーマ『Empolio』で実際に使われているコードです。

何をしているのか簡単に説明すると、ラベルのデータを取ってきて<span>タグ、<a>タグと一緒に出力しています。

コードの解説

まず、一番初めの『b:loop』ですが、これは名前の通り繰り返し処理を行う時に使うタグです。

ここでは、ラベルからデータを取ってきて出力するという処理を終わりまで繰り返すために使われています。

『index="i"』とすることで(0 ~ 最後)までの回数を指定し、『values='data:post.labels'』でラベルのデータを指定しています。

『var = 'label'』の部分は『変数』というもので、loopの結果はここに代入されるようになっています。

<span>タグの部分はラベルを囲うためのタグなので、<div>タグなどに変えても大丈夫です。

<a>タグもラベルを囲うためのタグで、『expr:href='data:label.url'』とすることで、各ラベルのリンク先を設定しています。

上記のコードを使うと、ラベル一覧へのリンク付きのラベルが生成します。

では、リンクなしのラベルを生成したい場合はどうすれば良いのでしょうか。

もう一度、ラベルを表示するためのコードをみてみましょう。

<b:loop index='i' values='data:post.labels' var='label'>
<span class='overflowable-item'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</span>
</b:loop>

loop処理内に<a>タグがあることがわかります。

先ほど説明した通り、loop処理内の<a>タグによってリンク先を設定しています。

なので、リンク先を設定しない場合は<loop>の部分から<a>タグを取り除けばOKです。

つまり、ラベルにリンク先を設定しない場合は次のようなコードになります。

<b:loop index='i' values='data:post.labels' var='label'>
<span class='overflowable-item'>
<data:label.name/>
</span>
</b:loop>

Bloggerでラベルを表示するコードの解説でした。

比較的わかりやすい例で説明してみましたが、Bloggerではこのような処理が行われています。

今回は少しマニアックな内容でしたが、参考になれば幸いです。

ページウィジットにラベルのリンクを設定し、ナビバーのように見せる方法はこちらをご覧ください。

>>Bloggerページウィジットにラベルのリンクを設定する方法