ホーム / Bloggerカスタマイズ /

Bloggerで記事のラベル（タグ）ごとに表示をカスタマイズする

2025年1月12日日曜日

Amazonアソシエイト Blogger Bloggerカスタマイズ

t f B! P L

このブログは、Googleのブログサービス、Bloggerを使っています。Bloggerは、テンプレートの書式がHTMLに独自のXMLを混ぜて記載するという独特なもので、情報が少ないです。長らく更新もされておらずいつ無くなってもおかしくないサービスと言われたりしていて、なかなか勉強してガリガリカスタマイズする気になれず、QooQというテンプレートをほぼそのまま持ってきて使っていました。

GoogleマップAPIを使った記事を書きたい、Amazonアソシエイトの商品紹介でAPIを使いたいといった場合には、これまで記事内に直接scriptタグを書いてJavaScriptを使っていました。しかし、記事数も多くなってきて毎回同じようなJavaScriptをコピペするのも面倒だし、スクリプトを少し変更したい場合は全記事手作業で行う必要があるなど、なんとかならないかと思いました。

毎回見ては挫折しているテンプレートを眺め、記事のラベルを見てHTMLタグを挿入する方法を思いつき、やってみました。

テンプレートの構造

Bloggerのヘルプ にあっさりとした記載がありますが、sectionの下にwidgetがあり、widgetの中でBlogger内部データを参照できます。参照できるデータはwidgetごとに決まっていて、Blogウィジェットの中で記事のラベルが参照できます。

まあ細かいことを省くと下記のようになります。QooQの場合ですが、他のテンプレートでも同じような構造だと思います。 

<body>
  ...
  <b:widget id="Blog1" ...>
    <b:includable id="main" var="top">
      ...
      <b:if cond='data:blog.pageType in {"item" , "static_page"}'>
        <!-- ブログ記事またはページ -->
        <b:loop values="data:posts" var="post">
          ...
          <b:loop values="data:post.labels" var="label">
            <b:if cond='data:label.name == "Amazonアソシエイト"'>
              <template>商品紹介テンプレートHTML</template>
              <script>
                商品情報をfetchするスクリプト;
              </script>
            </b:if>
          </b:loop>
        </b:loop>
        <b:else />
        <!-- 一覧表示の場合 -->
      </b:if>
    </b:includable>
  </b:widget>
</body>

説明

Blogウィジェット 

<b:includable id="main" var="top">

body内のBlog1ウィジェットの、上記部分が記事の表示に関することを決める部分です。

ページの種類 

<b:if cond='data:blog.pageType in {"item" , "static_page"}'>

data:blog.pageTypeは現在表示中のページの種類です。ブログの投稿単体(item)または、ページ(static_page)の場合の記述です。このほかにarchiveやindexがあります。

ラベルの取得 

<b:loop values="data:posts" var="post">

data:postsで現在のページの記事が取得できます。基本的にpageTypeがitemまたはstatic_pageの場合、記事は1つですが、トップページやアーカイブでは複数記事が表示されるため、各記事を変数postに格納しループします。 

<b:loop values="data:post.labels" var="label">

data:post.labelsでループ中の記事postのラベルが取得できます。ラベルは複数設定できるため、ここもループでlabel変数に1つ1つラベルを格納し回します。

ラベルと文字列を比較し、一致した場合にHTML要素を挿入 

<b:if cond='data:label.name == "Amazonアソシエイト"'>

b:if、b:else構文で条件分岐ができます。data:label.nameでラベル名の文字列を取り出し、"Amazonアソシエイト"の文字列と一致したら商品紹介用のテンプレートと商品情報を取得するJavaScriptを挿入します。

ちなみに、このテンプレート、スクリプトは アマゾンPA-API FaaSを使いリアルタイムで商品情報を取得 に詳しく記載しています。

使用例

この記事には"Amazonアソシエイト"ラベルを付けているので、下の商品紹介カードが表示されているはずです。

他には、これまでブログ村のバナーを記事によって自転車カテゴリのバナーやキャンプカテゴリのバナーを手作業でコピペしていましたがこれを応用すればラベルごとにバナーを変えることもできそうです。

まとめ

Bloggerで記事のラベルによってHTML要素を挿入しスクリプトを入れたり表示をカスタマイズすることができました。

WordpressとかNext、Vueなどで構築したブログではあたりまえにできることかも知れませんが、情報の少ないBloggerでもなんとかこういったやり方に辿り着いた次第ですが、もっといい方法などあればコメント欄などで教えてもらえたらと思います。まあ、サーバーサイドで処理させるよりもJavaScriptでクライアント側で同じようなことはできると思うので、あえて他に応用が効かないBloggerのテンプレートを覚えていじくり回すメリットがどれだけあるかとも思いますが。

関連記事

QooQ