Cocoonサイドバー文字サイズの変更

Cocoon

Cocoonを使っていると、サイドバーの文字サイズを変更したいけど、どうすればいいんだろう?と思う時があります。ここではCocoonでのサイドバー文字サイズ変更方法をご紹介します。プロフィールの文字サイズ変更方法も併せて説明します。

Cocoon サイドバー文字サイズの変更

実は、Cocoonにはサイドバーの文字サイズを設定する項目がありません。よってWordPressでスタイルシート(CSS)に記述してサイドバー文字サイズを変更します。

現在のサイズ確認

まずは今の状況を確認してみましょう。どのページでも良いので開いてみましょう。この場合は赤枠の部分の文字サイズを変更することになります。

サイドバー文字サイズの設定

ナビゲーションメニューの[外観]の中の[カスタマイズ]をクリックします。

カスタマイズ画面の[追加CSS]をクリックします。

テキストを入力するボックス(赤枠部分)が表示されるので、次のコードを記述します。「0.9」の部分は文字サイズになるので、お好みの数字にしてください。

.widget-sidebar ul li a {
font-size: 0.9em;
}

入力したら、画面上の[公開]をクリックします。

画面左上の[X]をクリックします。これで完了です。

変更後のサイズ確認

サイドバーの文字サイズが変更されているか、変更前と比べて確認してみましょう。赤枠の文字サイズが小さくなっているのが確認できます。

自分の好みに調整してみましょう。

Cocoon プロフィール説明の文字サイズの変更

プロフィール説明の文字サイズの変更は、サイドバー文字サイズの変更と同じ方法で変更する事ができます。カスタマイズ画面の[追加CSS]をクリックして次のコードを追記しましょう。文字サイズ(font-size)をお好みの大きさにしてみてください。

.nwa .author-box .author-description {
font-size: 1.0em;
}

Cocoon プロフィールの名前の文字サイズの変更

プロフィールの名前の文字サイズの変更は、サイドバー文字サイズの変更と同じ方法で変更する事ができます。カスタマイズ画面の[追加CSS]をクリックして次のコードを追記しましょう。文字サイズ(font-size)をお好みの大きさにしてみてください。

.nwa .author-box .author-name {
font-size: 1.1em;
}