Simplicityの追加CSSにコピペして使うリスト装飾タグ

長年お世話になっている無料のテンプレート「Simplicity」は、文章の装飾も簡単に出来ます。しかしその中に「リスト」の装飾が見当たらないので、他のサイト様を参考にCSSタグを作りました。コピペするだけなので良かったら試して下さい。
Simplicity 改造

スポンサーリンク

無料のテンプレート「Simplicity」

当サイトは、わいひら氏の作った無料の「Simplicity」のテンプレートを使用しています。

このテンプレートは初心者にとても判りやすく作られており、基本的に何もしなくても使えるのですが、少しだけリストの表示をアレンジしてみたくなったのです。

リストタグの装飾

リストといえば、「・」や「1、2、3」など数字が前につくのが基本デザインです。数字に意味があるときは基本の使い方で良いのですが、例えばチェックリストにしたいときには少し工夫が必要になります。

そこでCSSのスタイルシートを色々公開なさっている他サイト様を参考に「Simplisity」のカスタマイズメニューの中にある「独自CSS」に追記して使えるものを作りました。

参考にしたのはこちらのサイトです。ありがとうございます。

Simplicityの追加CSS機能

「Simplicity」は、基本の設定だけで十分に色んなことが出来るようになっていますが、少しだけ改造したいことなどを追記しておけるようになっています。

場所は、「外観」を選び「カスタマイズ」をクリック、そして一番したにある「追加CSS」です。ここにコードを張ればOKです。

CSSを追記した結果

見本のリストをご覧下さい。

チェックリスト

丸の中にチェックが入っているデザインですが、丸ではなく角丸デザインにもできます。

矢印リスト

  • りんご
  • いちご
  • みかん

チェックだけリスト(2017/9/19 追加)

単純にチェックだけの装飾も欲しいと思ったので追加しました(2017/9/19)

  • トマト
  • レタス
  • ピーマン

追記用独自CSSと追加する時の注意

基本的に貼るだけですが、サイトで使用している文字サイズ設定によっては調整が必要になります。

下記のCSSは、「Simplicity」のデフォルトの文字サイズ16pxに合わせて調整してあります。それよりも大きい文字や小さい文字の場合は微調整してください。赤背景ではなく青背景に変更することも出来ますので、お好きなようにアレンジして下さい。
独自に追加したCSSが多すぎると、ページの読み込み速度が遅くなるそうです。軽いページを維持したい方は必要の無い装飾は取り除いた方が良いと思います。

コピペ追記用CSSタグ

カスタマイズメニューから「追加CSS」に入って以下のCSSを追記してください。

チェックだけの装飾を追加しました(2017/9/19)

/*
チェックリスト
*/
ul.check li{
	list-style:none;
	padding-left:24px;
	position:relative;
}
ul.check li:before,
ul.check li:after{
	content:"";
	display:block;
	position:absolute;
}
ul.check li:before{
	width:16px;/*丸のサイズ*/
	height:16px;/*丸のサイズ*/
	border-radius:8px;/*丸を角丸にする時は数字を小さくする*/
	background:#dc143c;/*丸の色*/
	left:0;top:6px;/*丸の位置*/
}
ul.check li:after{
	border-left:2px solid #fff;
	border-bottom:2px solid #fff;
	width:6px;
	height:3px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:4px;/*チェックの位置*/
	top:10px;/*チェックの位置*/
}
/*
チェックだけリスト
*/
ul.check-only li{
	list-style:none;
	padding-left:20px;
	position:relative;
}
ul.check-only li:before,
ul.check-only li:after{
	content:"";
	display:block;
	position:absolute;
}
ul.check-only li:before{
	width:16px;/*丸のサイズ*/
	height:16px;/*丸のサイズ*/
	border-radius:8px;/*丸を角丸にする時は数字を小さくする*/
	background:#fff;/*丸の色(背景色と合わせます)*/
	left:0;top:6px;/*丸の位置*/
}
ul.check-only li:after{
	border-left:3px solid #dc143c;
	border-bottom:3px solid #dc143c;
	width:8px;
	height:4px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:4px;/*チェックの位置*/
	top:9px;/*チェックの位置*/
}
/*
矢印リスト
*/
ul.arrow-list li{
	list-style:none;
	padding-left:1.5rem;
	position:relative;
}
ul.arrow-list li:before,
ul.arrow-list li:after{
	content:"";
	display:block;
	position:absolute;
}
ul.arrow-list li:before{
	width:15px;height:15px;
	border-radius:2px;
	background:#dc143c;/*四角の色*/
	left:0;
	top:7px;/*四角の位置*/
}
ul.arrow-list li:after{
	border:4px solid transparent;
	border-left-color:#fff;
	left:6px;
	top:10px;/*矢印の位置*/
}

記事内への記述の仕方

以下のように記述します。

チェックリストの場合

<ul class="check">
<li>猫</li>
<li>犬</li>
<li>鳥</li>
</ul>

矢印リストの場合

<ul class="arrow-list">
<li>りんご</li>
<li>いちご</li>
<li>みかん</li>
</ul>

チェックだけリストの場合(2017/9/19追加)

<ul class="check-only">
<li>トマト</li>
<li>レタス</li>
<li>ピーマン</li>
</ul>

最後にひとこと

大した知識もない素人ですが作ってしまいました。特に問題は無いと思うのですが、一応自己責任で使って下さい。何かありましたらすぐに使用中止することをおすすめします。

ここまでお読み下さり、ありがとうございました。