まいどおおきに!おおもと(@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に細かい箇所の調整をしました。
コピペで簡単JIN風の箇条書きの作り方のまとめ

JINみたく、カワイくできましたでしょうか?
Cocoon(コクーン)はシンプルなデザインで誰でも使いやすいデザインをしていますが、CSSをがっつり触ることで自分だけのオリジナルデザインにすることも出来ます。
自分のブログなので、自分だけのカスタマイズを楽しんでみみてはいかがですか?
ぼくもこのブログで微力ながらお手伝いしますので、これからも流し読みをしていってください。