【賢威5.0】WordPress でチェックリストの色を変更する

写真素材 PIXTA
(c) YsPhoto写真素材 PIXTA
賢威では、リストタグで <ul class="checklist"> を指定すると、青色のチェックリストアイコンがデフォルトで表示されるようになっています。

このチェックリストアイコンの色を、そのときに応じて変化させる方法をご紹介します。



たとえば、以下のように記述したとします。

<ul class="checklist">
<li>りんご</li>
<li>バナナ</li>
<li>みかん</li>
</ul>


そうすると、WordPress 上では以下のように表示されます。

  • りんご
  • バナナ
  • みかん

賢威の設定を変更することで、このように表示させることができるようになります。

  • りんご
  • バナナ
  • みかん

スタイルシートの記述を変更する

このブログは、WordPress 賢威クール版(白)を使用していますので、
この場合、cool-whiteg●●.css を編集します。

デフォルトチェックリストアイコンの色を変更する

“#main-contents ul.checklist li” を記述を探します。
WordPress 賢威クール版(白)の場合、684 行目付近にあります。

#main-contents ul.checklist li{
padding-left: 24px;
background: url(images/icon/icon-check02-blue.png) no-repeat 0 8px;
line-height: 2.5em;
}

この記述から、リストタグを <ul class="checklist"> で指定すると、青色のチェックリストアイコンが表示されることが分かります。

賢威には、赤・青・緑・黒の 4 色のチェックリストアイコンが用意されていますので、デフォルトチェックリストアイコンの色を変更したい場合は、icon-check02-blue.png の blue 部分を変更することになります。

デフォルトチェックリストアイコンをに変更したい場合
icon-check02-blue.png ⇒ icon-check02-red.png

デフォルトチェックリストアイコンをに変更したい場合
icon-check02-blue.png ⇒ icon-check02-green.png

デフォルトチェックリストアイコンをに変更したい場合
icon-check02-blue.png ⇒ icon-check02-black.png

このブログではデフォルトチェックリストアイコンを赤に設定しています。^^

チェックリストアイコンの色を個別に指定する

普段は一色だけで問題ないけど、場合によっては
異なる色のチェックリストアイコンを使いたい…

そういう場合は、li 要素を個別に指定することにより、
チェックリストの色に変化をつけることが可能です。

#main-contents ul.checklist li{
padding-left: 24px;
background: url(images/icon/icon-check02-red.png) no-repeat 0 8px;
line-height: 2.5em;
}

先ほど探していただいた記述です。
このブログに合わせて、デフォルトチェックリストアイコンは赤に変更しています。

この記述の下に、以下の記述を追加します。
デフォルトチェックリストアイコン以外の色を指定します。

#main-contents ul.checklist li.listblue{
background-image: url(images/icon/icon-check02-blue.png);
}

#main-contents ul.checklist li.listgreen{
background-image: url(images/icon/icon-check02-green.png);
}

#main-contents ul.checklist li.listblack{
background-image: url(images/icon/icon-check02-black.png);
}

デフォルトチェックリストアイコンは赤を設定しているので、<ul class="checklist"> で大まかに指定すると、li 要素はすべて赤で表示されますが、<li class="listblue"> というように、li 要素を個別に指定することによって、アイコンの色を変更することができるようになります。

上記の記述を追加したあとで、以下のように記述してみます。

<ul class="checklist">
<li>りんご</li>
<li class="listblue">バナナ</li>
<li class="listgreen">みかん</li>
<li class="listblack">おやつ</li>
</ul>


すると、WordPress 上ではこう表示されます。

  • りんご
  • バナナ
  • みかん
  • おやつ

チェックリストの異なった色を毎回使うことはないと思いますが、
たまに使いたいときには便利ですので、もしよろしければご利用ください。

あわせて読んでおきたい記事

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

タグ


トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ