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

まいどおおきに!おおもと(@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をがっつり触ることで自分だけのオリジナルデザインにすることも出来ます。

自分のブログなので、自分だけのカスタマイズを楽しんでみみてはいかがですか?

ぼくもこのブログで微力ながらお手伝いしますので、これからも流し読みをしていってください。

この記事をシェアする

クリックして応援♪

このブログはSWELLで出来ています!

SWELLレビュー
  • 簡単におしゃれな文章が作れる
  • マウスだけで簡単におしゃれなブログを作れる
  • テーマ製作者に事を気軽に聞ける環境
  • 簡単に収益化ができる仕組みを搭載
当ブログもSWELLで出来ています!
気になる人は公式サイトを覗いて見てくださいね♪

コメントを書いて応援♪

コメントする

CAPTCHA

もくじ
閉じる