※ Cocoon設定その１は２年前の記事。
初めてのテーマエディター
前回、「Webフォントの利用」で、
font-display: swap
の一文があるか確かめるべくCocoon（テーマ）のスタイルシート CSSを覗いたついでにCSSを少しいじってみることにした。
※ スタイルシート CSSを使うとHTMLのタグ指定では実現できない細かなデザイン（文字色、サイズ、フォント、余白などなど）が可能になる
極力いじりたくなかったが、カテゴリー、リスト（箇条書き）、目次などのデザインを変えようとするといじらざるを得ない。
今回、（サイドバーに表示させている）カテゴリーにアイコンを付けたくなったので、（当ブログ開始後、）CSS初編集。
編集といっても下のサイトからコピー＆ペーストして値を少し変えただけ。
【Cocoon】 カテゴリーにアイコンや線を入れて見やすくするカスタマイズ（yuzuyu3.com/cocoon-cate/）
WordPressの外観 － テーマエディター（テーマの編集）から、
（Cocoonの場合、子テーマ Cocoon Childの）スタイルシート 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は当ブログのサイトキーカラー。
Font Awesomeはバージョン４利用。
子テーマの編集であれば、テーマのバージョン・アップデート後も設定が保持される。
Font Awesome
肝心のアイコンはFont Awesome（fontawesome.com/）を利用。
畏敬の念を起こさせるフォント－－－。
画像ではなくUnicodeの私用領域 Private Use Area（E000～F8FF）を用いたフォント。いわゆる絵文字。
上記ソースコードの中のcontent:のf197、f0fbがアイコンのUnicode。バックスラッシュは\と同じ。
注意すべきはバージョン４とバージョン５があって、同じアイコンでもHTMLタグが違う点。
Cocoonのデフォルトは現在バージョン４。
Cocoon設定 － 全体の「サイトアイコンフォント」で、バージョン５へ変更できる。
バージョン５の場合、CSSの
font-family: FontAwesome;を
font-family: "Font Awesome 5 Free";にする。”やFontとAwesomeの間の半角スペースが抜けていると反映されない。
バージョン５で使えるアイコンは、Font AwesomeメニューのIconsから。現在v5.15で、アイコン数7865。
バージョン４（fontawesome.com/v4.7/icons/）は、アイコン数675。
使いたいアイコンをクリックするとUnicode、HTMLタグが表示される。
CSSではなくHTMLで直接使う場合、HTMLタグをコピーしてペースト。
例えば、アイコン「history（Unicode:f1da）」の場合、
バージョン４は、
<i class="fa fa-history" aria-hidden="true"></i>（当ブログはバージョン４のまま）
バージョン５は、
<i class="fas fa-history"></i>もう１つのブログでバージョン５を試用中。古いブラウザのままだと表示されない。
今後バージョン６も控えているようなので、多用しないほうが無難かも。
