カテゴリ:│├付箋紙( 7 )

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
 

★飛び出す付箋紙

はじめに

どこでも貼れる飛び出す付箋です。
ブログにも付箋紙をペタっと貼ってみたい。
そんなちょっとした遊び感覚で作ってみました。
良かったら、以下のリンクをクリックして試して下さいね。
a0031863_9412668.gif


難易度:★☆
(位置の調整が難しいけど、簡単にできるから頑張ってね)

ちょっとしたポイントのところに貼ると効果的かもしれませんね。
ぽっとの陽だまり研究室




この技を試したい方はこちらをクリック>>
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-08-27 09:42 | │├付箋紙 | Trackback(1) | Comments(8)
 

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



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



設置方法






<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)
 

さらに付箋の改良


以前提案した付箋紙はBLOCKQUOTEを使用していました、しかしBLOCKQUOTEは引用だから私の記事を無断転記してもいいと思って無断転記をしないで下さいね。

私は、便利なので使っていました。
そこで今日から、DIVのタグでも表現しようとおもいます。

しかし、今まで利用していた記事の修正が大変なので、タグ指定をしないでクラスだけを指定にしました。したがって、変更しても今までの記事は直さないでもすみます。

今までのBLOCKQUOTEのタグで記載した記事も私に著作権がありますので、無断転記はご遠慮下さい。

記事を紹介するときは、トラックバックや、”ぽっとの陽だまり研究室”を入れてくださいね。




著作権について私が説明するよりも、著作権について”とほほのWWW入門”さんで、分かりやすく書いてありますのでよろしかったらご覧下さい。
著作権とほほのWWW入門



追記:2004.8.12
記事に書かずにコメント欄を利用して説明している方がいますが、それも著作権の侵害になりますよ。

改良付箋紙





/*修正前 */
BLOCKQUOTE.husen { /*←  このお部分を修正します */
MARGIN: 5px 20px 20px 20px;
PADDING: 5px 20px 20px 20px;
BACKGROUND:#FFFFDF;  /*背景の色*/
BORDER: 1px 1px 1px 1px;
BORDER-COLOR: #00;     /*ボーダーの色*/
BORDER-STYLE:outset;    /*ボーダーのスタイルを立体的にしてます*/

}


/*修正後 */
.husen {/*←  BLOCKQUOTEを削除しました */
MARGIN: 5px 20px 20px 20px;
PADDING: 5px 20px 20px 20px;
BACKGROUND:#FFFFDF;  /*背景の色*/
BORDER: 1px 1px 1px 1px;
BORDER-COLOR: #00;     /*ボーダーの色*/
BORDER-STYLE:outset;    /*ボーダーのスタイルを立体的にしてます*/

}

BLOCKQUOTEを取り除きました、この操作を行っても今までの記事はそのまま付箋が表示されます。
次回からは、付箋の設置は、以下の通りにお願いします。

<DIV class="husen">

この間に本文を書いてください。


</DIV>



ぽっと

CopyRight(C) 2004 All rights reserved by potto37
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-08-10 07:31 | │├付箋紙 | Trackback(3) | Comments(12)
 

IE専用影付き付箋紙



追記しました。
IE専用の影付き枠についてです。filter:を利用するといろいろ遊べます。


設置方法


<div style="filter: Shadow(Color=#C6D3FF, Direction=130, Strength=10); height: 1em; padding: 1em;">
<div style="background-color: #FFFFD9;">

この部分に本文を書きます。

</div></div>


今日のポイント
  • Shadow内のDirectionが影の角度です。時計回りで、0~360度の設定が可能です。
  • Shadow内のColorが影の色です。
  • Shadow内のStrengthが影の長さです。(ブレの強さ)


こんな感じで見えます。IE専用なので画像に影を付けて投稿したり、先日紹介したイメージの付箋紙を利用した方が、いろんな方に楽しんでいただけます。

a0031863_1956926.gif


追記:2004.8.04 PM10:45

CSS(スタイルシート)に設置




div.husen1{
filter: Shadow(Color=#C6D3FF, Direction=130,Strength=10);
height: 1em;
padding: 1em;
}

div.husen2{
background-color: #FFFFD9;

}



投稿欄設置方法



<div class="husen1"><div class="husen2">
本文をこちらに書きます。

</div></div>



ぽっと

CopyRight(C) 2004 All rights reserved by potto37
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-08-04 19:56 | │├付箋紙 | Trackback(4) | Comments(20)
 

飾り付箋紙(イメージバージョン)



  素材屋さんにはテーブルを利用した飾り枠がありますね。この飾り枠はスキンには適応できますが、投稿欄には適応できないのが残念です。

そこで、投稿欄で利用可能な飾り枠について説明したいと思います。
なお、この技はスキンにも適応が可能です。
まだ改良が必要ですが、みなさん工夫して使ってみてください(^_^)/

a0031863_6201359.gif



みなさんの素敵なアイディアや、こんなふうにしましたとか、色々情報をいただけるとうれしいです。

  なお、付箋紙にワンポイントを入れるアイディアは、王様の耳は猫の耳 を運営している、snowy2465さんのアイディアです。snowy2465さんのサイトの付箋紙は掲示板のようでとっても可愛いので一度ご覧下さい。

王様の耳は猫の耳 >> ←こちらからどうぞ(^_-)-☆



この技を試したい方はこちらをクリック>>
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-08-02 20:01 | │├付箋紙 | Trackback(1) | Comments(14)
 

付箋の改良版



以前提案した付箋紙はBLOCKQUOTEを使用していました、CSSでBLOCKQUOTEスタイルの設定をしていたのですが、この方法に少し手を加えることにより、BLOCKQUOTEを付箋紙以外でも利用できます。

今まで、BLOCKQUOTEを他のことに利用しない場合は修正はいりません。




改良付箋紙




/* CSS編集部分(私は最後の部分に追加しました) */
BLOCKQUOTE.husen {
MARGIN: 5px 20px 20px 20px;
PADDING: 5px 20px 20px 20px;
BACKGROUND:#FFFFDF;  /*背景の色*/
BORDER: 1px 1px 1px 1px;
BORDER-COLOR: #00;     /*ボーダーの色*/
BORDER-STYLE:outset;    /*ボーダーのスタイルを立体的にしてます*/

}

青字の部分を追加し、利用の際には、<BLOCKQUOTE class="husen">
と指定して下さい。class="husen"が今回のポイントです。


追記
<BLOCKQUOTE class="husen">

この間に本文を書いてください。


</BLOCKQUOTE>






色を変えたい場合は、投稿欄のところで、
<BLOCKQUOTE class="husen" style="background-color:#FFEBFF;">
なんて指定するとできますよ^^


ポイント
  • クラス分け
    タグの後ろに"."を付けてクラス名前を定義することにより、そのタグをクラスごと分けて利用が可能になります。つまり簡単に言うと、色々なスタイルを適応可能ってことです。タグの後ろでCLASS="クラス名"と記述することにより、利用可能です。






ぽっと

CopyRight(C) 2004 All rights reserved by potto37
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-24 11:29 | │├付箋紙 | Trackback(4) | Comments(17)
 

■投稿欄に付箋紙みたい枠をつける方法について

投稿欄に付箋紙のような枠を表示する方法について、いつも遊びに来てくれているsnowy2465さんからご質問がありましたので、書いてみますね♪
(snowy2465さん、これのことですか?)
私は、<BLOCKQUOTE>を使用しています。<BLOCKQUOTE>の中でstyleを指定すれば可能ですが、書式を統一したいので、CSSにstyleを書き込んであります。その方法は次の通りです。

CSS編集で次の部分を追加して下さい。次に、投稿するときに枠で囲みたい部分を<BLOCKQUOTE>と</BLOCKQUOTE>で囲めばOKです。
好みに合わせて、BACKGROUNDの色を変えたり、MARGINや、PADINGで大きさなどを変えて下さいね♪


/* CSS編集部分(私は最後の部分に追加しました) */
BLOCKQUOTE {
MARGIN: 5px 20px 20px 20px;
PADDING: 5px 20px 20px 20px;
BACKGROUND:#FFFFDF;  /*背景の色*/
BORDER: 1px 1px 1px 1px;
BORDER-COLOR: #00;     /*ボーダーの色*/
BORDER-STYLE:outset;    /*ボーダーのスタイルを立体的にしてます*/
}



色を変えたい場合は、投稿欄のところで、
<BLOCKQUOTE style="background-color:#FFEBFF;">
なんて指定するとできますよ^^


参考:HTMLクイックリファレンス中身のBACKGROUNDなどの意味や指定方法はこちらを参考にされるといいですよ^^
みんと♪


# by minto7mimi | 2004-06-23 18:53 | スキン編集
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-13 09:39 | │├付箋紙 | Trackback(1) | Comments(4)
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。