<< 以前の記事のリンクの整理方法の一例 投稿欄にNewの表示を パート2 >>
 

初心者のためのコメント欄のおしゃれ注意予報

はじめに

コメント欄を広げたり、コメント入力欄にイメージを挿入して楽しむ場合、TEXTAREA.TXTFLDに対して行うのが定石ですが、.TXTFLDに対して行うとログインしていない状態で、図1にように全てのINPUT入力欄が広がったり、イメージが挿入されるなどします。(検索窓も.TXTFLDです。)

でも、気がつき難いですよね。今回はこのようになった場合の修正方法です。

a0031863_23125146.gif

図1 .TXTFLDに指定した場合



修正前(NG)

以下の用に.TXTFLDに対して高さを広げたり、イメージを指定すると図1のような状態になります。(まちがってこちらをコピー&ペーストしないようにして下さい。)


.TXTFLD{
FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:#FFF;

height:15em;
background-image:url(イメージURLアドレス);
background-position:right;
background-repeat:no-repeat;
}




修正後

.TXTFLDで指定していた内容を取り除いて、TEXTAREA.TXTFLDに対して指定を行って下さい。指定の一例は以下の通りです。


修正後

.TXTFLD{

FONT-SIZE:9PT;
COLOR:#000;
BORDER:1PX SOLID #666678;
BACKGROUND:#FFF;

}

TEXTAREA.TXTFLD{

height:15em;
background-image:url(イメージURLアドレス);
background-position:right;
background-repeat:no-repeat;

}


正しく指定ができると図2のようになります。

a0031863_23351490.gif

図2 TEXTAREA.TXTFLDで設定した場合



今日のポイント
  • コメント欄を広げたり、コメント入力欄にイメージを挿入する場合は、TEXTAREA.TXTFLDに指定をします。.TXTFLDに指定すると、入力欄全てに影響するため今回のような現象が発生します。
  • ログアウトして確認することも忘れずに。意外と気がつき難いです。

  • 今回は説明のため、自分で素材を作成することにしました。素材を説明のためスクリーンショットを取り込んでブログ等でアップして公開すると、素材の加工とみなされるためです。なお、当サイトは以前からアップしてある説明用画像は素材屋さんに掲載許可を頂いて公開をしています。



[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-07-09 09:25 | │├コメント欄
<< 以前の記事のリンクの整理方法の一例 投稿欄にNewの表示を パート2 >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。