<< 鍵コメントを判りやすくする方法 コメント欄の編集のまとめ >>
 

お洒落な付箋紙(両サイドの猫ちゃんバージョン)



両サイドに猫ちゃんがいる可愛い付箋紙です。よろしかったら、いろいろなキャラクターを利用してこの方法を試してください。



設置方法






<DIV class="husen" STYLE="word-break:break-all; width:350px; margin:0px 0px 0px 55px;">

こちらに付箋紙の内容を書きます。


<img ALIGN="left" src="左側イメージファイル名" style="position: relative; top:0px; left: -75px;">
<img ALIGN="right" src="右側イメージファイル名" style="position: relative; top:-20px; right: -65px;">
</div>







CSS設置方法


すでに付箋の設置ができているかたは不要です。CSS編集部分に追加します。



.husen {

MARGIN: 5px 20px 20px 20px;
PADDING: 5px 20px 20px 20px;
BACKGROUND:#FFFFDF;  /*背景の色*/
BORDER: 1px 1px 1px 1px;
BORDER-COLOR: #00;     /*ボーダーの色*/
BORDER-STYLE:outset;    /*ボーダーのスタイルを立体的にしてます*/

}






今日のポイント
  • 付箋にスタイルを追加しています。改行をするようにし、350pxの幅で、左に55pxの余白を入れています。

    STYLE="word-break:break-all; width:350px; margin:0px 0px 0px 55px;"

  • イメージの表示位置を相対指定で調整しています。

    style="position: relative; top:-20px; right: -65px;"

    position: relative;  相対位置指定
    top:-20px;  上へ-20pxの位置に表示
    right: -65px;     右から-65pxの位置に表示




素材はとんとん工房さんからお借りしています。リンクウエアなのでご使用の際には、リンクをお願いします。

ぽっと

CopyRight(C) 2004 All rights reserved by potto37
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-10-01 06:54 | │├付箋紙
<< 鍵コメントを判りやすくする方法 コメント欄の編集のまとめ >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。