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

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

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

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

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

Cocoon(コクーン)のカスタマイズの参考にしてくださいね！（コメント・ツイッターの方にDMをいただければ質問にも常時お答えしてます。）

【CSSカスタマイズ】コクーンで使えるＣＳＳを追加するオススメの方法

有料級のワードプレス無料テーマCoccon（コクーン）のCSSカスタマイズ記事のまとめと、ＣＳＳを追加する方法を記載した記事です。古いカスタマイズから新しいものまで、まとめてますので流し読みをしてください。

ワードプレスプラグインは「７つ」だけでOK！必須プラグインを紹介するよ！

プラグイン必須でググったら、「プラグインおすすめ３０選」とか出てきてエグいですねプラグインを入れすぎると、最悪ブログが飛びますよ！この記事は、７つの必須プラグインを紹介する記事です。プラグインが減らせない人のための解決作も紹介してるのでぜひ読んでくださいね。

クリックできる目次

コピペでここまでコクーンの箇条書きが変わる！
コピペで簡単｜箇条書きのCSSコードはこれだ！
コピペで簡単JIN風の箇条書きの作り方のまとめ

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

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

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

番号の箇条書き⤵︎

ボッチの箇条書き⤵︎

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

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

番号の箇条書き⤵︎

ボッチの箇条書き⤵︎

おおもと

同じものでも全然イメージが違う・・・

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

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

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

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

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

Webコピーライティングの新常識ザ・マイクロコピー | 山本琢磨 | 工学 | Amazon.co.jpホーム | Amazon

Amazonで山本琢磨の{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。

コピペで簡単｜箇条書きの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に細かい箇所の調整をしました。

おおもと

質問があればツイッターやコメントで教えてね！