Someday Somewhere

A little something to say in my everyday life

タグ一覧もどきを設定:今までやったことのまとめ

先日、サイドバーにタグ一覧もどきを作成してみました。
その記事がこちら↓
サイドバーにタグ一覧もどきを表示してみた - Someday Somewhere

その時、もう少しやり方を考えてみたいと書いたのですが、一応方法が定まったので、まとめを書いておこうと思います。

やりたかったこと

1)タグ名とカテゴリ名は別のものにする
2)サイドバーのカテゴリ一覧とは別にタグ一覧を作る

【スポンサーリンク】
 

やったこと

タグ名とカテゴリ名を別のものにするということは、カテゴリ数がとても多くなってしまうということ。 となると、まずは増えるカテゴリ数をなんとかしなければなりません。

タグ名とカテゴリ名は別のものにする

はてなブログはカテゴリとは別のタグというものがありません。 カテゴリのみです。

もし、記事を書くたびにカテゴリをどんどん増やしていくと、サイドバーに表示させている場合、とても長いカテゴリリストができあがってしまいます。 さて、この膨れ上がったカテゴリ一覧をどうするか。

長くなってしまったカテゴリ一覧を解決する方法
思いつくまま、ざっと書き出してみました。
a )記事を整理して、カテゴリ数を無理矢理減らす
b )カテゴリ一覧に表示するものとグローバルメニューに表示するものとに分ける
c )カテゴリ一覧は非表示にし、グローバルメニューのみにする
d )カテゴリモジュールの編集画面で、表示するカテゴリ数を設定する
e ) カテゴリモジュールは使用せず、HTMLモジュールに表示したいカテゴリだけ書き込む(この場合、本来各カテゴリの後ろにある投稿記事数が出ない可能性がある)

このブログでは、カテゴリ一覧は階層化にしてあり、これはこれで気に入っているので、あまりいじりたくありません。

ということで、d )を選択することにしました。

カテゴリの表示件数を設定する方法

ブログ管理画面→デザイン→カスタマイズ(スパナマーク)→サイドバーと進み、カテゴリの編集をクリックすると、カテゴリモジュールの編集画面が開きます。 そこにある「表示件数」で表示させたいカテゴリ件数を決めることができます。

例えば、全カテゴリ数が10個あり、その内の5個だけ表示したい場合、「表示件数」を5にします。 すると、下の画像のような「表示されるカテゴリー」と「表示されないカテゴリー」に分かれたリストが現れます。 あとは「適用」をクリック。

f:id:tsukisai:20190131080900p:plain f:id:tsukisai:20190131080944p:plain

また、カテゴリモジュール編集画面の「並び替え順」で「カスタム」を選択すると、各カテゴリをドラッグして「表示されるカテゴリー」と「表示されないカテゴリー」に分類することができます。

ここまでのまとめ-やったこと:

  • 記事にタグとしてのカテゴリ名を追加した
    (このブログのカテゴリ名は英語表記にしてあります。 タグ用としてつけたカテゴリは日本語表記にしました←わからなくならない為という、ほとんど自分用)

  • タグ用としてのカテゴリは非表示にした
    こうすれば、カテゴリ一覧が長くなることもありません。

タグ一覧をサイドバーに設置する

次に、記事に付けたタグをサイドバーにタグ一覧として設置します。

ブログ管理画面→デザイン→カスタマイズ(スパナマーク)→サイドバーと進み、「+モジュールを追加」をクリックして、「</>HTML」モジュールを選択。 HTML記述欄に以下のコードを書き込む。

<div style="display: inline-block; background: #ffecf5; margin: 0 5px 5px; padding: 5px; border-radius: 6px; word-break: break-all;"><a href="https://www.tsukisai.net/archive/category/%E5%B1%B1%E6%AD%A9%E3%81%8D">山歩き</a></div>

各タグごとに上記コードを作成し、書き込んでいくと、サイドバー上では一応タグ一覧のように表示されます。
(このコードは自分流なので、もっとすっきりした書き方もあるかもしれません)

各タグのアーカイブのURLを調べる方法:
1.そのタグが付いている記事上に表示されているタグをクリックする
2.管理画面→カテゴリと進み、カテゴリ名をクリック
上記1と2、どちらの方法でも、カテゴリ(またはタグ)のアーカイブページが開くので、そのURLをコピーして上記コードに貼り付ける。

最後に

とりあえず、思い描いていてようなタグ一覧が出来上がりました。 一つ一つモジュールに書き込む手間はありますが、アーカイブのページリンクなので、一度作ってしまえばいいですし。

カテゴリとタグを別にすることで、例えば、登山関係の書籍と登山に行った時の記事を「山歩き」という一つのタグでくくることができるようになりました。

カテゴリモジュールを2つ使い、カテゴリ用とタグ用としてできないかと思ったのですが、例えばカテゴリモジュール1とカテゴリモジュール2のように分けてcssを書けるのかわからなかったのと、今の自分の知識では到底太刀打ちできないと思い、この方法は諦めました。

あと欲を言えば、タグ一覧もタグクラウドみたいな見た目にできたらなあなどと思ったりしています。