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】カテゴリー表示をカスタマイズする
WordPressテーマ Cocoonの「カテゴリー表示」のカスタマイズについてまとめてみました。カスタマイズの内容は、アイコンの設置、ボーダーラインの表示、記事数デザイン変更、上下左右空間の設定についてカスタマイズを行いました。

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

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

まとめ

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

 

コメント