ポイントが貯まる!Amazonでお得に買い物をしてみよう

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

Cocoon

WordPressテーマ「Cocoon」のサイドバーにカテゴリーを表示させると、行間が広いことが気になる方もいるかと思います。

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

 

カテゴリー数が少ないうちはよいのですが、増えてくると縦に間延びしてみえることがあります。

そこで今回は、ちょっとしたカスタマイズでカテゴリーをコンパクトにする方法をお届けします。どなたでもかんたんにできますので、よかったら参考にしてみてください。

カスタマイズを適用した例

【Cocoon】カテゴリーをコンパクトにするカスタマイズ

カテゴリーをコンパクトにするカスタマイズ

今回は、Cocoonのカテゴリーをコンパクトにする2つの方法をお届けします。

  1. カテゴリーの行間を狭くする
  2. フォントサイズを小さくする

1の方法だけでもいいですし、1と2を併用するとよりコンパクトになります。

どちらの方法も、次に紹介するコードをCocoonの子テーマの「style.css」に貼るだけでできます。

Cocoon カスタマイズ 子テーマにコードを貼る

カテゴリーの行間を狭くする方法

カテゴリーの行間を狭くするには、次のコードをコピーして、Cocoonの子テーマの「style.css」に貼ればOKです。

/*---------------------------------
カテゴリの行間を狭くする
--------------------------------*/
.widget_categories ul li a{
	line-height: 1.3;
}

これだけで、カテゴリーの行間が縮まり、グッとコンパクトになります。

ちなみに、line-heightは行の高さを設定する項目です。数字を小さくすると、より行間を狭くすることができますので、お好みの数字にしてみてください。

上のコードを適用した例

【Cocoon】カテゴリーをコンパクトにするカスタマイズ 適用例1 WoredPress

デフォルトでは10表示されていたものが、カスタマイズ後は12表示されるようになりました。

スポンサーリンク

フォントサイズを小さくする方法

つづいては、行間を狭くするのにプラスして、フォントサイズを小さくする方法です。

次のコードをコピーして、Cocoonの子テーマの「style.css」に貼ればOKです。

/*---------------------------------
カテゴリの行間とフォントを小さくする
--------------------------------*/
.widget_categories ul li a{
	line-height: 1.3;
	font-size: 15px;
}

これだけで、カテゴリーの行間がさらに縮まり、よりコンパクトになります。

font-sizeのあとにある数字を変えると、フォントサイズを変えることができます。数字を小さくすると、フォントも小さくなります。

上のコードを適用した例

【Cocoon】カテゴリーをコンパクトにするカスタマイズ 適用例2 WoredPress

行間を狭くしたものよりも、さらに縦にコンパクトになりました。

 

ちなみに、フォントサイズだけ小さくしたい時は、line-heightの項目をなくして

/*---------------------------------
カテゴリのフォントだけを小さくする
--------------------------------*/
.widget_categories ul li a{
	font-size:15px;
}

とすればOKですよ。

アイコンや線を入れてもっと見やすくしてみよう

カテゴリ表示は、アイコンや線を入れるともっと見やすくなります。

そのカスタマイズ方法をこちらの記事でくわしく解説しています。

【Cocoon】カテゴリーにアイコンや線を入れて見やすくするカスタマイズ
WordPressテーマ「Cocoon」のサイドバーのカテゴリー表示は、非常にシンプルなデザインになっています。 が、区切り線などがないため、カテゴリーの数が増えてくると、見づらくなることがあり...

まとめ

今回は、WordPressテーマ「Cocoon」のカテゴリをコンパクトにする方法でした。

行間やフォントサイズを変えるだけでかなりコンパクトになります。よかったら参考にしてみてくださいね。

\ Amazonをお得に使ってみませんか /

Amazonギフト券 チャージタイプがお得

Amazonで買い物するなら、チャージタイプがおすすめ!

チャージするたびに最大2.5%のポイントがたまってお得ですよ。

\ TRY NOW! /

Amazonギフト券への入金方法をみる