お仕事の依頼はココをクリック
スポンサーリンク
スポンサーリンク

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

Cocoon
スポンサーリンク

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

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

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

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

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

【CSSカスタマイズ】コクーンで使えるCSSを追加するオススメの方法
有料級のワードプレス無料テーマCoccon(コクーン)のCSSカスタマイズ記事のまとめと、CSSを追加する方法を記載した記事です。 古いカスタマイズから新しいものまで、まとめてますので流し読みをしてください。
ワードプレスプラグインは「7つ」だけでOK!必須プラグインを紹介するよ!
プラグイン必須でググったら、「プラグインおすすめ30選」とか出てきてエグいですね プラグインを入れすぎると、最悪ブログが飛びますよ! この記事は、7つの必須プラグインを紹介する記事です。 プラグインが減らせない人のための解決作も紹介してるのでぜひ読んでくださいね。
スポンサーリンク

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

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

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

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

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

【CSSカスタマイズ】コクーンで使えるCSSを追加するオススメの方法
有料級のワードプレス無料テーマCoccon(コクーン)のCSSカスタマイズ記事のまとめと、CSSを追加する方法を記載した記事です。 古いカスタマイズから新しいものまで、まとめてますので流し読みをしてください。
ワードプレスプラグインは「7つ」だけでOK!必須プラグインを紹介するよ!
プラグイン必須でググったら、「プラグインおすすめ30選」とか出てきてエグいですね プラグインを入れすぎると、最悪ブログが飛びますよ! この記事は、7つの必須プラグインを紹介する記事です。 プラグインが減らせない人のための解決作も紹介してるのでぜひ読んでくださいね。

本日の記事はこれで終わりです。じゃあ!また!

おおもと
おおもと

質問などがあれば、コメント覧に書き込んでくださいね!

- Comments -

タイトルとURLをコピーしました