CSS（スタイル編）第９回コメントの入力欄の高さを変える♪ きまぐれAWA's Life/ウェブリブログ

CSS（スタイル編）第９回コメントの入力欄の高さを変える♪

<< 作成日時： 2008/02/17 11:34 >>

トラックバック 0 / コメント 0

トラックバック入力欄に比べると、コメント入力欄の高さが少し狭い感じがします。
コメント入力欄の幅については『第 7回ブログの幅を広げてみよう♪』で書きました。
今回はそれに高さの調整を加えます。

☆　狭くない？

　コメント入力欄の高さを広げてみよう ♪ 　

入力する場所は『/* フォームフィールド */』
ここで注意することは背景画像・背景色、枠線等を指定しているかどうかです。

　背景画像・背景色、枠線等を指定していない場合

『 #blog textarea{ 』の後に次の文字列を入力します。

height: 12em;

ここで、

#blog input.txt,
#blog textarea{
}

…と、このようになっている時には『#blog input.txt,』の部分を削除してください。
これは『#blog input.txt,』がニックネームの入力欄のデザインを指定するようになっているためです。
『#blog input.txt,』をそのままで高さの指定をしてみると…

☆　あらら…

これでは困りますね。
※削除の際には元に戻せるようにバックアップは忘れずに。
『height: 12em;』はトラックバック入力欄と同じ高さになりますが、
コピーされる際は数値をお好みで変えてください♪

　 C 『記事ページ』　 CSS 全体Map

/* フォームラベル */
#blog #trackback dt,
#blog #comment dt{
}

/* フォームフィールド */

#blog textarea{
height: 12em;
}

これでコメント入力欄が広くなりました（ん）

☆　コメント入力欄が広がりました♪

　背景画像・背景色、枠線等を指定している場合

背景画像・背景色、枠線等を指定している時には少し手を加える必要があります。
上記のように『height: 12em;』を加えるだけでは…

☆　あらら？

ニックネームの入力欄のデザイン指定が解除されてしまいます。
このため『ニックネームの入力欄』と『コメントの入力欄』のデザインを個別に指定します。　

#blog input.txt,
#blog textarea{
}

この部分を以下の文字列に置き換えます。

#blog input.txt{
background-image:url(画像のURL);
background-color:#FFEEEE;
border:1px #FFCCFF solid;
}
#blog textarea{
background-image:url(画像のURL);
background-color:#FFEEEE;
border:1px #FFCCFF solid;
height: 12em;
}

うちのブログのデザイン指定は以下通り。
　背景画像：背景に使ったのと同じ画像
　背景色：薄いピンク
　枠線：枠全体に 1px のピンクの実線

※背景画像、背景色、枠線などはデザインを指定しているものだけ追加すればオーケーです。
コピーする場合には画像、色等はお好みで変更してください。

　 C 『記事ページ』　 CSS 全体Map

/* フォームラベル */
#blog #trackback dt,
#blog #comment dt{
}

/* フォームフィールド */
#blog input.txt{
background-image:url(画像のURL);
background-color:#FFEEEE;
border:1px #FFCCFF solid;
}
#blog textarea{
background-image:url(画像のURL);
background-color:#FFEEEE;
border:1px #FFCCFF solid;
height: 12em;
}