Cocoon カテゴリーの行間と文字サイズの変更方法

Cocoon

WordPressテーマ「Cocoon」のサイドバーのカテゴリー表示変更方法を紹介します。私はCocoon標準設定だと少し文字が大きくて行間が広いように感じていました。標準設定のままだと間延びしているように見えます。↓↓(緑枠内)

Before

そこで設定を少し変更するだけでコンパクトにまとまりました。(作業時間1~2分程度)
本当に簡単でコピー&ペーストで終わりますので早速手順を紹介していきます。

After

文字サイズの変更

変更方法はCocoon Childスタイルシート(Style.css)にコピー&ペーストするだけです。

まずは「Cocoon Childスタイルシート(Style.css)」の場所を紹介します。

「外観」→「テーマエディター」をクリック

次に、右上にある「編集するテーマを選択」「Cocoon Child」を選択し→スタイルシートを選択

スタイルシートに下記コードをコピーして貼る。
コード内の「font-size: 15px 」 この数字の部分が文字サイズの事です。数字を小さくしていけば文字が小さくなります。

/*———————————
カテゴリの文字サイズ変更
——————————–*/
.widget_categories ul li a{
font-size: 15px;
}

貼り付け後

最後に「ファイルの更新」をぽっちと押して完了です。

行間の変更

変更方法は文字サイズ変更と同じで、Cocoon Childスタイルシート(Style.css)に行間変更コードをコピー&ペーストするだけです。

スタイルシートに下記コードをコピーして貼る。
コード内の「line-height: 1.1 」 この数字の部分が行間の事です。数字を小さくしていけば行間が詰まっていきます。

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

文字も行間もどっちも変更

文字も行間もどちらも変更したい場合は下記コードをコピー&ペースト
今までと同じように数値の部分を変更しお気に入りの表示を見つけてください。

/*———————————
カテゴリの行間を狭く文字サイズも

——————————–*/
.widget_categories ul li a{
   font-size: 15px;
line-height: 1.1;
}

文字も行間も変更する場合

これで文字サイズや行間を変更しかなりスッキリしました。よかったら参考にしてみてください。

ブログランキング・にほんブログ村へにほんブログ村

コメント

タイトルとURLをコピーしました