<< 以前の記事のリンクの整理方法の一例 投稿欄に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 | │├コメント欄 | Trackback | Comments(27)
トラックバックURL : http://potto.exblog.jp/tb/2082242
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Commented by fullcolor38 at 2005-07-09 19:39
こんにちは、お久し振りです(^-^)

私もしばらくの間気付かずにいて、初めて見たときには「どこか壊れてるのか?」なんて慌てましたが...原因が分かっても「これは仕方が無いのかな」と諦めておりました。

早速やってみようと思います。ありがとうございました<(_ _)>
Commented by potto37 at 2005-07-09 23:55
こんばんは、お久しぶりです^^
コメントありがとうございます。(コメントもらえると嬉しいですね。)
この現象って、ログインしてることが多いから気がつきにくいですよね。
でも、何かのヒントになって嬉しいです^^
Commented by peko55665 at 2005-07-24 22:22
ポットさん、模様替えされたのですね。
さて、度々申し訳ありませんが、また教えていただきたいのです。
文字を点滅させたいのですが、どうすればよいでしょうか?
過去ログにあるかもしれないと思い、先程から、こちらをウロウロしてたのですが、見つけられませんでした。
ご面倒をおかけしますが、教えていただけると嬉しいです。
ヨロシクお願いします。
Commented by potto37 at 2005-07-25 23:57
peko55665さんへ

文字を点滅については、以下のアドレスが参考になると思います。
あとは、Googleなどで検索されるいろいろな情報が入手できると思います。
http://www.tohoho-web.com/html/blink.htm
Commented by peko55665 at 2005-07-26 02:25
そっそく、お返事いただいてありがとうございました。
早速、色々試してみました。
Commented by apple-of-1000 at 2005-08-20 01:28
はじめまして(^-^ゝ
私はスキン編集をはじめたばかりなのですが、この記事を参考に、コメント記入欄に画像を表示するようにしましたところ、コメントしてくださる方が増えました♪
とってもうれしいです〜♪ありがとうございました!!
またこれからも時々寄らせて頂きますので、よろしくお願いします♪
Commented by potto37 at 2005-08-20 21:27
apple-of-1000さん、はじめまして。
コメント欄のおしゃれには、そんな効果もあったのですね。
なんだか嬉しいですね。
こちらこそ、よろしくお願いします。
Commented by ai_stitch at 2005-09-23 21:55
初めまして(^^ aiと申します。
こちらの記事でなんとか画像を入れることが出来ました!
めちゃくちゃ望んでたことなので、凄く嬉しいです(≧▽≦)
ありがとうございました☆
PS:勝手ながら、リンクさせて頂きますが宜しいですか??
Commented by potto37 at 2005-10-02 21:33
aiさん、はじめまして。
お役に立ててうれしいです。
リンクありがとうございます。
これからも、ゆっくり遊びに来て下さいね。
Commented by valkyriefl at 2005-11-09 18:21
始めまして。
この記事のオカゲでコメント欄いじりができるようになりました。
ずっとスタイルシートを弄ってあーでもない、こーでもないとやって、TXTFLDの存在には気づいてはいたんですがTEXTAREAはここを見るまで全く気づきませんでした。感謝感謝です^^
Commented by potto37 at 2005-11-09 22:59
valkyrieflさん、はじめまして。
お役に立てたようで、うれしいです。
TEXTAREAは気がつき難いですよね。でも、上手くできたみたいで良かったです^^
Commented by rinscafe at 2005-12-21 02:43
potto37さん、初めまして!凛といいます。
スキンの編集方法やコメント欄の広げ方などを探しているときに
pekoさんのところでこちらを知りました。知りたかったことがわかりやすく
丁寧に説明されているので夢中で読んでしまいました。
まだ自分のブログのカスタマイズには全然着手できていませんが、
冬休みにチャレンジしたいと思っています。
ちょくちょく遊びに来てもいいですか?これからもよろしくお願いします<(_ _)>
初めましてのご挨拶でした。   
Commented by potto37 at 2005-12-21 21:08
凛さんはじめまして。
コメントありがとうございます。(コメントうれしいです^^)
いつでも遊びに来てくださいね。
のんびりペースで記事を書いているので、ゆっくりですが
楽しんで下さいね。
こちらこそよろしくお願いします。


Commented by rinscafe at 2005-12-22 13:31
potto37さん、お返事ありがとうございました。
カスタマイズの「カ」にも到達できていませんが・・・

私はマニュアルが苦手なのですが、そうも言っていられないなあと、
Potto37さんのスキン編集のところを印刷して1冊のファイルにまとめ
ました。potto37さんの技を参考に頑張ってみたいと思います。
カッコ良くお化粧が終わったら、「見てくださ~い」とお知らせしますね(笑)

差し支えなければ、リンクを貼らせて頂きたいのですがどうでしょうか?
そのくらいすごく気に入ってしまったのです。ここには知りたい事が全部載ってるので。
不都合でしたら勿論その旨一言頂ければリンクは貼りません。
お手すき時にコメント下さいね。よろしくお願いします。

凛でした。

Commented by potto37 at 2005-12-22 22:14
凛さん、こんにちは。
リンクありがとうございます。私のところはリンクは自由なので、
気楽にリンクしてくださいね。
スキン編集は楽しいので、ゆっくり楽しんでくださいね。

Commented by rinscafe at 2005-12-23 10:06
おはようございます。お言葉に甘えて、リンク貼らせて頂きました。
最初にコメント欄を広げることから頑張って見たいと思っています。
お忙しいのにレスコメントありがとうございました。嬉しかったです。 凛より。

Commented by potto37 at 2005-12-24 07:44
凛さん、おはようございます。
リンクありがとうございます。
いろいろと遊んで下さいね。
Commented by yuzu-wasa at 2006-02-16 16:39
ぽっとさん、はじめまして。yuzu-wasaと申します。
スキン初心者で、どうやったら、アレンジできるんだろう?と探すうちにこちらにたどりつきました。
まずはコメント欄から挑戦してみようと、やること十数回、やっとできましたっ!とっても嬉しかったです!
他の欄も読ませて頂いて楽しみながらどんどんチャレンジしたいと思っています。(肩凝りになりますが‥(笑))
ぶしつけながら、ファンとしてリンクさせてください♪
これからもお世話になりますm(_"_)m ありがとうございました!
Commented by potto37 at 2006-02-16 20:51
yuzu-wasaさん、はじめまして。
いろいろあるブログから見つけて頂いてありがとうございます。
そしてリンクありがとうございます。
とっても嬉しいコメントで、ちょっと今日は楽しくなって来ました^^
こちらこそ、よろしくお願いします。
Commented by yu222Y at 2006-09-29 20:00
ぽっとさん、はじめまして!

マイスキン作りに挑戦しようと、エキサイトブログ内を検索した時に
ぽっとさんのブログにたどり着きました。
とてもわかりやすい説明で、初めて編集にチャレンジした私にもアレンジすることができました。
とても感謝しています。
ありがとうございました!!
これからもちょっとずつアレンジしていこうと思っているので、
また参考にさせてください(^^)
ブログをリンクさせていただいてもいいですか?
これからもまた勉強しに伺います♪(^^)
Commented by potto37 at 2006-09-30 21:01
yu222Yさん、はじめまして。
マイスキンおめでとうございます。
自分の思うようにできるとうれしいですよね。
いろいろと、アレンジして楽しんでくださいね。

リンクありがとうございます。
こちらこそ、よろしくお願いします^^
Commented by e_8667354 at 2007-03-16 19:26
こんにちは、はじめまして。
スキン編集の記事を参考にさせて頂き、ありがとうございます。
HTMLは理解できない私ですが、切ったり貼ったりしてなんとか自分好みのスキンが出来たと思っていたのですが…。
ログインしている時は分からなかったのですが、名前とURL入力部分の文字色が背景と同じになってしまい見えません。
検索窓は気づいていたのですが、まぁ良いか~と(苦笑)
いろいろやってみたのですが、どうしても出来ません。
ほっとさん、教えて下さい。
お忙しいところ申し訳ありませんが宜しくお願い致します。
Commented by potto37 at 2007-03-17 02:14
はじめまして
.TXTFLDの背景色と文字色が同じなのでこのような現象が起こっています。従って以下の項目を次のように変更すると解消すると思われます。

【変更前】
.TXTFLD { color: #f3f3f2; font-size: 11px; background-color: #f3f3f2; border: solid 1px #f3f3f2 }

【変更後】
.TXTFLD { color: #000000; font-size: 11px; background-color: #f3f3f2; border: solid 1px #f3f3f2 }
Commented by e_8667354 at 2007-03-17 08:30
ぽっとさん、おはようございます
出来ました~。
お忙しい中、早速のコメントありがとうございました。
ユーザーでない友人からコメント出来ないと言われ悩むこと数周間でした。
おもいきってお願いしてよかったです。
本当にうれしいです、ありがとうございました。
リンクさせて頂きました、どうぞ宜しくお願い致します。
Commented by potto37 at 2007-03-17 23:14
Roseさん、うまくできたのですね。
良かったです^^
それから、リンクありがとうございます。
これからも、ゆっくり更新の私ですが、よろしくお願いします。
Commented by yu_ra-ra at 2007-05-02 21:16
初めまして^^
この記事を参考にして、コメント欄を大きくするのと、
イラストを入れるのに挑戦しました。
最初は、この例のとおり、検索窓にもイラストが入って大きくなってしまいました。
TEXTAREA.TXTFLDというのが、どこにあるのかわからなくて、
結局、自分で書き込みました。
まあ、できたからいいかな~っと。
ありがとうございました^^
これからも寄らせていただきます^^よろしくお願いします~♪
Commented by potto37 at 2007-05-03 08:17
yu_ra-raさん、はじめまして。
こちらこそ、コメントありがとうございます。

TEXTAREA.TXTFLDは自分で追加して書くで正解です。
いろいろと遊んでみて下さいね。
こちらこそ、よろしくお願いします^^
<< 以前の記事のリンクの整理方法の一例 投稿欄にNewの表示を パート2 >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。