ブログ プログラム

【JIN】コピペOK!アイコンを使ってリストを作ろう!

更新日:

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

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

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

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

スマホ固定フッターメニューのアイコンを大きくする!

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

Affinger5のスマホのフッター固定メニューがなんとか大きくならないかなーと頑張った結果。 \ ド ド ン / Contents1 Fontawesomeを使うと小さくなる!2 実際にアイコンをデ ...

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

ご参考にどうぞ。

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

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

りこかるのお部屋
りこかるのお部屋

>>> NEXT

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

ママログ
ママログ

>>> NEXT

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

本当に感謝です!

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

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

手順リスト

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

FileZillaのインストール

【初心者向け】FTPソフト「FileZilla」を使ってみよう!

Contents1 File Zillaってなに?2 早速インストール3 使い方3.1 自分のwebサーバーにアクセスしよう! File Zillaってなに? FTPはFile Trancefer P ...

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

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

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

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

step
1
HTML

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

HTML



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

step
1
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>

ちなみに、完成するとこんな感じになります。
ハートリスト

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

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


  • この記事を書いた人

こなゆき

パーフェクト趣味人。 知的好奇心MAX。 ゲーム・パソコン全般・科学・DIY・オーパーツとか怪しげなものも大好物。

-ブログ, プログラム

Copyright© さぶかるぐらし , 2019 All Rights Reserved.