テーマ［ファイル］エディター
ブログの目次、リスト（箇条書き）、カテゴリーなどのデザインを変えたいけど変えられない、でも変えたい、といった場合、
スタイルシート CSSを編集すれば変えられる。
外観 － テーマ［ファイル］エディター（テーマの編集）からStylesheet style.cssをいじる。
WordPressの機能を変更したり、拡張したい場合、
プラグインもあるが、
外観 － テーマ［ファイル］エディターのTheme Functions functions.phpなどのPHPファイルをいじることもできる。
ただし、中・上級者向け。
いずれも（子テーマがある場合、）子テーマのほうでいじる。
子テーマの編集であれば、テーマのバージョン・アップデート後も設定が保持される。
以前、（サイドバーに表示させている）カテゴリーにアイコンを付けたくなって、（ブログ開始後、）初めてCSSを編集した。
※ その後、スキン変更とともに上書きされた
下のサイトからコピー＆ペーストして値を少し変えただけ。
【Cocoon】 カテゴリーにアイコンや線を入れて見やすくするカスタマイズ（yuzuyu3.com/cocoon-cate/）
テーマ［ファイル］エディターのstyle.cssに
.widget_categories ul li a::before{
font-family: FontAwesome;
content: "\f197";
color: #a6d684;
padding-right:6px;
}
.widget_categories ul li ul li a::before{
font-family: FontAwesome;
content: "\f0fb";
color: #a6d684;
padding-right:6px;
}をペースト。
color:などの値を変えた。#a6d684はブログのサイトキーカラー。
上記ソースコードの中のcontent:のf197、f0fbはアイコンフォント Font AwesomeのUnicode。バックスラッシュは\と同じ。
f197（fa-space-shuttle）
f0fb（fa-fighter-jet）
CSSの「初歩」
スタイルシート CSS Cascading Style Sheetsを使うとHTMLのタグ指定では実現できない細かなデザイン（文字色、サイズ、フォント、余白などなど）が可能になる。
HTMLに反映させる方法は、以下３通りある。
Ａ スタイル styleをスタイルシート（●●●.cssファイル）に書き並べて（定義して）
.htmlファイルのヘッダー <head> </head>
の中で
リンク指定
<link rel = "stylesheet" type = "text/css" href = "●●●.css">
Ｂ .htmlファイルのヘッダー <head> </head>の中に
<style type = "text/css">スタイル style</style>
と直接書き並べても同じ
▼ スタイル styleの例）
p{font-size:11pt;
font-family:"ＭＳ ゴシック","MS Gothic";
line-height:32px;
color: #333;}※ 全角スペースの空白が入るとダメ
Ｃ <div style = "スタイル style"> </div>
<span style = "スタイル style"> </span>
<p style = "スタイル style"></p>
など各タグ内で直接指定することもできる
▼ style = スタイル styleの例）
style="background-color: #33ff33;"
p{ }、h3{ }のような既存のHTMLタグ <p>、 </p><h3> </h3>のデザインの他、
divタグ、spanタグを使って、いろいろデザインできる。
divは、行や段落レベル
spanは、行内の一部でも反映
上のＡ、Ｂで
.●●●{ }
と定義したスタイル styleは
※ ●●●は任意
<div class = "●●●"> </div>
<span class = "●●●"> </span>
でHTMLに反映
#●●●{ }
と定義したスタイル styleは
<div id = "●●●"> </div>
<span id = "●●●"> </span>
でHTMLに反映
p.●●●{ }、p.△△△{ }
a.●●●{ }、a.△△△{ }
など特定のタグ内で分けて使うこともできる。
h2, h3, h4{ }だと
同じ設定を複数のタグ（h2タグ、h3タグ、h4タグ）で使える。
前出のstyle.cssの
.widget_categories ul li a::before{ }
は（Cocoonの）ウィジェットのカテゴリーのデザイン。
.widget_categories ul li ul li a::before{ }
は子カテゴリーのデザイン。
ul、liはリスト（箇条書き）のHTMLタグ。
a::beforeはリストの［リンク］文字列ではなく、文字列の前（左）の要素。ulの場合、・。・をアイコンに変更。
※ HTMLに反映されない場合
ブラウザのキャッシュを消去してみる
空白が半角でなく全角になっていないか確認してみる
