JavaScript 年賀状・・

昨日の記事 でおまけで書いていますが・・

年賀状！やりたいです！もっとわかりやすく書かないとわかりませ～んん！！

って方のために・・・

画像表示に特化して簡単にしました（そんなには簡単になっていませんが・・？）

と・・言っても注意事項はまったく同じですので

JavaScript　フロートメッセージ 　　　の　特に赤字部分は読んで置いてください

重要！： 現在のフリープラグイン、フリースペース、ＣＳＳをメモ帳とかに保存した上で挑戦下さい

こちらは見本で年賀状にしました

このような画像を作ります・・・

大きな画像で画面いっぱいに年賀状をって考える方もおられるとは思いますが・・

画面の大きさは見ている方によって違います

あまり大きな画像を使うと閉じるボタンが画面外で閉じられなくて迷惑をかける場合があります

横幅は800px以下にしておくのがいいと思います

pngの透過画像を使ってキレイに影を入れたいって思っている方は・・

そのままではIE6で見たときに汚くなってしまいます（IE6はpng画像の透過には対応していません）

記事の下のやり方を参考にして下さい

フリープラグイン（この部分は昨日と同じです）に・・・・

<SCRIPT LANGUAGE="JavaScript">
<!--
var mYid ="ameblo.jp/あなたのID/"
if(document.referrer.indexOf(mYid)< 0) {
$(function(){
$("#flmes").fadeIn("slow");
return false;
})
}
$(function(){
$("#flmes a.clwin").click(function(){
$("#flmes").fadeOut("slow");
return false;
})
})
// -->
</SCRIPT>

ＣＳＳは・・・


#flmes{/*フロートメッセージ全体*/
top:150px;/*位置 上からＡ*/
left:150px;/*位置 左からＢ*/
width:555px;/*画像の幅Ｃ*/
height:380px;/*画像の縦Ｄ*/
background-image:url(画像のＵＲＬ);
background-position:left top;
background-repeat:no-repeat;
display:none;
position:absolute;
z-index:3000;
}
#flmes a.clwin{/*閉ボタン*/
color:#ff00ff;/*文字色*/
font-size:15px;/*文字サイズ*/
border:1px solid #ff00ff;/*枠*/
top:10px;/*上からＥ*/
right:30px;/*右からＦ*/
position:absolute;
}
#flmes a:hover{
text-decoration: none;/*下線を消す*/
}

※スキンによっては基準点がヘッド画像の左下になる場合があります

　その場合は　top:-50px のようにマイナスをつけることで上に移動させることが出来ます

フリースペースに（文字数に余裕があればフリープラグインでもかまいません）

<div id="flmes"><a class="clwin" href="#">この年賀状を閉じる</a></div>

画像と「この年賀状を閉じる」を変更すれば1年中使えます

ここに文字とかを入れたい場合はコレではなくて

JavaScript　フロートメッセージ コチラを使ってください

せっかくフロートさせるんなら・・・　影をつけたpngの透過画像が使いたい～

でもそれだと・・　IE6でキレイに表示が出来ない・・・

と、いって・・透過gif画像じゃキレイに出来ない・・・

ジャ～ん！！！　そんなときは・・

pngの透過画像とIE6用の透過gif画像の2つを用意してください

くれぐれも2枚のサイズは縦横とも同じサイズで作ってください

で・・・・

ＣＳＳのうち/*フロートメッセージ全体*/の部分をこうします（以前にもやったことがありますが・・）

#flmes{/*フロートメッセージ全体*/
top:150px;/*位置 上からＡ*/
left:150px;/*位置 左からＢ*/
width:555px;/*画像の幅Ｃ*/
height:380px;/*画像の縦Ｄ*/
background-image:url(画像のＵＲＬ)!important;/*pngの透過画像*/
background-image:url(画像のＵＲＬ);/*IE6用の透過gif*/
ground-position:left top;
background-repeat:no-repeat;
display:none;
position:absolute;
z-index:3000;
}

これでIE6以外で見ている方にはpngの透過画像が表示され

IE6で見ている方にはIE6用の透過gif画像が表示されます

http://ameblo.jp/ex007/ 　このブログで使っています

IE6では透過gif画像で　それ以外のブラウザーで見たときは透過のpng画像で表示されます

影の部分が違っています・・・・

重要！： 現在のフリープラグイン、フリースペース、ＣＳＳをメモ帳とかに保存した上で挑戦下さい

いや～・・・・昨日は夜中まで動悸がすごかったです・・

夜中・・マジでやばいって本当に思いました・・

でも朝になったら平常で・・

年末で仕事も忙しかったから病院にも行かなかった・・

年が開けたら病院に行くことにします

JavaScript フロートメッセージ

みなさま・・・気になっておられるようですから・・・

今年の最後に面白そうなものを・・・アップしておきます

全ページにメッセージボード設置しちゃおうや 　・・
記事下に定型文を自動挿入してみる
って・・
設置してもみなさまに読んでいただいているのが疑問を感じるときがあります・・

絶対に読んでいただけるようにするにはどうしたらいいんでしょ？

で・・・思いついたのがフロートメッセージ（フロートウィンドウ）です
これなら目立つしウザイ？から絶対に読んでいただける・・

でも・・毎ページで出てきたらウザ過ぎて逆に嫌われてしまいます
なので簡単な リファラーチェックをつけて一番最初に表示したページにだけ出すようにしてみました

これなら・・リンクとかで飛んできてどのページを最初に開いたとしてもフロートメッセージが表示されますから絶対に見ていただけるのではないでしょうか？

※注意！
すでにフリープラグインに入っているブログパーツ等と干渉して動作しない場合があります
このブログで説明している全ページにメッセージボードや記事下に定型文などともかち合って動作しない場合があります（その場合でも動作しないのはこのフロートメッセージだけです・・他は動作するはずです）

その場合はフリープラグインの一番最初に貼り付けてみてください・・
わたしの場合はそれで回避できました（まだ・・問題はあるのですがごまかしています？）

それでも動作しない場合は・・・　
たぶん質問されても答えられないですから・・・

・・・・・あきらめましょう？

このようなフロートウィンドウ自体がジャマだって
嫌っている方もおられることを考慮した上で使ってください

毎度のことですが携帯からは見ることが出来ません

まずは・・・

下のような3枚の画像を用意します・・・・ 素材置場にも少しあります

閉ボタン

上の画像

下の画像

重要！： 現在のフリープラグイン、フリースペース、ＣＳＳをメモ帳とかに保存した上で挑戦下さい

フリープラグインに

<script type="text/javascript">
<!--
var mYid ="ameblo.jp/あなたのID/"
if(document.referrer.indexOf(mYid)< 0) {
$(function(){
$("#flmes").fadeIn("slow");
return false;
})
}
$(function(){
$("#flmes a.clwin").click(function(){
$("#flmes").fadeOut("slow");
return false;
})
})// -->
</script>

ＣＳＳは

#flmes{/*フロートメッセージ全体*/
top:50px;/*位置 上からＡ*/
left:50px;/*位置 左からＢ*/
width:550px;/*画像の幅Ｃ*/
background-image:url(上画像のＵＲＬ);/*上の画像*/
background-position:left top;
background-repeat:no-repeat;
display:none;
position:absolute;
z-index:1000;
}
#flmes a.clwin{/*閉ボタン*/
top:0px;/*上からＤ*/
right:12px;/*右からＥ*/
position:absolute;
}
#flmes a.clwin img{
border:none;
}
#flmes #winti{/*タイトル*/
padding:5px 0 0 30px;/*上Ｆ 右 下 左Ｇ*/
color:#ffffff;/*文字色*/
font-size:15px;/*文字サイズ*/
font-weight:bold;/*太字*/
}
#flmes .winme{/*メッセージ*/
color:#333333;/*文字色*/
font-size:14px;/*文字サイズ*/
padding:30px 25px 40px;/*上Ｈ　左右Ｉ 下Ｊ*/
background-image:url(下画像のＵＲＬ);/*下の画像*/
background-repeat:no-repeat;
background-position:left bottom;
margin:0;
line-height:1.5;
}

※スキンをさわっている場合はヘッド画像の下が基準（top:0px）になる場合があります

　その場合は　top:-50px; とかのように　マイナスをつけて上に上げることが出来ます

ここまで準備をしておいて・・・・・

お知らせを表示する場合にだけフリースペースにメッセージを書きます

いらなくなったらフリースペースに書いた部分だけ削除します

メッセージはフリースペースに書きます

<div id="flmes"><a class="clwin" href="#"><img alt="閉じる" src="閉じるボタンの画像のＵＲＬ" /></a><div id="winti">無題 - メモ帳</div>
<div class="winme">

ここにメッセージを書きます

</div></div>

※注意・・・

・・・src="閉じるボタンの画像のＵＲＬ" /></a>←ココを改行すると画像とタイトルの位置がずれます
<div id="winti">無題 - メモ帳</div>

↓改行があるとＣＳＳでpaddingのＦを0pxにしても・・・

画像を作るときに・・・

フロートしているように影を付けたいと思われると思いますが・・・・

下の画像が透過（下の影の部分）していると上の画像がその部分に表示されちゃいます・・・

角丸画像や影をつける場合はこのように１枚の画像でつくり

２枚使う場合と違って画像が伸び縮みしませんので文章を画像に合わせる必要があります

って・・それなら文章も最初っから画像にしちゃった方が・・楽？（下の年賀状みたいに・・）

上の画像のＵＲＬに設定します（下の画像は空欄にしておきます）

画像１枚だけの場合は画像の縦もＣＳＳに設定します

#flmes{/*フロートメッセージ全体*/
height:210px;/*画像の縦*/
}

また・・閉じるボタンを画像ではなくて文字にすることも可能です↓見本ブログ

フリースペースの閉じるボタンの部分・・・

<a class="clwin" href="#"><img alt="閉じる" src="画像のＵＲＬ" /></a>

↓画像を文字にします

<a class="clwin" href="#">この窓を閉じる</a>

それから上のＣＳＳでこの部分を

#flmes a.clwin{/*閉ボタン*/
top:0px;/*上から*/
right:12px;/*右から*/
position:absolute;
}
#flmes a.clwin img{
border:none;
}

↓このように変更します

#flmes a.clwin{/*閉ボタン-文字*/
color:#ffffff;/*文字色*/
font-size:15px;/*文字サイズ*/
border:1px solid #ffffff;/*枠*/
top:10px;/*上から*/
right:30px;/*右から*/
position:absolute;
}
#flmes a:hover{
text-decoration: none;/*下線を消す*/
}

※ 注意

Firefox　で・・下の画面がすける場合があります

原因は追究していません・・？

（他のブログパーツの影響だと思います）

下が透けない位置に表示するようにして下さい

こんな使い方も・・・・

年賀状の画像を用意します

タイトルやメッセージなどは空白にして年賀状の画像だけ表示させると・・面白くないですか？

わかりやすく記事にしました

これは一般的にフロートウインドウといわれているものです

ただ・・ドラッグして表示位置を変更できるようにはしませんでした・・・

実験用ブログでは成功しましたが・・ここのブログではうまく動きませんんでしたので・・

省いちゃいました・・・

文字数も少なくてすむしね・・・

質問されても・・・　答えられないと思います・・　なので質問ナシでお願いします

重要！： 現在のフリープラグイン、フリースペース、ＣＳＳをメモ帳とかに保存した上で挑戦下さい

この記事を書くので精魂尽き果てました・・・　さっきから動悸がすごいです

来年・・　大丈夫なんでしょうか・・・？

良いお年を・・・・

年明けまでお休みします m(_ _)m

今も熟睡していたのに・・・

また胃液が出てきて吐きそうになってベットから飛び起きたところです・・

昨日は夕方から胃がおかしかったです・・

ごめんなさい

帰省するのはまだですが・・

このまま年明けまでブログはお休みします

コメントがたまっちゃうと再開時に手に負えなくなりそうなので休止させてください

（携帯とか・・他にもコメントの方法はあるのですが・・）

いままでのコメントには帰省するまでに回答していくつもりですのでお待ち下さい

今年1年ありがとうございました

みなさま・・　よいお年をお迎え下さい

ありがとうございました　　実験委員