ラベルをスマートに整理してみた

2024/10/158
カテゴリとハッシュタグ

今まで適当に分類して付けていたラベルを、もう少し分かりやすく使い勝手が良くなるように整理してみました。

CONTENTS

大分類のカテゴリと小分類のハッシュタグ

これまで複数のラベル(カテゴリ)を付けていた記事は一つのカテゴリだけにして、代わりにハッシュタグ(#付きのラベル)を複数付与。

WordPress とか JetTheme のマネです(笑) が、今回は JetTheme の中身は参考にせず、自力で改造しています。

旧ブログでも

実は4年ほど前にも旧ブログで、増えすぎたラベルを整理すべく工夫していました。カテゴリと各ジャンルのタグに分類して4つのラベルウィジェットに振り分けています。

旧ブログ (Wayback Machine)

この時はウィジェットごとに手動でカテゴリとその他の小分類タグに振り分けていましたが、今回は分岐タグを使って自動で振り分けさせるという技を使っています。4年経って高度?な技も使えるようになりました(笑)

前回はスッキリした見た目に拘ってプルダウン化してましたが、今回は実用的な観点から、わざわざ開かなくても一目で全ラベルが把握できる方がいいかなと、プルダウン化はしませんでした。今後更にハッシュタグが増えて溢れるようならまた検討します。

分岐タグでラベルを振り分け

ラベル名をフィルタリングする分岐タグを活用しました。

参考: Filtrer les libellés dans les articles (記事のラベルをフィルタリングする) - Blogger Code PE

例えば、ラベル名に「#」が含まれている場合に表示させるタグはこんな感じ。
※分岐タグは b:loop タグの内側に置かないと正しく動作しません。

<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name contains "#"'>
ラベルコンテンツ
</b:if>
</b:loop>

逆に「#」を除外する場合は not contains にします。

<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name not contains "#"'>
ラベルコンテンツ
</b:if>
</b:loop>

「ラベルコンテンツ」の部分にラベルウィジェットのコードやラベルを表示させるHTMLタグを配置します。

今回は詳細なカスタマイズの解説はしませんけど、もしご質問がある場合はコメントでどうぞ。

当ブログでの実例

トップページの記事リストは、特にスマホでは表示範囲が限られているという理由もあり、カテゴリのみ表示させるようにしました。

記事リストラベル

ラベルウィジェットや記事ページでは「#」の有無によってそれぞれ別のデザインになるようにしています。

カテゴリ #ハッシュタグ

各記事ページではカテゴリとハッシュタグをこんなレイアウトで。ちなみにハッシュタグの横のタグアイコンに関して、ハッシュタググループの横に1個だけ表示させつつ、ハッシュタグが無いときに非表示にするやり方で地味に悩みました(笑) (→結局 CSS で解決)

記事ページラベル

関連記事に関して

QooQ の関連記事ウィジェットは、ラベル名に「#」など、一部の特殊記号が含まれていると内部処理エラーで表示されなくなってしまう仕様になっています。でも当ブログの関連記事は問題なく表示されてますよね。

実は当ブログの関連記事は、先日 IB-Note 製のものに入れ替えたのですが、こちらのウィジェットはこの不具合が改善された仕様になっているのです。ちなみにこのウィジェットでも先述のラベルをフィルタリングする分岐タグが使われています。

今回のカスタマイズに踏み切れたのも IB-Note さんのお陰です。ありがとうございますm(_ _)m

2022/07/21 追記: おすすめ解説記事の紹介

当ブログよりも早く「カテゴリ・#タグ」分類カスタマイズを導入されていた IB-Note さんが、詳細な解説記事を書かれましたのでご参考にどうぞ。

ファビコンIB-Note
サムネイル
【Blogger】ラベル表示をカテゴリーとハッシュタグに分ける方法 | IB-Note
JetThemeのブログでよく見かけるあの仕様を通常テーマで再現する方法について、詳しくご紹介します。
https://itblogger-note.blogspot.com/2022/05/blogger-label-category-and-hashtag.html