【Blogger】特定ラベルの記事にのみ、特定のコンテンツを表示する（独自タグ利用）

ブログを書いていると、「特定ラベルの記事にだけ、これを表示したい」という場合があります。

たとえば、特定ラベルの記事の上部・下部にだけ、

など。

このような場合は Blogger の独自タグを使ってテンプレートに特定コンテンツを記述すると便利です。

たとえば当ブログではF1のレースごとに観戦記を書いており、「F1」ラベルの記事にのみ、記事下部に「観戦記一覧」のボックスを表示しています。

この一覧を各記事に個別で入れようと思うと、観戦記を書くたびに過去記事すべてを修正しないといけないので超面倒です。

でも独自タグを使えば、テンプレートを修正するだけで過去記事すべての一覧を更新できます。記事を個別に修正する必要がないのですごく便利。

シリーズものの記事を書いている方や、関連記事ウィジェットだけでは足りないなと感じている方は、よければ参考にしてください。

目次

特定ラベルの記事にのみコンテンツを表示する独自タグ

独自タグは、以下サイトで解説されているものを使わせていただいています。

Bloggerにて特定のラベルの記事のみにコンテンツを表示させる方法 | 日々のメモ帖 by holidaybuggy1980

以下のようにテンプレートに記述し、ラベル名とコンテンツをカスタマイズします。

<b:if cond='data:post.labels any (l => l.name == "ラベル名")'>
ここにコンテンツをHTMLで入力
</b:if>

冒頭のF1観戦記の場合、コンテンツを含めて次のようなイメージで入力します。

<b:if cond='data:post.labels any (l => l.name == "F1")'>
<!--ここから特定コンテンツ-->
 <div>
  <p>2022年のF1レース観戦記</p>
   <ul>
    <li><a href='https://www.limosuki.com/...'>第１戦バーレーンGP</a></li>
    <li><a href='https://www.limosuki.com/...'>第２戦サウジアラビアGP</a></li>
    <li><a href='https://www.limosuki.com/...'>第３戦オーストラリアGP</a></li>
  </ul>
 </div>
<!--ここまで-->
</b:if>

特定コンテンツは上記のようなリストに限らず、HTML 形式であればどんなものでも OK なので自由度も高いです。

画像ならイメージタグを入力、広告なら広告の HTML コードを入力します。

テンプレートのどの部分に記述すれば良いかは以下を参照ください。

独自タグを記述する位置

記事の上部・下部に特定コンテンツを表示する場合のテンプレート記述位置を紹介します。

JetTheme の場合

記事の上部に表示

テンプレートで<div class='entry-text text-break mb-5' id='post-body'>を検索し、以下の部分に記述。

<div class='entry-text text-break mb-5' id='post-body'>
<b:if cond='data:post.labels any (l => l.name == "ラベル名")'>
ここにコンテンツを入力
</b:if>
<data:post.body/>

記事の下部に表示

テンプレートで<div class='entry-text text-break mb-5' id='post-body'>を検索し、以下の部分に記述。

<div class='entry-text text-break mb-5' id='post-body'>
<data:post.body/>
<b:if cond='data:post.labels any (l => l.name == "ラベル名")'>
ここにコンテンツを入力
</b:if>

QooQ の場合

記事の上部に表示

テンプレートで<div class='post-body' id='single-content'>を検索し、以下の部分に記述。

<div id='ad-1'>
<!-- アドセンス広告1.start -->

<!-- アドセンス広告1.end -->
</div>
<b:if cond='data:post.labels any (l => l.name == "ラベル名")'>
ここにコンテンツを入力
</b:if>
<div class='post-body' id='single-content'>
<data:post.body/>

デフォルトでは記事上にアドセンス広告の枠が用意されているので、アドセンスの上にするか下にするかは適宜調整ください。

記事の下部に表示

テンプレートで<div class='post-body' id='single-content'>を検索し、以下の部分に記述。

<div class='post-body' id='single-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:post.labels any (l => l.name == "ラベル名")'>
ここにコンテンツを入力
</b:if>
<div id='ad-2'>
<!-- アドセンス広告2.start -->

<!-- アドセンス広告2.end -->
</div>

記事下にもアドセンス枠があるので、アドセンスとコンテンツの位置は適宜調整ください。

その他のテンプレートの場合

JetTheme・QooQ 以外のテンプレートの場合は、テンプレートの中で<data:post.body/>というタグを探してみてください。

上記が Blogger で記事本文を出力するタグなので、このタグの上か下に独自タグを設置すれば表示できると思います。

不明な場合は、お問い合わせいただければわかる範囲で確認します。

特定ラベルの記事にのみ、コンテンツを表示させたくない場合

特定ラベルの記事にのみコンテンツを表示させたくない場合は、次の独自タグを使います。

<b:if cond='data:post.labels any (l => l.name != "ラベル名")'>
ここにコンテンツを入力
</b:if>

この場合、特定ラベル以外の全記事にコンテンツが表示されます。