Cocoon｜コピペで簡単JIN風のカワイイ箇条書きを作ってみた！

2020 8/23

2018.08.19 2020.08.23

URL Copied!

まいどおおきに！おおもと(@so88qa)です。

この記事は、ワードプレス無料テーマCocoon(コクーン)のコピペでできるカスタマイズ記事です。

今回ご紹介するのは、JIN風のカワイイ箇条書きの作り方です！

だれでも簡単コピペで出来るカスタマイズを紹介しています。

コピペでここまでコクーンの箇条書きが変わる！

画像付きでどう変わったのかお伝えしますね〜（画像をクリックすると拡大されます。）

Cocoon(コクーン)の標準箇条書きはコチラ

可もなく不可もなくの、普通のデザイン

その普通のデザインをカワイくしてみました！

ボクのブログのサブカラーのピンクを採用してみました！

どうですか？カワイイでしょ(￣ー￣)

せっかくユーザーのための箇条書きなのに、全く目立たないものだったら勿体無いでしょ？

それならと、カワイくしてしまおうと思ってやってみたらできました。

ぼくのように、カワイくしたい人は次のCSSコードをコピペしてね！

コピペで簡単｜箇条書きのCSSコードはこれだ！

/*箇条書き変更*/

.toc a{
	display: inline-block;
	margin-left:1em;
}
ul li,ol li{
	list-style: none;
}

#main ul li {
	line-height: 1; 
	padding: .5em 0; 
	position: relative;
}

#main ul li::after{
	display: block;
	content: '';
	position: absolute;
	top: .8em;
	left: -1em;
	width: 8px;
	height: 8px;
	background-color: #f8acac;
	border-radius: 100%;
}

#main ol{
	counter-reset:number;
}

#main ol li:before{
	counter-increment: number; 
	content: counter(number);
	background-color: #f8acac;
	color: #fff;
	display: inline-block;
	left:3em;
	position: absolute;
	text-align: center;
	line-height: 24px;
	height: 24px;
	width: 24px;
	border-radius: 100%;
}
.article ol li {
	padding-left:2em;
}

8/22に細かい箇所の調整をしました。