コメント欄のタイトル部分にプチアニメを入れよう!
設置方法
コメント欄のタイトル部分は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;
/*-------------- ここまでです ---------------*/
}
青字が追加部分です。
今日のポイント
- 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
無断転記禁止