Cocoonテーマは標準で色んなスタイルを変更できるようになっています。
例えばナビゲーションは、ナビゲーションの位置や、背景色、高さや横幅まで細かな変更ができるようになっています。
しかし、ウェジェットタイトルのデザインについては、現在のところ対応していないようです（2019/09/07現在）
ということでウィジェットタイトルのデザインを変更したかったのですが、Cocoonの設定項目ではそもそも無さそうだったので、CSSを編集してデザインを変更することにしました。
[外観] － [テーマエディタ]を選択する
まずは、管理画面から[外観]－[テーマエディタ]を選択します。
続いて、編集するテーマが「Cocoon Child」になっていることを確認してください。
親テーマを編集した場合、ブログ全体の見た目に影響する場合があるので、必ず編集は子テーマである「Cocoon Child」を指定するようにしてください。
編集するテーマの確認が終わったら、CSSを追記していきます。
追記していく場所自体は、任意の場所で問題無いですが、
【子テーマ用のスタイルを書く】という注釈欄がデフォルトで記載されていますので、その下に追記すると分かりやすいと思います。
ウィジェットタイトル以外のデザインの変更も、ここにCCSコードを記載することで変更することができます。
CSSを追記する
後は、自分の好みにCSSコードを記載していくのみです。
ウィジェットのタイトルデザインを編集したい場合は、[.sidebar h3]を指定することで、デザインを変更することがきます。
参考までに当ブログで追記したCSSコードは以下の通りです。
.sidebar h3{
background-color: #104777;
color: white;
padding: 4px 12px;
border: 2px solid #104777;
border-radius: 5px;
}非常にシンプルなデザインの修正にしています。
ブログ全体的な色合いを統一させたかったので、ヘッダナビゲーションと同じの色合いにしました。
今後、デザインを変更するかもしれないですが、その際もソースコードを公開していこうと思います。
コメント