この記事は、ひつじ（@hituji_1234）さんと赤石カズヤ（@cps_kazuya）さんの共同開発した大人気有料テーマ「JIN」に関する記事です。
31.3.28に「JIN」がバージョンアップされました。
大きなバージョンアップ点としては独自のアイコンフォント58種の追加です。
svgという技術を採用し、オリジナルのアイコンを読み込むことでfontawesomeの読込遅延を減らし、体感速度を大幅に上昇させることが可能になりました。
[card2 id=1499]
こちらはaffinger5の記事になりますが、こちらでsvgについて少々触れています。
ご参考にどうぞ。
さて、この独自アイコンを搭載したことにより、本来のリストをチェックリストやブックマークボックス、シェブロンリスト、サムズボックスなど様々なカスタムを可能にしました。
今回お悩み相談をしてくれた方はりこかる⌬圧倒的理系ママざます（@rikocal）さん。
[sanko href=”https://riko-cal.com/” title=”りこかるの部屋” site=”りこかるの部屋”]
そして、強力なバックアップをしてくれた方がかわうそ＠WPおばさん（@55mamalog）さんです。
[sanko href=”https://55mamalog.com/” title=”mamalog” site=”mamalog”]
今回のお悩み相談に関しては、かわうそさんのfont-family:”jin-icons”の助言がなければ、達成できませんでした！
本当に感謝です！
コピペでできるチェックリスト
完成図はこちら。(引用元：りこかるのお部屋 in 【レビュー】ココナラでアイコンイラストを依頼してみた！（反省と依頼のコツ））
手順リスト
この記事のチェックリストを作成するにあたっては、FTPソフトを使えることを前提としています。
[card2 id=1486]
style.cssは確実にバックアップを取って編集するようにしましょう。
カスタマイザーの追加cssのみで編集する場合、いくつか必要がない記述があるかも知れません。
わからない場合は、全て突っ込んでしまいましょう！
[timeline]
[tl label=’手順1′ title=’style.cssへの追記’]
子テーマのstyle.cssに以下を追記します。
[codebox title=”css”]
/* チェックリスト 女台 */
.cps-post-main ul.check_list li:before {
font-family: "jin-icons";
content: '\e90b';
color: #e9546b;
background: none!important;
margin-left: -1.2em!important;
margin-top: 1em!important;
}
.cps-post-main ul.check_list > li:before {
background-color: #ffffff!important;
}
/* チェックリスト 糸冬 */
[/codebox]
[/tl]
[tl label=’手順2′ title=’HTML’]
実際に記事内にリストを追加する場合は、以下のように記載します。
[codebox title=”HTML”]
<ul class="check_list">
<li>はしるー</li>
<li>はしるー</li>
<li>おれーたーちー</li>
</ul>
[/codebox]
[/tl]
[tl label=’手順3′ title=’AddQuictagを使用する場合’]
AddQuicktagプラグインを使用する場合、開始タグには以下を記載します。
[codebox title=”開始タグ”]
<ul class="check_list">
<li></li>
<li></li>
<li></li>
[/codebox]
終了タグはこちら。
[codebox title=”終了タグ”]
</ul>
[/codebox]
これでチェックリストが出来ました。
[/tl]
[/timeline]
完成図はこちらです。
ボックスで囲めば、チェックボックスのできあがりです。
ただし、ボックス内に配置する場合は背景色を調整してください。
おまけ（ハートリスト）
[codebox title=”style.cssへ追記”]
/* ハートリスト 女台 */
.cps-post-main ul.heart_list li:before {
font-family: "jin-icons";
content: '\e916';
color: #e9546b;
background: none!important;
margin-left: -1.2em!important;
margin-top: 1em!important;
}
.cps-post-main ul.heart_list > li:before {
background-color: #ffffff!important;
}
/* チェックリスト 糸冬 */
[/codebox]
記事内に記載するHTMLはこちら。
[codebox title=”HTML”]
<ul class="heart_list">
<li>はしるー</li>
<li>はしるー</li>
<li>おれーたーちー</li>
</ul>
[/codebox]
ちなみに、完成するとこんな感じになります。
いかがでしたでしょうか？
最後までお読みいただきありがとうございました。