アフィピク登録

【賢威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


この記事を読んだあなたには、こちらの記事もオススメです☆

 

パソコン操作のこと。アフィリエイトのこと。
どんなことでも気軽にいつでも、ららに聞いていただける環境をご用意しました。 これでもう、ひとりで悩まずに済みますよね。詳細はこちらをご覧ください。
>>会員制メールサポート「らら組」

 

この記事はいかがでしたか?
ららは、あなたのお役にたてる記事の配信を心がけています。 「こんな記事を書いてほしい」「聞いてみたいことがある」 そんな場合は、こちらからいつでもメールを送ってください。
>>ららにメールを送る

 




最後まで読んでいただき、ありがとうございました。
このブログを「いいな」と思ったら、
下の白いボタンを、1回クリックしてくださいね。
ららに一票入って、人気ブログランキングに飛びます
↓ ↓ ↓

ありがとうございます☆ あなたの1票が、励みになってます^^

 

↑ この動くアバターは、こちらで作っていただきました。
あなたのアバターに命を吹き込む「四次元アバター」

 

「ユーザーが求める記事を書くこと」
「ちゃんと読んでもらえる役立つ記事を書くこと」
それが今、Googleに求められている、上位表示されるサイトの条件です。
あなたのブログは大丈夫ですか?記事がつまらなくて、せっかくの報酬を逃していませんか?
そうならないためには、正しい記事の書き方を勉強することが重要です。
満足度98%、ブログ初心者さん向け、読者に読まれる記事の書き方が学べます。
>>関連記事はココをクリック

 

One Response to “【賢威6.2】「checklist」で箇条書きにしたときの見た目が格好悪いから修正してみた”

  1. そら より:

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

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

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

    またお邪魔致します^^

コメントを残す

サブコンテンツ

このブログについて

プロフィール

情報商材アフィリエイト

ららです。
高校生と中学生の2人の子供がいる、40代主婦です。
主婦業・母親業をやりながら、隙間時間でアフィリエイトを実践し、
月6ケタの目標を達成することができました。

あなたと同じ目線の、安心できるブログを目指してます。
お気軽にメールくださいね。

詳しいプロフィールと実績はこちら




応援よろしくね♪

メールはお気軽に


ららに相談したいことなどがありましたら、お気軽にどうぞ。
些細なことでもアホらしいことでも、大歓迎です♪
>>ららにメールを送る

カテゴリー

YouTubeやってます

このバナーをクリックして、
チャンネル登録してください♪


ららの愛用品

サーバーやらドメインやらパソコン回りの品など…。ららはいったい何を使っているの?
実際に使っている物をご紹介します。
ららの愛用品ご紹介

相互リンクについて

2015年10月をもちまして、相互リンクのページは終了いたしました。
理由は
・昨今のSEO事情では、相互リンクが有益ではないこと
・リンク先の閉鎖が相次ぎ、機能を果たさなくなったこと
です。
相互リンクしていただいたブログ様、長いあいだありがとうございましたm(_ _)m

このページの先頭へ