(CSS編集-12)コメント記入欄のカスタマ②

テーマ:

コメント記入欄の枠のデザイン変更と、投稿ボタンの色の変更についてです(* ̄∇ ̄*)


/* ----------------------- MainColumn ----------------------- */
      ・

      ・ ← 長いので省略します。

      ・ 

      ・  

#comment_module label{
display: block;
float: left;
width: 70px;
text-align: right; ← 「light(右)」を「left(左)」に変更します。 (参照①)
}
#f_name,#f_url,#f_title,#f_com{
display:inline;
width: 250px;
margin-bottom: 3px;
margin-left: 6px;

border: 1px dotted #cc3366; ← これを追加します。 (参照②)
}
#comment_module form ul {
width: 340px;
margin-left: auto;
margin-right: auto;
}
#comment_module form li {
display: block;
width: 340px;
margin-bottom: 5px;
}
#comment_module li.lastItem {
display: block;
width: 330px;
margin-bottom: 5px;
text-align: right;
}
#comment_module .button {
margin-left: 5px;
font-size: 11px;
width: 80px;

background-color : #cc3366 ;  ←これを追加します。「投稿する」ボタンに色をつけます。
color : #ffffff ; ← 「投稿する」ボタンの文字の色が変わります。

padding-top: 3px; ← 「投稿する」ボタンの「投稿する」と言う文字を少しさげます。 (参照③)

}


<参照①>

 (CSS編集-9)コメント記入欄のカスタマ で、コメント記入欄の幅の変更を解説していますが、

 ここを変更すると、「名前:」「URL:」「タイトル:」「コメント:」の文字のバランスが

 悪くなってしまっています。

 「light」→「left」に変更することによりバランスよくなります。

 ちなみに、text-align: light; を削除してもかまいません。

 「light」→「left」に変更したものと同じ状態になります。


<参照②>

 border: 1px dotted #cc3366; → 枠線を 1px(太さ) dotted(点線) #cc3366(カラーコード)

 と言う意味になります。

 

 ちなみに線の種類は

  破線 → dashed 実線 → solid 点線 → dotted  二重線 → double 
  へこんだように見える線 → groove   浮き上がったように見える線 → ridge

 

 border: ← 枠線全体を意味します。 と言う事は・・・・・


 border-top:  ← 上の線

 border-right: ← 右の線

 border-bottom: ← 下の線

 border-left:  ← 左の線     になります。


 (例)上下が実線の赤、左右が点線の青の場合 

        border-top: 1px  solid #ff0000 ;

      border-right: 1px dotted #0000ff ;

      border-bottom: 1px  solid #ff0000 ;

      border-left: 1px dotted #0000ff ;  


   線の上下左右の順番は決まっていません。

    上・下・左・右 とか、右・下・上・左の順番でも大丈夫です。

    部分的に線を指定したい場合は、その部分だけを書き込みます。

    例えば、上と右だけとか、上と下だけとか。

    

 これを指定することによって、色々なデザインが楽しめますよ♪


<参照③>

 これはあくまでも私が気になったので・・・ (6 ̄  ̄)ポリポリ

 「投稿する」ボタンの「投稿する」って文字、枠の中で、ちょっと上すぎると思いませんか?

 前から、気になってて・・・・・(笑)

 3px下げることで、バランスがいいかな?と、私なりにすっきりしました。

 キニナル方は、お試しください♪


★上記を参考にして、「メニューリストの中のブログ内検索」もカスタマっ!!


/* ----------------------- each menu setting ----------------------- */
      ・

      ・

      ・ ← 長いので省略しました。

      ・

      ・

/#calendar td a {
color:#CC0000;
text-decoration: underline;
}
/*theme_list*/
/*recent_entries*/
/*archives*/
/*search*/
#search form{
margin-top: 7px;
margin-bottom: 7px;
}
#search .searchbox{ ← 「ブログ内検索」の『枠』の情報
width: 100px;

border: 1px solid #cc3366; ← 追加します
}
#search .searchbtn{ ← 「ブログ内検索」の『検索』ボタンの情報
width: 40px;

color : #ffffff ; ← 追加します
padding-top: 3px;  ← 追加します

}


デザインスキンは「グリーン」「ピーチ」「グレー」「ブルー」を基本に解説しています。


サンプルは *Sweet Bubble Skin* を見てください(*^-^*)


*Sweet Bubble Skin*  で、スキンの配布をはじめました。 興味のある方はのぞいてみて下さい。

AD