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

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



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



設置方法






<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 | │├付箋紙 | Trackback | Comments(17)
トラックバックURL : http://potto.exblog.jp/tb/1109341
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Commented by osampo01 at 2004-10-02 09:04
全然関係ないんですけど 写真をポラ風に枠つけました。
よかったらご覧ください。
Commented by potto37 at 2004-10-02 10:27
osampo01 さん、こんにちは^^
遊びに行きましたよ、水面に映る夜景が、とっても綺麗ですね。
Commented by potto37 at 2004-10-02 11:49
potosu_kaorimk さん、そちらにコメントしておきました^^
早く、なおるといいですね。
Commented by potosu_kaorimk at 2004-10-02 13:15
☆ 本当に有難うございます。
助かりました。これからもよろしくお願いします。
Commented at 2004-10-02 14:56
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2004-10-02 22:16
>potosu_kaorimk さん
 こちらこそ、これからもよろしくお願いします。

>鍵さん
 了解しました^^
Commented by sakuraharu66 at 2004-10-02 23:02
わざわざお越しいただいて有難うございます♪

またいろいろと応用してみたいと思います。
Commented by potto37 at 2004-10-02 23:10
はるさん、こんばんは^^
ありがとうございます。
いろいろ試すと楽しいですね。
これからも、よろしくお願いします(^^)/
Commented by kokorotoro at 2004-10-03 00:49
はじめまして。色々と参考にさせていただいております。
これからも、テクニック勉強させていただきます☆
Commented by snowy2465 at 2004-10-03 02:15
お久しぶりです~。
参考にして、左画像を付けさせてもらいましたっ!どうもです。
まだ、場所が定まらないけれど><;
Commented by potto37 at 2004-10-03 13:19
kokorotoro さん、はじめまして。
お役に立てて嬉しいです^^
これからも、よろしくお願いします。
Commented by potto37 at 2004-10-03 13:23
すのさん、お久しぶりです~
見ましたよ、可愛いですね。

それと、鎌倉の写真と文の配置がいい感じですね。
Commented by kchan_51dehl at 2004-10-03 20:06
potto37さんこんばんは(^^)

付箋紙の作り方さえわからない初心者な私でしたが、なんとか出来ました(^^ゞありがとうございます!
これからもpottoさんのブログを参考にして自分らしいブログを作っていきたいと思いますので、これからもよろしくお願いします!
Commented at 2004-10-04 23:05
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2004-10-05 20:22
鍵さん、ゆっくり頑張ってくださいね。
Commented by noppi4to1 at 2005-01-15 08:32
はじめまして、色んな工夫があって、
楽しいブログだなぁ・・って以前から
お邪魔させていただいておりました。
この「付箋」を使わせていただきます。
それから、リンクをさせてください。

付箋の横の画像はゆっくり探してみようかと
思います。
Commented by potto37 at 2005-01-15 08:52
noppi4to1さん、はじめまして。
楽しいブログといって貰えると嬉しいです(^o^)/
付箋を付けるとちょっとイメージが変わって楽しいですね。

またよろしかったら遊びに来てくださいね。
<< 鍵コメントを判りやすくする方法 コメント欄の編集のまとめ >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。