コメント記入欄の枠のデザイン変更と、投稿ボタンの色の変更についてです(* ̄∇ ̄*)
/* ----------------------- 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* で、スキンの配布をはじめました。 興味のある方はのぞいてみて下さい。