人気ブログランキング | 話題のタグを見る
<< 見えるところのちょっとしたお洒落 自分が思っていた通りの表示にな... >>
 

コメント欄のタイトル部分にプチアニメを入れよう!


見えないところのお洒落シリーズとして、今度はコメント欄のタイトル部分にプチアニメを入れる方法です。図1に示すように、コメント欄小さな花が咲いています。


コメント欄のタイトル部分にプチアニメを入れよう!_a0031863_13533862.jpg

図1 コメント欄のタイトル部分に小さな花


設置方法


コメント欄のタイトル部分はCSS編集部分のDIV.COMMENT_TAILです。
この部分にイメージファイルを設置すればよいことが分かります。
では、その設置方法を図2に示します。


CSS編集部分

DIV.COMMENT_TAIL {

MARGIN: 8PX 0PX 5PX;
FONT: 8PT/150% TAHOMA;
COLOR: #777;
width:480px;

/*--------------- ここから追加です --------------*/

background-image:url('イメージファイル名');
background-position:left;
background-repeat:no-repeat;
padding:20px 0px 0px 0px;
/*余白を入れて画像が見えるように設定する*/
text-indent:30px;


/*--------------   ここまでです  ---------------*/

}

青字が追加部分です。

図2 CSS編集部分


今日のポイント
  • background-imageで表示するイメージファイルを指定します。
  • background-position:left;で左端に表示させます。
  • background-repeat:no-repeat;でイメージを1つだけ表示します。
  • padding:20px 0px 0px 0px;で上端部分を20px分入れてイメージがすべて表示されるようにしています。
  • text-indent:30px;で、テキストの位置を30pxずらしてイメージと重ならないようにしました。


ぽっとからのお知らせ

今まで、「青字が追加です」と表現していましたが、コメントを入れて追加部分の範囲を分かりやすくしました。色を識別しにくい環境の方などにも楽しめるといのですが、
専門の知識が無いので手探りで分かりやすい表現を考えていきたいと思います。

もし、この表現など適切でない場合は教えてください、
よろしくお願いします。<(_ _)>


ぽっと

素材はイラそよさんからお借りしています。ちなみに、所長の故郷です。
イラそよさんの素材はリンクウエアなので、ご利用の方はリンクをお願いします。<(_ _)>

CopyRight(C) 2004 All rights reserved by potto37
無断転記禁止
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-08-07 07:31 | │├コメント欄
<< 見えるところのちょっとしたお洒落 自分が思っていた通りの表示にな... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。