クリアメモリ

プログラミングやモーショングラフィックス、便利なアプリケーションなど雑多に記録するブログ

【はてなブログ】サイドバーのカテゴリーに表示数制限を追加する方法!

f:id:clrmemory:20170704162210p:plain

こんにちは!

今回は、はてなブログでサイドバーに追加した「カテゴリー」ユニットで、表示されるカテゴリーの数に制限をつけてみようと思います。自分で決めた数だけカテゴリーを表示させることで、アクセスしてもらいたいカテゴリーを限定できますし、見栄えもスッキリするので試してみてください。

 

はじめに

 

今回紹介するのは、はてなブログでデザインから設置した「カテゴリー」に表示数の制限を追加する方法です。

カテゴリーの数はブログによってまちまちです。多すぎてサイドバーがほとんど埋め尽くされてしまう、なんてことにならないように表示数を制限できたら便利ですよね。

 

このようなカスタマイズは、cssを編集することで自分で決めた数だけカテゴリーを表示し、それ以外を非表示にすることができるので試してみてください。

 

カテゴリーユニットって何?

 

今回紹介するカテゴリーユニットというのは、はてなブログの「デザイン > サイドバー > カテゴリー」で設置したカテゴリーユニットです。

 

f:id:clrmemory:20170704152841p:plain

 

これ以外で設置したカテゴリーではうまく設定できないので注意してください。

 

カテゴリーの順番を調整する

 

カテゴリーの表示数を制限する場合、表示させておきたいカテゴリーリンクを上の方に持ってこなくてはなりません。そこで、はてなブログのカテゴリーにある機能を使って、カテゴリーの並び順を調整しましょう。

 

デザイン > サイドバーから、モジュールを追加でカテゴリーを選択するか、すでにカテゴリーユニットが追加されている場合は、編集ボタンをクリックしてください。

 

f:id:clrmemory:20170704153203p:plain

 

こんな感じのウィンドウが表示されるので、その中にある「並び替え順」を任意のものに変更します。よく使うカテゴリーを上に持ってきたい場合は、記事が多い順を選びましょう。

 

f:id:clrmemory:20170704153525p:plain

 

また、並び順を個別に変更したい場合は「カスタム」を選択することで、カテゴリーの並び順をマウスのドラッグ移動で調整させることができます。

 

f:id:clrmemory:20170704153642p:plain

 

では、並び順を調整できたので実際にカテゴリーの表示数に制限をつけてみましょう。

 

カテゴリーの表示数を制限

 

カテゴリーの表示数を制限するのはとても簡単で、デザインCSSなどにちょっとしたコードを追加するだけで実装できました。以下のコードをデザインCSSに追加してみてください。

 

#box2 .hatena-module-category li:nth-child(n + 10){
    display: none;
}

 

このような記述を、デザインCSSの適当な場所(一番下とか)に追加しましょう。

このコードでは、10個目を含めて指定した数以降のカテゴリーリンクを非表示にするというコードになっています。例えば、20個目から非表示にしたい場合は「n + 20」になりますし、3つだけ表示したい場合は「n + 4」になります。

 

f:id:clrmemory:20170704155204p:plain

 

実際に設定してみるとこのようになりました。10個目以降、つまりは9個のカテゴリーだけが表示されるようになっていますね。カテゴリーの表示数は、サイトによって変わってくると思いますので、自分のサイトのデザインに合った数を指定してみてください。

 

サイドバー以外のカテゴリー

 

先ほどのコードで作用するのは、サイドバーに設置したカテゴリーユニットでのみ作用します。

これは、予期せぬ不具合を考慮したためですが、カスタマイズによってサイドバーに設置したカテゴリーユニットを記事下に移動させている方もいるかもしれません。

 

そういった場合で、もしサイドバー以外のカテゴリーでも実装したい方は、以下のようになります。

 

.hatena-module-category li:nth-child(n + 10){
    display: none;
}

 

これでサイドバー意外に設置したカテゴリーの表示数も制限することができました。

 

f:id:clrmemory:20170704160257p:plain

 

表示する数については、同様の方法で調整してみてください。

 

まとめ

 

今回紹介したコードを使うことで、はてなブログのカテゴリーユニットに表示されるカテゴリーリンクの数を調整させることができました。

私のブログでも、カテゴリーの数がどんどん増えてしまって、全て表示するとサイドバーのほとんどがカテゴリーになってしまっていたので、そういった時には今回の方法を試してみてください。

 

ではまた。