コメント記入欄の枠のデザイン変更と、投稿ボタンの色の変更についてです(*￣∇￣*)
/* ----------------------- MainColumn ----------------------- */
・
・ ← 長いので省略します。
・
・
#comment_module label{
display: block;
float: left;
width: 70px;
text-align: right; ← 「light(右)」を「ｌｅｆｔ(左)」に変更します。 （参照①）
}
#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; ← 「投稿する」ボタンの「投稿する」と言う文字を少しさげます。 （参照③）
}
＜参照①＞
（ＣＳＳ編集－９）コメント記入欄のカスタマ で、コメント記入欄の幅の変更を解説していますが、
ここを変更すると、「名前：」「ＵＲＬ：」「タイトル：」「コメント：」の文字のバランスが
悪くなってしまっています。
「ｌｉｇｈｔ」→「ｌｅｆｔ」に変更することによりバランスよくなります。
ちなみに、text-align: light; を削除してもかまいません。
「ｌｉｇｈｔ」→「ｌｅｆｔ」に変更したものと同じ状態になります。
＜参照②＞
border: 1px dotted #cc3366; → 枠線を １ｐｘ（太さ） ｄｏｔｔｅｄ（点線） #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￣ ￣)ポリポリ
「投稿する」ボタンの「投稿する」って文字、枠の中で、ちょっと上すぎると思いませんか？
前から、気になってて・・・・・（笑）
３ｐｘ下げることで、バランスがいいかな？と、私なりにすっきりしました。
キニナル方は、お試しください♪
★上記を参考にして、「メニューリストの中のブログ内検索」もカスタマっ！！
/* ----------------------- 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* で、スキンの配布をはじめました。 興味のある方はのぞいてみて下さい。