コメントの絵文字を改良：記憶の足跡：So-net blog

	ブログをはじめるログイン

おいでよどうぶつの森日記（３０９）｜おいでよどうぶつの森日記（３１０）ブログトップ

コメントの絵文字を改良　[カスタマイズ] [編集]

以前、「コメントに絵文字を追加」という記事でコメントに絵文字を表示することが出来るようになりました。

こんな感じですね！

この頃は良かったのですが、12月の定期メンテナンスでスキンデータの入れ替えが行われてから、コメントに挿入した絵文字が改行されてしまうようになりました
コメントの絵文字を改良しようと調べていたついでに改行される原因を調べてみました。

**① 今の現状**

２行コメントを書いて、それぞれの最後に絵文字を入れた状態です。
まだ、送信していません。
そもそも、この時点で名前の「はまやん」が改行されていたりと違和感たっぷりです！

**② コメントを送信**

絵文字が２個とも次の行に改行されています。
当初は絵文字をコメントに追加するためのJavaScriptがバグっているのかと思って調べていたのですが、違っていました。

**③ コメント部分のスキンデータ(CSS)**

.each-comment imgにfloat:left;の記述があります。
これはコメント１件単位のimg（画像）に対してのスタイルを指定する箇所なのですが、float:left;とすると画像を左に移動して文字を右側に回り込ませるものです。
なんだ、この行を消せば良いのでは？と安易に削除すると。

**④ floatを削除したコメント**

確かに絵文字は正常になりましたが、コメントがタクロウの画像の下に移動しています。
float:left;はコメントがタクロウの画像の右側に回り込ませるために記述されているんです
ではどうすれば良いかとソースを調べると、タクロウの画像を除いたコメント以下をまとめている.comments-bodyクラスがあるので、このクラス内の画像にはfloat:left;が無効になるようにします。

**⑤ 追加したスキンデータ(CSS)**

.comments-body imgを追加しました。
float:none;はfloat:left;を無効にするものです。
margin:0 0pxで絵文字の右側の空白をなくしてあります。

**⑥ 改良後のコメント**

絵文字が改行されずに正しく表示されました
絵文字の左右に多少マージン（空白）があっても良いかもしれませんね。

以上、長々と書いてみましたが、コメント絵文字が改行されてダサいと思っている方はチャレンジしてみて下さい。
オリジナルスキンを使っていない方は空いているペインに以下の行を追加してみて下さい。

2007-03-30 23:43 nice!(3) コメント(9) トラックバック(1)
共通テーマ：blog

nice! 3

こんばんわ～～～♪

わお！ハイテクな話[はーと]

私のブログも、そうなっているのでしょうか？

ん～まだまだ、私には難しいお話ですが
頑張ってついて行きたいと思います[にこっ]

日々勉強、日々初陣という感じのラファエロでした[にこっ][おんぷ]
by rafaero (2007-03-31 04:27)