Bloggerのスマホ表示で記事下にラベル(カテゴリー)を表示させる方法

デフォルトのBloggerのスマホ表示は、とってもシンプルで、カテゴリーとして利用する「ラベル」も表示されません。

しかし、これでは、ユーザーが記事を探しにくく、ブログからすぐに離脱してしまいますので、ラベルを有効的に活用したいものです。

テンプレートのHTML編集を行えば、意外と簡単にBloggerのスマホでも記事下のラベル表示が可能になります。





記事下にラベル(カテゴリー)を表示させるには、HTML編集を行います。


HTML編集で、「post-footer-line post-footer-line-2」を検索します。2カ所見つかるはずで、片方がPC用、もう一方がモバイル用となっています。

そのモバイル用の方に、次のコードを挿入するだけです。

<span class='post-labels'>
        <b:if cond='data:top.showPostLabels and 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='not data:label.isLast'>,</b:if>
          </b:loop>
        </b:if>
      </span>


HTML編集画面は、こんな感じになります。

PC用には、すでにコードが書き込まれているはずなので、それをそのままコピーしてもOKです。

こんなふうに、スマホの記事下にラベルが表示されるようになりました。

ちなみに、モバイルで記事タイトル下にラベルを表示させる方法は、こちらの記事で書いています。

スポンサーリンク