Cocoon、カテゴリーの行間を狭くし、長いカテゴリーをすっきりとカスタマイズ（他サイトのコピペ対応）

運営する2サイトともにWordPressのテーマ「Cocoon」を利用しているのですが、無料とは思えないほどに痒い所に手が届く便利な機能満載の一方、カスタマイズしたい箇所がチラホラと。その1つがカテゴリーの行間が広いことです。

そこで今回、他サイトの力を借りて（そのままコピペ対応）カテゴリーの行間を詰めてみましたので、ご参考まで。

理想は子カテゴリーの折りたたみ

私の場合、2サイト合わせて記事数は約1500。記事が多いとカテゴリーも多くなるのですが、Cocoonに備わっているプルダウンにはしたくない。そこで思いつくのが、子カテゴリーの折りたたみ。

便利そうな以下のプラグインを2つ試してみたのですが、Cocoonでは子カテゴリーが展開しない状況です。

▼まずは「Collapsing Categories」。このプラグインは利用者が多いのですが、エラーが出たうえに子カテゴリーが展開しない。

▼「jQuery Categories List Widget」は親カテゴリーは機能するのですが、▶の子カテゴリーへの展開が反応せず。Simplicityでは、アーカイブの折りたたみ機能は実装されていましたが（「Simplicity2.0.9公開。アーカイブ折り畳み機能、不具合修正など」）、カテゴリーの折りたたみは、実装も「わいひら」さんの記事にもないため、何等かの不都合があるのでしょうね。

カテゴリーの行間を狭くしてみた

子カテゴリーの折りたたみが困難、Cocoonで実装されているプラグインの利用よりもカテゴリーをしっかり表示したいとなれば、対応すべきことはカテゴリーの行間を狭くすること。

▲オリジナルは画像左側、カスタマイズ・行間を狭くした後は画像右側です。当サイトも同デザインですが、上の画像はカテゴリー数の多いメインサイト「Win And I net」の事例。

左の「Onda Xiaoma 21」が、7行分ほど上に移動しているのがわかります。やや窮屈となり、そもそもカテゴリーが多すぎるため、後日 修正予定です。

さて、CSSをそのままコピペ（色、行間などは変更しています）させていただいたのは以下の記事。ありがとうございます。

▽デザインはこちらの記事に記載のCSSを使用。

【Cocoon】カテゴリー表示をカスタマイズする - MASAa.net

INDEX カテゴリー表示テーマCocoonのカテゴリー表示ウィジェット カテゴリー設定カテゴリー表示のカスタマイズカスタマイズ内容カスタマイズ後のカテゴリー表示最後に カテゴリー表示 WordPressテーマ Coco

masaa.net

▽行間はこちらの記事に記載のCSSを使用。上のCSSと統合もできそうです。

【Cocoon】カテゴリーの行間や文字サイズを変えて、コンパクトにするカスタマイズ

WordPressテーマ「Cocoon」のサイドバーにカテゴリーを表示させると、行間が広いことが気になる方もいるかと思います。カテゴリー数が少ないうちはよいのですが、増えてくると縦に間延びしてみえることがあります。そこで今回は、ちょっとした

yuzuyu3.com

まとめ

他サイトの引用のみで完了となりましたが、縦に長すぎるカテゴリーがかなりすっきりとしました。となると、サイドバーの他の部分との整合性・バランスがわるい状況に。ボチボチとかカスタマイズしていきます。