Cocoonカスタマイズ｜ウィジェット「人気記事」タイトル文字の変更方法

こんにちは。
フリーランスデザイナーのIKUE（@salon.198）です。

今日はワードプレステーマ「Cocoon」の

ウィジェットの人気記事タイトルのカスタマイズ方法

のご紹介です。

ここはずっと気になっていたところでした……。

私のWEB知識は数年前から止まっているので、勉強のためにも残しておこうと思います。

カスタマイズ後はこちら。

それでは、どーぞ！

カスタマイズの流れ

手順はこちら。

1. Cocoon管理画面
2. 外観からウィジェット
3. 人気記事をサイドバーにドラッグ
4. 外観からテーマエディター
5. CSSを追加／確認

それでは一つづつ順番に。

Cocoon管理画面の「外観」から「ウィジェット」を選択。

「人気記事」を「サイドバー」にドラッグ。
※サイドバーじゃなくてもOKです。お好みの箇所に設置してください。

「人気記事」の詳細設定。
後から変更可能です。

「外観」から「テーマエディター」を選択。

Cocoon Child: スタイルシート（style.css）になっていることを確認してからCSSをペースト。

以上です！

CSSはこちらです。

追加CSS

/************************************
** 人気記事 タイトル
************************************/
.widget-entry-card {
font-size: 15px;
line-height: 1.5em;
font-weight: lighter;
}

フォントサイズや行間は数値を変えると変化します。
フォントの太さのアレンジは
font-weight: ●●●●; ←ここを下のタグに変えると変化します。

• normal
• bold
• lighter
• bolder

Cocoonをいじり始めて約1年……カスタマイズ楽しい！

ブログのデザインをおしゃれにしたい方へオススメの記事はこちら

それでは、また！