<< さらに付箋の改良 コメント欄のタイトル部分にプチ... >>
 

見えるところのちょっとしたお洒落


今度は見えるところにちょっとしたお洒落です。
図1のようにコメントを書くときにクリックする部分にプチアニメを入れます。

a0031863_20181817.jpg

図1 設置例



設置方法


CSS編集部分

DIV.POST_TAIL{

FONT : 11PX/150% TAHOMA;
MARGIN-TOP : 10PX;

TEXT-ALIGN : left; /*修正しました*/

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

background-image:url(ファイル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
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-08-09 20:15 | │├コメント欄
<< さらに付箋の改良 コメント欄のタイトル部分にプチ... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。