無料【アイコン・リストマーク】チェックマーク透過png-色違いセット[check001s]

赤色チェックマーク

  • ああああ
  • いいいい
  • うううう

HTMLタグ

<ul class="list-mark list-check001s-red">

<li>ああああ</li>

<li>いいいい</li>

<li>うううう</li>

</ul>


赤色チェックマーク2(ちょっと薄め)

  • ああああ
  • いいいい
  • うううう

HTMLタグ

<ul class="list-mark list-check001s-red2">

<li>ああああ</li>

<li>いいいい</li>

<li>うううう</li>

</ul>


ピンク色チェックマーク

  • ああああ
  • いいいい
  • うううう

HTMLタグ

<ul class="list-mark list-check001s-pink">

<li>ああああ</li>

<li>いいいい</li>

<li>うううう</li>

</ul>


オレンジ色チェックマーク

  • ああああ
  • いいいい
  • うううう

HTMLタグ

<ul class="list-mark list-check001s-orange">

<li>ああああ</li>

<li>いいいい</li>

<li>うううう</li>

</ul>


青色チェックマーク

  • ああああ
  • いいいい
  • うううう

HTMLタグ

<ul class="list-mark list-check001s-blue">

<li>ああああ</li>

<li>いいいい</li>

<li>うううう</li>

</ul>


灰色チェックマーク

  • ああああ
  • いいいい
  • うううう

HTMLタグ

<ul class="list-mark list-check001s-gray">

<li>ああああ</li>

<li>いいいい</li>

<li>うううう</li>

</ul>


灰色チェックマーク2(ちょっと薄め)

  • ああああ
  • いいいい
  • うううう

HTMLタグ

<ul class="list-mark list-check001s-gray2">

<li>ああああ</li>

<li>いいいい</li>

<li>うううう</li>

</ul>


ピンクの部分が各チェックマークの色ごとに異なります。

ダウンロードは下記から

※当サイトのフリー素材は、リンクウェア(リンクやクレジット表記を条件に無料で使用可)と

させていただいております。ダウンロード前に必ず利用規約をお読みください。

利用規約こちら

 

ダウンロード
無料【アイコン・リストマーク】チェックマーク透過png-色違いセット[check001s]
リストマークに最適なチェックマークアイコンです。

「こんな方におすすめです」「こんな症状にお困りではありませんか?」
など、文章を箇条書きにする際に、頭にチェックマークのアイコンをつけるだけで
読みやすくなり、グンとイメージが伝わりやすくなります。


★ポイント★
ベーシックで使いやすいデザインのものを7色セットにしました。
一行ごとに自動的にアイコンが表示されるようにしています。

<内容>
計7色のPNGデータを圧縮ファイル(Zip形式)にしています。
ダウンロード後、ダブルクリックして解凍後、お使いください。
list-check001s.zip
圧縮Zipフォーマット 8.1 KB

使い方

こちらでご案内している使い方は<Jimdoユーザー(独自レイアウト)>を対象としています。

HTMLやCSS等の知識をお持ちの方は、もちろんその他のサイトでも利用OKです。

 

  1. 画像をダウンロードし、圧縮ファイルを解凍後、
    レイアウト>独自レイアウト>ファイル に「ファイルを選択」し「アップロード」する。(★)
  2. 下記CSSコードをコピーし、
    レイアウト>独自レイアウト>CSS に貼り付けて「保存」。(★)
  3. お好みのチェックマークのHTMLタグをコピーし、文章パーツのHTMLへ貼り付けてお使いください。

 

★ヒント

 ファイルアップロードの方法|CSS編集の方法


CSSコード

ul.list-mark {

    margin:10px !important;

    padding:0 !important;

    list-style-type:none !important;

}

 

/*赤色チェックマーク*/

ul.list-check001s-red li {

    padding-left:23px !important;

    line-height:25px !important;    

    background:url(list-check001s-red.png) no-repeat;

}

 

/*赤色チェックマーク2(ちょっと薄め)*/

ul.list-check001s-red2 li {

    padding-left:23px !important;

    line-height:25px !important;    

    background:url(list-check001s-red2.png) no-repeat;

}

 

/*ピンク色チェックマーク*/

ul.list-check001s-pink li {

    padding-left:23px !important;

    line-height:25px !important;    

    background:url(list-check001s-pink.png) no-repeat;

}

 

/*灰色チェックマーク*/

ul.list-check001s-gray li {

    padding-left:23px !important;

    line-height:25px !important;    

    background:url(list-check001s-gray.png) no-repeat;

}

 

/*灰色チェックマーク2(ちょっと薄め)*/

ul.list-check001s-gray2 li {

    padding-left:23px !important;

    line-height:25px !important;    

    background:url(list-check001s-gray2.png) no-repeat;

}

 

/*オレンジ色チェックマーク*/

ul.list-check001s-orange li {

    padding-left:23px !important;

    line-height:25px !important;    

    background:url(list-check001s-orange.png) no-repeat;

}

 

/*青色チェックマーク*/

ul.list-check001s-blue li {

    padding-left:23px !important;

    line-height:25px !important;    

    background:url(list-check001s-blue.png) no-repeat;

}