Blogger：記事の下部のラベルへラベルの件数を付与するようにしたかったが失敗した(テンプレートのHTML編集編)

イントロダクション

Bloggerの全ラベル表示機能では、ラベル名の後にそのラベルが付与された記事が何件あるのかを表示してくれます。

Bloggerの全ラベル表示機能

その件数表示機能を記事の下部に表示される、その記事に付与したラベルの一覧表示部にも適用したいと思い、Blogger をカスタマイズしてみました。

カスタマイズ

残念ながら記事に付与したラベルの一覧表示部に、そのラベルが付与された記事の件数を表示させることは、レイアウトの編集からは行えません。

そのため、テンプレートの HTML を編集することで実現します。

(1) 全ラベル表示機能の要素を Chrome の要素を検証機能を使用して特定する

全ラベル表示機能の要素に対して、Chrome ブラウザが持つ機能である「要素を検証」を検証対象を選択した後、右クリックより実行します。

全ラベル表示機能の要素に対して「要素を検証」を実行

すると、この要素の id が "Label1" であることがわかります。

(2) 全ラベル表示機能の要素をテンプレートの HTML の中から特定する

Blogger のテンプレート → HTML を編集より、(1) で見つけた 全ラベル表示機能の要素の id "Label1" をテンプレートの HTML より探し出します。

その結果、全ラベル表示機能のソースコードが次のようになっていることがわかりました。

  <b:widget id='Label1' locked='false' title='ラベル' type='Label'>
    <b:includable id='main'>
        <b:if cond='data:title'>
          <h2>
            <data:title/>
          </h2>
        </b:if>
        <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
          <b:if cond='data:display == &quot;list&quot;'>
            <ul>
              <b:loop values='data:labels' var='label'>
                <li>
                  <b:if cond='data:blog.url == data:label.url'>
                    <span expr:dir='data:blog.languageDirection'>
                      <data:label.name/>
                    </span>
                    <b:else/>
                    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
                      <data:label.name/>
                    </a>
                  </b:if>
                  <b:if cond='data:showFreqNumbers'>
                    <span dir='ltr'>
                      (
                      <data:label.count/>
                      )
                    </span>
                  </b:if>
                </li>
              </b:loop>

以下省略

(3) 特定のラベルが付与された記事の件数表示機能のソースコードをコピーする

(2) で特定した全ラベル表示機能のソースコードより、特定のラベルが付与された記事の件数表示は以下の部分で行われていることがわかりました。

                    <span dir='ltr'>
                      (
                      <data:label.count/>
                      )
                    </span>

この部分をコピーします。

(4) 特定のラベルが付与された記事の件数表示機能のソースコードを、記事の下部のラベル一覧表示部へ張り付ける

記事の下部のラベル表示部は、記事「Blogger：記事のラベルを記事の下部だけではなく上部にも表示できるようにした」より class 名が "post-labels"となっていることが分かっているので、その部分をテンプレートの HTML より探し出します。

<span class='post-labels'>
<b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'>
        <data:label.name/>
    </a>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
        ,
    </b:if>
    </b:loop>
</b:if>
</span>

その部分に対して、(3) でコピーした特定のラベルが付与された記事の件数表示のソースコードを挿入します。

<span class='post-labels'>
<b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'>
        <data:label.name/>
    </a>
<!-- ラベルの件数表示追加　ここから -->
    <span dir='ltr'>
        (
        <data:label.count/>
        )
    </span>
<!-- ラベルの件数表示追加　ここまで -->
<b:if cond='data:label.isLast != &quot;true&quot;'>
,
    </b:if>
    </b:loop>
</b:if>
</span>

これで特定のラベルが付与された記事の件数表示ができるようになったかな？と思いテンプレートをプレビューしてみると、以下のように件数が表示されませんでした。

いろいろと試しましたが、以下の理由によりできないと結論付けました。

• data:post.labelsには、特定のラベルが付与された件数である count が無い(*1)
• 「ループを使用して、特定のラベルが付与された件数である count を保持している data:labels を検索し、ラベル名が一致したら件数を取得する」というコードを考えたが、data:labels はラベルウィジェットの中からしかアクセスできないため、投稿の中からはアクセスできない。(*2)
• ウィジット間でデータをやり取りする仕組みがないため、どうしようもできない。

*1, *2

Page Elements Tags for Layouts - Blogger Help
https://support.google.com/blogger/answer/46888

Layouts Data Tags - Blogger Help
https://support.google.com/blogger/answer/47270

Widget Tags for Layouts - Blogger Help
https://support.google.com/blogger/answer/46995

結果

Blogger のテンプレートの HTML を編集して、記事の下部のラベルへラベルの件数を付与するようにすることはできませんでした。

記事の下部のラベルへラベルの件数を付与するようにするには、他の方法(JavaScript)でやらないといけなさそうです。


→ JavaScript で記事の下部のラベルへ件数を付与するプログラムを作成しました。