きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(スタイル編)第 9回 コメントの入力欄の高さを変える♪

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

驚いた ブログ気持玉 2 / トラックバック 1 / コメント 2

トラックバック入力欄に比べると、コメント入力欄の高さが少し狭い感じがします。
コメント入力欄の幅については『第 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;
}







これでニックネームの入力欄もデザインがきちんと表示されて、
コメント入力欄の高さも変えることができました。
広くなってコメントを書き入れる時も快適です♪



それでは、今回はこのくらいで(わら)


|ω・)ノシ See you♪

|彡 サッ




■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 2
驚いた
かわいい

トラックバック(1件)

タイトル (本文) ブログ名/日時
のびたりコナミコマンドだったりなGoogle Chrome
今まで気がつかなかったんですが…(まじ) ...続きを見る
きまぐれAWA's Life
2010/11/10 08:22

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(2件)

内 容 ニックネーム/日時
 この度はご親切にご指導頂きまして
ありがとうございました
 おかげさまで出来ました
そして いろんなこと勉強させて頂きました
  
  心より感謝しております
季節の変わり目なので
 お身体ご自愛くださいますように
   お祈りしております

 本当にありがとうございました
ピーチ
2009/09/22 01:10
ピーチさん、いらっしゃいませ(ん)
わざわざこちらまでおいでいただきどーもです(ぺこ)

お役にたてて良かったです(にこ)
また何かあればお気軽にご相談下さいね〜♪
ではでは、楽しいブログライフがおくれますように(ん)人
mairis
2009/09/22 14:34

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(スタイル編)第 9回 コメントの入力欄の高さを変える♪ きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる