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

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

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

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

Simplicity

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

wp-simplicity.com

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

わいひら氏のCocoonへ変更（2018/8/8）

長年、当サイトはわいひら氏の「Simplicity」を使ってきましたが、後継とされている「Cocoon」にテンプレートを変更しました。

Cocoon

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。

wp-cocoon.com

それに伴い、ここで紹介している装飾タグを「Cocoon」の子テーマに張ってみた所、そのまま使えました。しかし文字サイズによりやはり微調整が必要だと思うので、それは各々でやってみて下さい。

しかし、私は「Cocoon」への変更を機会に「Cocoon」のリスト装飾を利用することにしました。皆さんは「Cocoon」での見え方と比較して、どちらかを選ぶと良いでしょう。

リストタグの装飾

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

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

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

http://commonsense-design.com/web/css-decoration/

commonsense-design.com

Simplicityの追加CSS機能

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

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

CSSを追記した結果

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

チェックリスト

• 猫
• 犬
• 鳥

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

「Cocoon」での表示（2018/8/8　追記）

矢印リスト

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

「Cocoon」での表示（2018/8/8追記）

チェックだけリスト（2017/9/19 追加）

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

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

「Cocoon」での表示（2018/8/9追記）

ご覧の通り、「Cocoon」ではビジュアルエディターで囲むだけでこのような強調したデザインにすることが出来ます。勿論それぞれの項目にチェックを入れたい人もいるでしょうから、独自CSSを使うのも良いでしょう。

ただ私は楽をしたいのとこちらの見栄えの方が気に入ったので、今後はこの機能を上手に使いたいと思います。

「Cocoon」の拡張デザインについて詳しく知りたい方は、「Cocoon」の解説へどうぞ。

拡張スタイル「タブボックス」の表示サンプル

ビジュアルエディターで記事作成時に手軽に文章を彩ることができるタブボックス拡張クラスの使い方見本です。ブランクボックスにタブがついたスタイルになっています。

wp-cocoon.com

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

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

コピペ追記用CSSタグ

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

チェックだけの装飾を追加しました（2017/9/19）
表示位置に納得がいかなかったので、ほんの少しだけ数値を調整しなおしました（2017/9/24）

/*
チェックリスト
*/
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:6px;/*四角の位置*/
}
ul.arrow-list li:after{
	border:4px solid transparent;
	border-left-color:#fff;
	left:6px;
	top:9px;/*矢印の位置*/
}

記事内への記述の仕方

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

チェックリストの場合

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

最後にひとこと

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