【WordPress】 Cocoon設定その2 スタイルシート CSS編集 + Font Awesomeの利用

SITE

 ※ Cocoon設定その1は2年前の記事。

初めてのテーマエディター

 前回、「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はバージョン4利用。

 子テーマの編集であれば、テーマのバージョン・アップデート後も設定が保持される。

Font Awesome

 肝心のアイコンはFont Awesome(fontawesome.com/)を利用。
 畏敬の念を起こさせるフォント---。

 画像ではなくUnicodeの私用領域 Private Use Area(E000~F8FF)を用いたフォント。いわゆる絵文字。

 上記ソースコードの中のcontent:のf197、f0fbがアイコンのUnicode。バックスラッシュは\と同じ。

 注意すべきはバージョン4とバージョン5があって、同じアイコンでもHTMLタグが違う点。

 Cocoonのデフォルトは現在バージョン4。
 Cocoon設定 - 全体の「サイトアイコンフォント」で、バージョン5へ変更できる。

 バージョン5の場合、CSSの

font-family: FontAwesome;

を 

font-family: "Font Awesome 5 Free";

にする。”やFontとAwesomeの間の半角スペースが抜けていると反映されない。  

 バージョン5で使えるアイコンは、Font AwesomeメニューのIconsから。現在v5.15で、アイコン数7865。
 バージョン4(fontawesome.com/v4.7/icons/)は、アイコン数675。
 使いたいアイコンをクリックするとUnicodeHTMLタグが表示される。

 CSSではなくHTMLで直接使う場合、HTMLタグをコピーしてペースト。
 例えば、アイコン「history(Unicode:f1da)」の場合、
 バージョン4は、

<i class="fa fa-history" aria-hidden="true"></i>

  (当ブログはバージョン4のまま)

 バージョン5は、

<i class="fas fa-history"></i>

 もう1つのブログでバージョン5を試用中。古いブラウザのままだと表示されない。

 今後バージョン6も控えているようなので、多用しないほうが無難かも。

ふシゼン
タイトルとURLをコピーしました