Someday Somewhere

A little something to say in my everyday life

サイドバーにタグ一覧もどきを表示してみた

タグ一覧やタグクラウドとは

ブログのサイドバーなどで見かけるタグクラウド。 クラウド状のものもありますし、整然と並べられたタグ一覧といったものもあります。

タグクラウドに関する説明をしてくれているサイト(↓)
seolaboratory.jp

【スポンサーリンク】
 

はてなブログの場合

カテゴリとタグを別々に設定できるようになっているブログもありますが、はてなブログは、カテゴリ以外にタグを設定できるようになっていません。 要するにカテゴリのみ。

はてなブログでカテゴリをタグ風に表示させる方法
では、はてなブログにタグクラウドのようなものを表示するにはどうすればよいのか。

カテゴリをタグ風に見せるという方法があります。 方法を解説してくれているサイトさん(↓)

nohack-nolife.hatenablog.com

blog.mshimfujin.net

skyfish25.hatenablog.com

カテゴリをタグ風に表示する方法を検索すると、上記サイトさんのように、jQuery、JavaScriptを使ったコードをcssに書き込むという方法があることがわかります。

ただ、このブログはカテゴリを階層化してあり、カテゴリ名が長かったり、一つ一つのカテゴリ名を全てタグとして表示するとなると、ちょっと鬱陶しいのではないかと。

HTMLモジュールを使ってタグ一覧もどきを作成
そこで、本来のタグ一覧とは異なりますが、それっぽく見えるものを設置してみることにしました。

タグ一覧もどきなので、各タグの後ろに記事数は出ませんし、記事数によってタグの文字サイズが大きくなったり小さくなったりというということもありませんが・・・。

【今回行った方法】
1)管理画面→デザイン→カスタマイズ(スパナのマーク)→サイドバーと進み、モジュールを追加をクリック。

2)</>HTMLを選択。

3)タイトルを記入し、HTMLを書き込む。
今回書き込んだものの一部(↓)

<div style="display: inline-block; background: #fff; margin: 5px; padding: 6px; border: 1px solid #996655; border-radius: 8px; word-break: break-all;"><a href="https://www.tsukisai.net/archive/category/Customization">はてなブログカスタマイズ</a></div>

上記のパターンをそれぞれのカテゴリで作成していきます。

今後

とりあえず、見た目はタグ風になりましたが・・・。 タグ風というだけで、カテゴリ名とは違うタグ名でくくるのとは違うわけで。

今後やりたいこと:

  • 記事を投稿する際、カテゴリとは別に、タグとしてのカテゴリ名(以下タグカテゴリと呼ぶ)を付ける
  • タグカテゴリはサイドバーの階層化カテゴリに表示させない
  • タグカテゴリのリンク集を上記のHTMLモジュールに作成する

こうすれば、カテゴリに設定した言葉とは別の言葉で記事を分類することができていいかなと。