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

当ページのリンクには広告が含まれています。

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

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

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

のご紹介です。

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

本当にちょっとした
ところなんですけどね 汗

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

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

それでは、どーぞ!

Contents

カスタマイズの流れ

手順はこちら。

  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年……カスタマイズ楽しい!

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

それでは、また!

公式LINEのご案内

公式LINEで、おともだち限定記事公開中

  • ハンドメイド作家さん向け、お店の名前・ロゴ作りの考え方
  • ポーセラーツ作品づくり|デザインお任せの時押さえておきたい注意点

など、デザインに関すること・働き方に関するお悩み・ご質問を記事にしてお届けしています。
おともだち限定のクローズな場所だからこそ、シェアできること、私個人的な考え方など更新中です。

お友達限定サイトはコチラ

  • URLをコピーしました!
  • URLをコピーしました!
Contents