最近JetThemeを使用しているブログが多くなり、ラベル表示がカテゴリーとハッシュタグ（#）に分けて表示されているのをよく目にするようになりました。

ブログを書いているとラベルの表示を分けたいなぁと思う場面がちょくちょくあるので、これはとても魅力的な仕様。JetThemeを使っていない当ブログでも同じことができないかと思って調べていたところ、ちょうど良い方法が見つかったのでご紹介します。

ラベルの表示分けに関して

ブログを書いていると、ラベルを並列ではなく「カテゴリー」と「キーワード」という風に分けたいと思う場面ってちょくちょくありますよね。…が、Bloggerでは本来ラベルの表示を分けることができません。

そこでラベルの表示分けについて調べていた際、こちらの記事を発見しました。

【Blogger】ラベルをカテゴリーラベルと#タグ風に分けてみた

仕事や趣味から得た技術の軽い知識を誰の為でも無く記録していきます。

phoodev.blogspot.com

これはまさに私が求めていた内容。ありがたや…

本記事ではこちらの記事の内容をもとに、カスタマイズの詳しい方法やコードの中身について解説していきます。

ラベルの表示分けができると記事の情報を把握しやすくなるのに加えて、「カテゴリー」と「タグ」という形で別々のものとしてまとめて管理しやすくなるというメリットがあります。以下は当ブログの画像ですが、以前に比べてカテゴリーやタグが一目で確認しやすくなりました。

記事下部のラベル表示

フッター部分のラベル表示

それでは早速、カスタマイズについて見ていきましょう。

カスタマイズ方法

※HTMLを編集するので、バックアップを取っておいてください。

投稿内の場合

管理画面から「テーマ」→「HTMLを編集」でHTML編集画面を開き、投稿ウィジェット（投稿本体部分）を表すid='Blog1'という部分を探します。

<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>
  ...
</b:widget>

投稿ウィジェット内ではどこでもラベルデータを呼び出すことができるので、記事の上部や下部など好きな位置にラベル表示を設置することができます。

ここでは、例として記事の下部に設置してみます。

記事のヘッダー部分からフッター部分までが格納されている以下の部分を探します。

<b:includable id='post' var='post'>
  ...
  <div class='post-footer'>
    ...
  </div>
</b:includable> 

上記コードの<div class='post-footer'>というのが記事下部のフッターを表す要素です。この部分の直前に以下のHTMLコードを設置してください。

HTML

<div class='label-info'>
  <b:loop values='data:post.labels where(l => l.name not contains "#")' var='label'>
    <a class='category' expr:href='data:label.url' rel='tag'><data:label.name/></a>
  </b:loop>
  <b:loop values='data:post.labels where(l => l.name contains "#")' var='label'>
    <a class='hashtag' expr:href='data:label.url' rel='tag'><data:label.name/></a>
  </b:loop>
</div>

上記コードを設置すると、左側にまとめてカテゴリー、右側にまとめてハッシュタグ（#）が表示されます。装飾用のCSSコードは以下を参考にしてください。

CSS

.label-info {
  font-size: 14px;
  margin: 2em 0 1em;
}
.category {
  display: inline-block;
  color: #444 !important;
  padding: 2px 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-right: 5px;
}
.category:hover {
  text-decoration: none;
}
.hashtag {
  display: inline-block;
  font-size: 12px;
  color: #333 !important;
  background: #f3f7f9;
  padding: 4px 8px;
  border-radius: 3em;
  white-space: nowrap;
}
.hashtag:hover {
  text-decoration: none;
}

実際にSimpleテーマで設置してみると、こんな感じになります。

記事のフッター前にカテゴリーとハッシュタグが表示されました(^^)b

フッター部分にもラベルが表示されていますが、気になる場合は「レイアウト」→「ブログの投稿」ガジェットでラベル表示をオフにできます。

フッターの場合

ブログのフッターに設置する場合、そのままではラベルデータを呼び出せないので、ラベルガジェットを利用した形にする必要があります。ただし、ラベルガジェットは本来スクリプトを編集できないので、カテゴリー＆ハッシュタグ表示専用のガジェットを作成しました。

カスタマイズに詳しい方は適宜調整を加えて頂きたいですが、「よくわからないけどとりあえず置いてみたい」という方は以下のHTMLコードを</footer>直前に設置してください。

HTML

<b:section id='footer-contents'>
  <b:widget id='Label1' locked='false' title='カテゴリー' type='Label' version='1'>
    <b:widget-settings>
      <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
      <b:widget-setting name='display'>LIST</b:widget-setting>
      <b:widget-setting name='selectedLabelsList'/>
      <b:widget-setting name='showType'>ALL</b:widget-setting>
      <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
      <h3><data:title/></h3>
      <div class='widget-content'>
        <ul class='cat-list'>
          <b:loop values='data:labels where(l => l.name not contains "#")' var='label'>
            <li>
              <a class='cat-item' expr:dir='data:blog.languageDirection' expr:href='data:label.url params {max-results: "10"}'>
                <span class='cat-name'><data:label.name/></span><span class='cat-count'>[<data:label.count/>]</span>
              </a>
            </li>
          </b:loop>
        </ul>
      </div>
    </b:includable>
  </b:widget>
  <b:widget id='Label2' locked='false' title='タグ' type='Label' version='1'>
    <b:widget-settings>
      <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
      <b:widget-setting name='display'>LIST</b:widget-setting>
      <b:widget-setting name='selectedLabelsList'/>
      <b:widget-setting name='showType'>ALL</b:widget-setting>
      <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
      <h3><data:title/></h3>
      <div class='widget-content'>
        <ul class='tag-list'>
          <b:loop values='data:labels where(l => l.name contains "#")' var='label'>
            <li>
              <a class='tag-item' expr:dir='data:blog.languageDirection' expr:href='data:label.url params {max-results: "10"}'>
                <span class='tag-name'><data:label.name/></span>
              </a>
            </li>
          </b:loop>
        </ul>
      </div>
    </b:includable>
  </b:widget>
</b:section>

※IDに関してエラーが出る場合は、Label1, Label2の部分をそれぞれLabel3, Label4など数字を変更してみてください。

ガジェットを設置してテーマを保存すると、当ブログのようにカテゴリーとハッシュタグの一覧がフッター部分に表示されるはずです。

CSSについては以下を参考にしてください。

CSS

.cat-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cat-item {
  display: inline-block;
  font-size: 14px;
  color: #444 !important;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin: 0 1em 1em 0;
  white-space: nowrap;
  text-decoration: none;
  transition: .3s;
}

.cat-item:hover {
  border-color: #888;
  text-decoration: none;
}

.cat-count {
  font-size: .7rem;
  line-height: 1rem;
  margin-left: .25rem;
}

.tag-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tag-item {
  display: inline-block;
  font-size: 14px;
  color: #333 !important;
  background: #f3f7f9;
  padding: 4px 8px;
  border-radius: 3em;
  margin: 0 1em 1em 0;
  white-space: nowrap;
  text-decoration: none;
}

.tag-item:hover {
  text-decoration: none;
}

コードの解説

今回のカスタマイズの肝となっているのが、投稿内の場合で先ほど挙げた以下のコードです。

<div class='label-info'>
  <b:loop values='data:post.labels where(l => l.name not contains "#")' var='label'>
    <a class='category' expr:href='data:label.url' rel='tag'><data:label.name/></a>
  </b:loop>
  <b:loop values='data:post.labels where(l => l.name contains "#")' var='label'>
    <a class='hashtag' expr:href='data:label.url' rel='tag'><data:label.name/></a>
  </b:loop>
</div>

カテゴリーの場合、b:loopでラベルデータの集合data:post.labelsについてループを回し、「#」を含んでいないラベルのみを<a>タグで囲んで出力する…という処理を行っています。

where(l => l.name not contains "#")

の部分がラムダ式と呼ばれる記法で、『あるラベル（l）のうち、ラベルの名前（l.name）に「#」を含んでいない（not contains "#"）もの』を表す条件式です。

このラムダ式のおかげで、ラベルが「#」を含んでいるかどうかでカテゴリーとハッシュタグに強制的に分けることができています。ハッシュタグのほうも全く同様で、カテゴリーと逆に「#」を含んでいるもののみを<a>タグで囲んで出力します。

カスタマイズに関する補足

例として挙げたカスタマイズにはフォルダーアイコン が付いていませんが、当ブログのようにカテゴリーにフォルダーアイコンを付けたいという場合、SVGタグ等を使うことで実現できます。

SVGタグの詳しい使用方法等については、こちらの記事をご覧ください↓

Web制作で大活躍：SVGの特徴と使い方まとめ | IB-Note

Web制作でとっても重宝するSVGという画像形式について、詳しい特徴と使い方をまとめました。

itblogger-note.blogspot.com

注意点など

ラベルに「#」が含まれている場合、通常のQooQテンプレートなどでは関連記事がエラーで表示されなくなるのでご注意ください。

当ブログでは、この問題を解決した改良版の関連記事ウィジェットを公開しています。詳しくはこちらの記事をチェックしてください↓

【Blogger】関連記事表示のお手軽プラグイン（改良版） | IB-Note

Blogger用の関連記事表示を改良したので、詳細と導入方法についてご紹介します。

itblogger-note.blogspot.com