STORK19のリストアイコン変更方法

今回はWordpressの有償テーマ「STORK19」のリストアイコン変更方法について解説していきます。

この記事はCSSの初歩的な知識があることを前提に書いています。
noteで書いているためコード内容等が見にくいかもしれませんがご容赦ください。

STORK19のリストアイコンは普通に変更できない！？

ブログを読みやすくするためによく多用される「リスト」。

一般的なテーマやHTMLでの記述であればCSSの疑似要素を使って簡単に変更することはできますが、STORK19では少し特殊な方法が必要です。

STORK19ではリストアイコンにFontAwesomeを使用するようにテーマで定義されており、従来のCSSの書き方では変更することができません。

STORK19のリストアイコンを変更する手順

1. リストの「追加CSSクラス」に任意のクラスを追加する
　※好きなクラス名で大丈夫です。

2. リストの下にカスタムHTMLで以下のコードを記述

【コード内容解説】 ​

<style>
.(クラス名) li::before{
   contet:"\(文字コード)" !important;
   font-weigh:(文字太さ) !important;
   color:(好きな色コード) !important;
   font-size:2em !important;
   top:-15px !important;
   left:-10px !important;
}
</style>

文字コードについてはFontawesomeから選びます。コードの前にはバックスラッシュ「\」を必ず付けてください。

文字太さはアイコンによって下記のように決められています。
・Bold : 900
・Regular : 400
・Brand : 400

これだけでアイコンを変更することが可能です。

リストアイコンを消す方法

上記のカスタムHTMLのコードを下記のように書きます。

【コード内容】
<style>
 .(クラス名) li::before{
 content : none !important;
}
</style>

上記でリストアイコンを消すことができます。

まとめ

今回は「STORK19」のリストアイコンを変更する方法、消す方法について解説しました。

STORK19のリストアイコンは普通の方法では変更したり消すことができないので、困っていたという方は参考にして頂けたら幸いです。