MENU
Sponsored Link

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

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

この記事は、ひつじ(@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]

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

ハートリスト

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

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

Sponsored Link

目次
閉じる