「ほっ」と。キャンペーン
<< スキン編集 デバッグ講座:タグ... ブログダイエット:テーブル表示... >>
 

★飛び出す付箋紙

はじめに

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


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

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






HTML編集

付箋紙を貼りたい場所の下の方に以下のHTMLタグを追加します。投稿欄などに入れると効果的ではないでしょうか。
位置調整は基準位置から上にずらす量をtopで、左にずらすのをleftで指定しています。
少し試して感覚を掴んで頂けると分かると思います。

HTML編集



<div class="baseline">
<p class="sticky" style="top:-20em;left:400px;">←付箋の内容をここに記入</p>
</div>




style="top:-20em;left:400px;" のところに、style="top:-20em;left:400px;width:250px;"と指定すると、付箋の幅が250pxに変更できます。
また、ボーダの色を変えるなどいろいろと自分オリジナルの付箋ができますよ。
 

CSS編集

CSS編集部分に以下のコードを張り付けておきます。

CSS編集




/*基準位置*/
.baseline{  position:absolute;}

/*付箋紙 potto*/
.sticky{
    width:150px;
    margin: 0;
    padding:0;
    position:absolute;

    border-top:1px #eeeeee solid;
    border-right:12px #FF66FF solid;
    border-bottom:1px #aaaaaa solid;
    border-left:1px #eeeeee solid ;

    background-color:#ffffff;

    font-size:10pt;
    line-height:1.4em;
    color:#000000;
}






←基準位置


←右側のボーダを太くして付箋のようにしています。





難易度:★☆


今日のポイント
  • position:absoluteで基準位置を指定し、その位置からのずれをtopとleftで指定しています。この方法はレイアウトなどの指定によく利用されます。

  • 付箋のバックグランドのイメージを指定するともっと多様な付箋が作れます。


[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-08-27 09:42 | │├付箋紙 | Trackback(1) | Comments(8)
トラックバックURL : http://potto.exblog.jp/tb/2201894
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Tracked from Asazukiの覚書 at 2010-05-02 14:40
タイトル : 画面の適当なところに画像を貼る方法
メモ帳に以下のHTML記述を追加し、 &lt;div class="baseline"&gt; &lt;p class="sticky" style="top:-55em;right:550px;"&gt;&lt;img src="http://asazuki.net/bicycle.png" /&gt;&lt;/p&gt; &lt;/div&gt; CSSに以下の記述を追加してみたら、 /*基準位置*/ .baseline{&nbsp; position:absolute;} ...... more
Commented by haru1103aki at 2005-08-27 10:29
こんにちわ
そうそうスキンの編集は難しくてできませんが
後々のためにリンクいただいてもいいですか?

また、お勉強しに参ります
Commented by potto37 at 2005-08-27 12:22
haru1103akiさん、こんにちは。
リンクOKです。
スキン編集はすこしづつ遊びながら楽しむと、きっと楽しいですよ。
ゆっくり、楽しんで下さいね。

私のホームページの記事ですがスキン編集の参考にどうぞ。
http://www.geocities.jp/potto372/exblog/skin_edit_man.html
Commented by r-delight at 2005-08-27 12:24
pottoさん、こんにちは。いつも勉強させていただいています。^^付箋の技、面白いですね!ぜひ使わせていただきたいと思います。
ところで・・先日携帯でHPやブログを見ていたところ・・・エキサイトブログは携帯では閲覧できないと思っていたのに、pottoさんのブログはとっても見やすかったのです!これは何か方法があるのでしょうか?それとも偶然でしょうか?他のブログも見てみると、全く読めないエキブロもあれば、十分読めるエキブロもあったのですが、何に違いがあるのでしょう。お忙しいとのこと、これはご質問、ということではく、もしも機会があったらそのような記事もぜひ拝見したいなぁと思ってコメントさせていただきました。暑い日がまだ続きますが、お体大切に頑張ってくださいネ!
Commented by potto37 at 2005-08-28 20:25
r-delightさん、こんばんは。
携帯ですか、気にしていなかったので気が付きませんでした。
ごく普通にCSSでレイアウトしているだけですよ。
貴重な情報をありがとうございます。
Commented by sasa_kobo at 2005-08-30 16:23
はじめまして☆
タイトルロゴの変更やカレンダーの背景の設置など参考にさせて頂きました。
今後も参考にさせて下さい♪
Commented by potto37 at 2005-08-30 21:03
sasa_koboさん、はじめまして。
コメントありがとうございます。
お役に立てたようで、嬉しいです。
また、ゆっくり遊びに来て下さいね。
Commented by sanae15 at 2006-02-23 14:30
はじめまして 付箋の技
早速使わせていただきました
ありがとうございます
他の物も参考にさせていただきますね
Commented by potto37 at 2006-02-23 21:35
sanae15さん、はじめまして。
コメントありがとうございます。
ちょらさん、可愛いですね。とっても楽しめました^^

<< スキン編集 デバッグ講座:タグ... ブログダイエット:テーブル表示... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。