Blogger：記事のラベルを記事の下部だけではなく上部にも表示できるようにした

イントロダクション

Blogger の記事にラベルを付与することで、同じラベルを付与したページを一覧で表示することができます。
それと同時に、その記事がどういったキーワードを基にして書かれているのかを、読者が把握できるようにする役割もあります。

Blogger の記事のラベル

Blogger には上記のように、標準で一つの記事に対して、一つのラベル一覧表示を付与することができます。

せっかくラベルを付与して記事を書いているのですから、"記事がどういったキーワードを基にして書かれているのかを読者が把握できるようにする"役割を更に推進したいと思いました。
そこで、記事の下部だけではなく、記事の上部にもラベルを表示し、記事を読む前に読者が、記事のキーワードを把握できるように Blogger をカスタマイズしました。

Blogger の記事のタイトル行の下にもラベルを表示できるようにする

カスタマイズ作業

Blogger のレイアウトの編集機能では、一つの記事に対して一つのラベル一覧の表示部を設定することしかできません。

従って、一つの記事に対して、2つめのラベル一覧の表示部を付与するには、テンプレートの HTML を編集する必要があります。

(1) ラベル一覧表示部のクラス名をメモ

Chrome の「要素を検証」機能を使用して、ラベル一覧表示部に対応するクラス名を特定します。

ラベル一覧表示部のクラス名

これより、ラベル一覧表示部に対応するクラス名は"post-labels"ということがわかりました。

(2) ラベル一覧表示部のクラス名を元に、テンプレートの HTML におけるラベル一覧表示部のソースコードを特定する

Blogger のテンプレート→HTMLの編集より、テンプレートの HTML を表示させます。
そして、(1) で特定した「ラベル一覧表示部に対応するクラス名」"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) テンプレートの HTML におけるラベル一覧表示部のソースコードをコピーし、記事のヘッダ部に張り付ける

(2) で特定したラベル一覧表示部のソースコードをコピーします。

そして、このラベル一覧表示部を少し上にスクロールさせると記事のヘッダがあるはずなので、記事のヘッダを見つけます。
すると、post-headerというクラス名を持つ <div>タグを発見しました。

<div class='post-header'>
<div class='post-header-line-1'/>

</div>

ここに、(2) で特定したラベル一覧表示部のソースコードを貼り付けます。

<div class='post-header'>
<div class='post-header-line-1'/>
<!-- 投稿の上部にもラベルを表示 ここから -->
<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>
<!-- 投稿の上部にもラベルを表示 ここまで -->
</div>

※ テンプレートの HTML を編集することは、非常に危険です。編集を間違えてテンプレートを破壊してしまった時のために、テンプレートの HTML をバックアップしてから作業を行うことを推奨します。


これでテンプレートを保存します。
これにて、記事の上部へのラベル一覧表示部の追加は完了です。

結果

以上のようにページの上部にもラベル一覧を表示できるようになりました。

記事の上部へ追加されたBlogger の記事のラベル

もちろん、ページの下部にもラベル一覧は表示されたままです。

これで、読者が記事を発見した時に、その記事がどんなキーワードをもとに書かれているのか容易に把握することができるようになりました!