【賢威6.2】checklistタグで箇条書きにしたときの見た目を良くしたい

賢威6.2で、checklistタグを使うと箇条書きになるのは便利なのですが、いまいち見た目が気に入らないので、カスタマイズしてみました。良かったら参考になさってください。

賢威6.2で、

<ul class=”checklist”><li>●●●●●</li></ul>

とやったときに、チェックリストができるのは便利なんだけど、
ちょっと格好が悪いので、頑張ってカスタマイズしてみることにしました。


こんな感じ↓ ↓ ↓

WS008923

ね?恰好悪いでしょ?

ちょっと字が小さいのと、間隔が空きすぎてる。
ん~、気に入らない><



コードはこれ
design.cssの660行目あたり。

WS008922

四角で囲んである場合って、
paddingとmarginがわかりにくいですよね~。

基本的なpaddingとmarginについては、
こちらの記事にまとめてみましたのでご覧ください。


この場合、ulタグなので、
普通に四角で囲むタグとは、paddingとmarginの意味が、またちょっと違うみたいなんです。



marginを変えるとこうなる

marginを大きくしてみました。

WS008924


そうするとこうなる。

WS008925


小さくすると、こうなる。

WS008927


なるほど。
行間が変わるらしい。



paddingを変えるとこうなる

padding-leftを大きくしてみた。

WS008928


そうするとこうなる。

WS008929


padding-topを大々的に大きくしてみた。

WS008930


そうしたらこうなった。

WS008931


結局どうしたか?

文字の大きさも変更して、こんなコードになりました。

WS008937

コピペ用

#main-contents ul.checklist li{
margin-bottom: 0.5em;
padding-top: 3px;
padding-left: 24px;
background: url(./images/icon/icon-check01-red.png) left top no-repeat;
list-style-type: none;
font-size: 16px;
}


ちょっとは格好よくなったかな?

WS008932



この記事が役に立ったと思ったらクリックしてね。ららが喜びます。

 

 

 

こんな記事もありますよ☆ぜひ見ていってね!

 


最後まで読んでいただき、ありがとうございました。


ららのブログでは、あなたからの疑問・質問・お問い合わせを大歓迎しています。 こちらからいつでもメールを送ってくださいね。

>>ららにメールを送る

 

 

One Response to “【賢威6.2】checklistタグで箇条書きにしたときの見た目を良くしたい”

  1. そら より:

    こんにちは、そらです^^

    凄いですね!
    こんなカスタマイズも出来てしまうんですね。
    私も賢威でカスタマイズに挑戦中です。

    是非参考にさせてください。
    応援しております。

    またお邪魔致します^^

コメントを残す

サブコンテンツ

このページの先頭へ