今まで適当に分類して付けていたラベルを、もう少し分かりやすく使い勝手が良くなるように整理してみました。
大分類のカテゴリと小分類のハッシュタグ
これまで複数のラベル(カテゴリ)を付けていた記事は一つのカテゴリだけにして、代わりにハッシュタグ(#付きのラベル)を複数付与。
WordPress とか JetTheme のマネです(笑) が、今回は JetTheme の中身は参考にせず、自力で改造しています。
旧ブログでも
実は4年ほど前にも旧ブログで、増えすぎたラベルを整理すべく工夫していました。カテゴリと各ジャンルのタグに分類して4つのラベルウィジェットに振り分けています。
この時はウィジェットごとに手動でカテゴリとその他の小分類タグに振り分けていましたが、今回は分岐タグを使って自動で振り分けさせるという技を使っています。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-NoteJetThemeのブログでよく見かけるあの仕様を通常テーマで再現する方法について、詳しくご紹介します。https://itblogger-note.blogspot.com/2022/05/blogger-label-category-and-hashtag.html
コメントを投稿
別ページに移動します8 件のコメント (新着順)
ふじやん
> 多愚にゃんさん
楽しくカスタマイズされたブログを拝見できる日を楽しみにしてます(^^)
多愚にゃん
>ふじやん様
ご返信、ありがとうございます
Fさんにもれなく付いてくる様々な仕掛けが、いちいちかわいくて(#^.^#)。
コードをいじって楽しいなって思えたのは初めてです。
本当にありがとうございます。
ふじやん
> 多愚にゃんさん
拙作テーマ、親しみを込めてFさんと呼んで頂きありがとうございます(^^)
記事リストのラベル表示に関して、自分ではほぼ理想的な仕様にできて満足しているのですが、果たして一般的にはどうなんだろうな?と少し気がかりだったので、少なくとも多愚にゃんさんには気に入って頂けているようで良かったです!
可能な限りのサポートはするつもりですので、お気軽にお尋ねくださいね(^^)
多愚にゃん
おはようございます。
F-light(以下、Fさん)と毎日遊んで、なんとか自分好みにカスタマイズしようとしているところです。
昨日、本記事の「ラベル」のことで、メッチャ嬉しくなったので、ご報告させてもらいます。
初めて自分のテスト記事にラベルを付けてみたのですが、あ~ら不思議!記事リストの左上にかわいいフォルダマークが生まれていて、感激しました(笑)。
こちらのふじろじっくさんのブログの記事リストには、マウスホバーすると遠慮がちにカテゴリー・フォルダマークが出て、ホバーを外すと何事もなかったように消える、あのかわいいマークがあって、意味なく遊んでいたのですが、何と自分のブログにも付いた!
嬉しくて「Fさん、すごい」とパソコンに向かってお辞儀してしまいました(笑)。
公開予定のブログは、作っている自分も見てくれる人も高齢者が多そうなので、文字の大きさ、色味、迷わず使える仕様とかにこだわっているのですが、どうしても出来ないことがいくつかあります。もう少し頑張ってみて、もしできない時はご教示をお願い出来ますでしょうか?
Fさんと遊ぶのが楽しくなっていますので、もう少し頑張ってみますが、SOSのときはよろしくお願いいたします。
ふじやん
Fumaさん、コメントありがとうございます。
実は Fumaさんの関連記事を導入したのはたまたまだったのですが、# を振り分ける分岐タグを使われているのに気づいて、前から気になっていたハッシュタグ機能に使えるのでは?と思い立ち試してみたら上手くいった…という経緯なんです(^^;
JetTheme、ほんと参考になりますよね。色々とパクらせて頂いてます(笑)
私の記事は正直言って拙くて分かりにくいと思いますので、是非 Fumaさんに詳細な記事を書いて頂きたいです(^^)
Fuma
こんばんは。当ブログのウィジェットがカスタマイズのお役に立ったようで何よりです。
ラベルの表示分け、良いですよね。キーワードがパッと目に入ってきて興味を惹かれます。私もJetThemeのスタイルに憧れ、少し前からラベルの表示分けをしているのですが、見やすくて気に入っています。
いつかカスタマイズ記事を書こうと思ってぐずぐずしていたら、ふじやんさんに先を越されてしまいました(笑)
ふじやん
>ヒデヒデさん
この記事書いた後で新たに音楽や写真記事でいくつかタグを新規で追加したんですけど、これ以上増えたらまたプルダウン化したくなっちゃうかも(笑)
自己満で書いてるショボい写真とマニアックな音楽記事ばっかりですが、結構あるんですよ(^^;
カテゴリで何を付けるか迷うのはよくあります。もっとしっくりといくカテゴリ名考えたほうがいいのかも?
ヒデヒデ
プルダウンは見た目スッキリしますが、確かに一目で全ラベルがわかる方がいいですね。
(フッター部分見て、「写真や音楽系の記事、こんなにあったんだ。」と初めて気付きました。)
個人的にカテゴリーは1つの記事に1つだけにしたいので、私もカテゴリーは1つだけで複数ハッシュタグをつけるようにしてますが、たまに「この記事は○○と□□、どちらのカテゴリーにするべきか…。」って悩む時があります(^_^;)