【JIN】カスタム:リストをアイコン表示!コピペOK!

この記事は、ひつじ(@hituji_1234)さん赤石カズヤ(@cps_kazuya)さんの共同開発した大人気有料テーマ「JIN」に関する記事です。

31.3.28に「JIN」がバージョンアップされました。

大きなバージョンアップ点としては独自のアイコンフォント58種の追加です。

svgという技術を採用し、オリジナルのアイコンを読み込むことでfontawesomeの読込遅延を減らし、体感速度を大幅に上昇させることが可能になりました。

スマホ固定フッターメニューのアイコンを大きくする! 【Affinger5】スマホ下固定メニューのアイコンを大きくしよう。

こちらはaffinger5の記事になりますが、こちらでsvgについて少々触れています。

ご参考にどうぞ。

さて、この独自アイコンを搭載したことにより、本来のリストをチェックリストやブックマークボックス、シェブロンリスト、サムズボックスなど様々なカスタムを可能にしました。

今回お悩み相談をしてくれた方はりこかる⌬圧倒的理系ママざます(@rikocal)さん。

参考 りこかるの部屋りこかるの部屋

そして、強力なバックアップをしてくれた方がかわうそ@WPおばさん(@55mamalog)さんです。

参考 mamalogmamalog

今回のお悩み相談に関しては、かわうそさんのfont-family:”jin-icons”の助言がなければ、達成できませんでした!

本当に感謝です!

コピペでできるチェックリスト

完成図はこちら。(引用元:りこかるのお部屋 in 【レビュー】ココナラでアイコンイラストを依頼してみた!(反省と依頼のコツ)

手順リスト

この記事のチェックリストを作成するにあたっては、FTPソフトを使えることを前提としています。

FileZillaのインストール 【初心者向け】FTPソフト「FileZilla」を使ってみよう!

style.cssは確実にバックアップを取って編集するようにしましょう。

カスタマイザーの追加cssのみで編集する場合、いくつか必要がない記述があるかも知れません。

わからない場合は、全て突っ込んでしまいましょう!

手順1
style.cssへの追記

子テーマのstyle.cssに以下を追記します。

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;
}
/* チェックリスト 糸冬 */

手順2
HTML

実際に記事内にリストを追加する場合は、以下のように記載します。

HTML


<ul class="check_list">
  <li>はしるー</li>
  <li>はしるー</li>
  <li>おれーたーちー</li>
</ul>

手順3
AddQuictagを使用する場合

AddQuicktagプラグインを使用する場合、開始タグには以下を記載します。

開始タグ

<ul class="check_list">
  <li></li>
  <li></li>
  <li></li>

終了タグはこちら。

終了タグ

</ul>

これでチェックリストが出来ました。

完成図はこちらです。
完成図

ボックスで囲めば、チェックボックスのできあがりです。

ただし、ボックス内に配置する場合は背景色を調整してください。

おまけ(ハートリスト)

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;
}
/* チェックリスト 糸冬 */

記事内に記載するHTMLはこちら。

HTML


<ul class="heart_list">
  <li>はしるー</li>
  <li>はしるー</li>
  <li>おれーたーちー</li>
</ul>

ちなみに、完成するとこんな感じになります。

ハートリスト

いかがでしたでしょうか?

最後までお読みいただきありがとうございました。