★ 独自デザインのメッセージを表示させる。
● 下記質問に対する回答
「いいえ」だけを表示する方法。または、「OK」だけを表示する方法。
Webからのメッセージのタイトルバー（Webからのメッセージ）と書かれているところを編集する方法
● 回答
① Webからのメッセージのタイトルバーや、ＶＢスクリプトで表示される
タイトルバー（VBScript)を変えられません。
◆ 画像の例
② タイトルバーを変えるには、自分で Webからのメッセージ を
作るしか方法はありません。
③ メッセージをポップアップするのは、下記のようなプラグインがあります。
（下記は、js ファイルなどを置くのを許可しているサイトなどに置く必要がある）
◆ jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)
http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
◆ デモ
http://labs.abeautifulsite.net/archived/jquery-alerts/demo/
④ 同じようなものを作成したので、下記に紹介します。
● メッセージの場所の名前の説明
● 利用する画像の例
① クローズボタン
http://stat001.ameba.jp/user_images/20120623/09/new-blue-777/55/dd/p/o0019001912042361626.png
② 注意画像
http://stat001.ameba.jp/user_images/20120623/09/new-blue-777/da/0e/p/o0035003312042363861.png
③ 情報画像
http://stat001.ameba.jp/user_images/20120623/09/new-blue-777/d7/f3/p/o0032003212042361625.png
④ クエスチョン画像
http://stat001.ameba.jp/user_images/20120623/09/new-blue-777/d5/d9/p/o0032003212042361624.png
● 機能
① メッセージをデザインできます。
(1) メッセージの大きさ
(2) タイトル
(3) メッセージ内容
(4) メッセージがポップアップされたときのメッセージ以外の背景色や背景画像
(5) ボタン内の文字、ボタンの数（最大４つ）
(6) 閉じるボタン
※ タイトルやメッセージ全体やボタンなどの背景色・背景画像なども
ＣＳＳで指定ができます。
② メッセージのデサインは、メッセージの名前を変えることによって
何種類でも使えます。
メッセージの名前とは、セレクタ名のことです。
③ メッセージがポップアップされた後に、メッセージを自由に移動できます。
（移動できないようにも指定可能）
④ メッセージは中央に表示されます。
メッセージを表示しているときに、ウインドウ（画面）の大きさを変えたら、
ウインドウ（画面）の大きさに合わせて、中央に移動します。
● 設置方法
① フリープラグインへ下記を入れる(返答が１つのみの場合の例)
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript">
$(document).ready(function(){
messagePOP('ブログからのメッセージ','コメントしてね','ＯＫ','','','',199,161,0.8,'messagePOP_body','messageP_dtl','1',0);
});
</script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/b5/1a/10017432899.css"></script>
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript">
$(document).ready(function(){
messagePOP('ブログからのメッセージ','コメントしてね','ＯＫ','','','',199,161,0.8,'messagePOP_body','messageP_dtl','1',0);
});
</script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/b5/1a/10017432899.css"></script>
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>
◆ 説明
・下記はフリープラグインの先頭に１つあればＯＫです。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
・メッセージを移動したくない場合は、下記は不要です。（黄色い部分）
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/b5/1a/10017432899.css"></script>
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>
・ 下記が既に、フリープラグインにあれは、不要です。
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/b5/1a/10017432899.css"></script>
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>
② ＣＳＳへ下記を追加する
■ ＣＳＳへ追加しなかった場合は、ポップアップメッセージは、
下記の様に表示されます。
■ 不要な行は取り除いてください
messagePOP_body messageP_dtl は、変更可能です。
/* ------------------------------------------------------- */
/* ポップアップメッセージの調整 */
/* ------------------------------------------------------- */
/* ----------------------- */
/* 全体背景の設定 */
/* ----------------------- */
#messagePOP_body{
background-color:#00ff00 !important;/* 背景色 */
background-image:url(画像のＵＲＬ);
}
/* ----------------------- */
/* メッセージ全体の設定 */
/* ----------------------- */
#messageP_dtl{
background-image:url(画像のＵＲＬ) !important;
background-repeat:repeat;/* 繰り返しする */
background-color:#ece9d8 !important;/* 背景色 */
}
/* ----------------------- */
/* タイトルバーの設定 */
/* ----------------------- */
#messageP_dtl .messageP_title{
height:20px !important;/* 高さ */
color:#ffffff !important;/* 文字の色 */
text-align:center !important;/* center→中央寄せ left→左寄せ right→右寄せ*/
padding-top:10px !important;/* 上の隙間 */
padding-bottom:10px !important;/* 上の隙間 */
background-color:#0022ff !important;/* 背景色 */
border-radius: 5px !important;/* 角丸 CSS3 */
border:2px solid #0055e5 !important;/* 枠 */
}
/* ----------------------- */
/* メッセージの設定 */
/* ----------------------- */
#messageP_dtl .messageP_msg{
text-align:center !important;/* center→中央寄せ left→左寄せ right→右寄せ*/
display:block;
color:#000000 !important;/* 文字の色 */
}
/* ----------------------- */
/* クローズボタンの設置 */
/* ----------------------- */
#messageP_dtl .messageP_close {
background-image:url(http://stat001.ameba.jp/user_images/20120623/09/new-blue-777/55/dd/p/o0019001912042361626.png);/* クローズボタン */
background-repeat:no-repeat;/* 繰り返ししない */
width:19px !important; /* 画像の幅 */
height:19px !important;/* 画像の高さ */
border:1px solid #ffffff !important;/* 枠 */
display:block;
margin-right:5px !important;/* 右の隙間 */
}
#messageP_dtl .messageP_close:hover{/* カーソルを乗せたとき */
cursor: pointer;
}
/* ----------------------- */
/* メッセージ前の画像 */
/* ----------------------- */
#messageP_dtl .messageP_msg {
background-image:url(http://stat001.ameba.jp/user_images/20120623/09/new-blue-777/d7/f3/p/o0032003212042361625.png);/*情報画像*/
background-repeat:no-repeat;/* 繰り返ししない */
display:block;
height:33px !important;/* 画像の高さ */
background-position:20px top !important;/* メッセージ前の画像の位置 */
line-height:33px !important;/* 文字の高さ（位置）を調整 */
}
/* ----------------------- */
/* ボタン全体の設定 */
/* ----------------------- */
#messageP_dtl .button_all{
text-align:center !important;/* center→中央寄せ left→左寄せ right→右寄せ*/
display:block;
color:#000000 !important;/* 文字の色 */
}
/* ----------------------- */
/* ボタン個別の設定 */
/* ----------------------- */
#messageP_dtl .button_all input{
margin-left:20px !important;
padding-left:0px;/* 内側余白(左) */
padding-right:10px;/* 内側余白(右) */
}
/* ------------------------------------------------------- */
/* ポップアップメッセージの調整 */
/* ------------------------------------------------------- */
/* ----------------------- */
/* 全体背景の設定 */
/* ----------------------- */
#messagePOP_body{
background-color:#00ff00 !important;/* 背景色 */
background-image:url(画像のＵＲＬ);
}
/* ----------------------- */
/* メッセージ全体の設定 */
/* ----------------------- */
#messageP_dtl{
background-image:url(画像のＵＲＬ) !important;
background-repeat:repeat;/* 繰り返しする */
background-color:#ece9d8 !important;/* 背景色 */
}
/* ----------------------- */
/* タイトルバーの設定 */
/* ----------------------- */
#messageP_dtl .messageP_title{
height:20px !important;/* 高さ */
color:#ffffff !important;/* 文字の色 */
text-align:center !important;/* center→中央寄せ left→左寄せ right→右寄せ*/
padding-top:10px !important;/* 上の隙間 */
padding-bottom:10px !important;/* 上の隙間 */
background-color:#0022ff !important;/* 背景色 */
border-radius: 5px !important;/* 角丸 CSS3 */
border:2px solid #0055e5 !important;/* 枠 */
}
/* ----------------------- */
/* メッセージの設定 */
/* ----------------------- */
#messageP_dtl .messageP_msg{
text-align:center !important;/* center→中央寄せ left→左寄せ right→右寄せ*/
display:block;
color:#000000 !important;/* 文字の色 */
}
/* ----------------------- */
/* クローズボタンの設置 */
/* ----------------------- */
#messageP_dtl .messageP_close {
background-image:url(http://stat001.ameba.jp/user_images/20120623/09/new-blue-777/55/dd/p/o0019001912042361626.png);/* クローズボタン */
background-repeat:no-repeat;/* 繰り返ししない */
width:19px !important; /* 画像の幅 */
height:19px !important;/* 画像の高さ */
border:1px solid #ffffff !important;/* 枠 */
display:block;
margin-right:5px !important;/* 右の隙間 */
}
#messageP_dtl .messageP_close:hover{/* カーソルを乗せたとき */
cursor: pointer;
}
/* ----------------------- */
/* メッセージ前の画像 */
/* ----------------------- */
#messageP_dtl .messageP_msg {
background-image:url(http://stat001.ameba.jp/user_images/20120623/09/new-blue-777/d7/f3/p/o0032003212042361625.png);/*情報画像*/
background-repeat:no-repeat;/* 繰り返ししない */
display:block;
height:33px !important;/* 画像の高さ */
background-position:20px top !important;/* メッセージ前の画像の位置 */
line-height:33px !important;/* 文字の高さ（位置）を調整 */
}
/* ----------------------- */
/* ボタン全体の設定 */
/* ----------------------- */
#messageP_dtl .button_all{
text-align:center !important;/* center→中央寄せ left→左寄せ right→右寄せ*/
display:block;
color:#000000 !important;/* 文字の色 */
}
/* ----------------------- */
/* ボタン個別の設定 */
/* ----------------------- */
#messageP_dtl .button_all input{
margin-left:20px !important;
padding-left:0px;/* 内側余白(左) */
padding-right:10px;/* 内側余白(右) */
}
/* ------------------------------------------------------- */
◆ 関数の説明
① 例
messagePOP('ブログからのメッセージ','コメントしてね','ＯＫ','','','',199,161,0.8,'messagePOP_body','messageP_dtl','1',0);
② 説明
// messagePOP(タイトル,メッセージ,ボタン①,ボタン②,ボタン③,ボタン④,横,高さ,全体背景の透過度,全体背景の名前,メッセージの名前,移動可能,コールバックパターン)
③ 詳細説明
・タイトル・・・タイトルを指定します。
・メッセージ・・・メッセージを指定します。
・ボタン①～④・・・ボタンを指定します。最大４個指定できます。
・横・・・メッセージ全体の横幅を指定します。
・高さ・・・メッセージ全体の高さを指定します。
・全体背景の透過度・・・全体背景の透過度を0.0～1.0 で指定します。
・全体背景の名前・・・全体背景のセレクタを指定します。
ＣＳＳで指定している名前と同じにします。
・メッセージの名前・・・メッセージのセレクタを指定します。
ＣＳＳで指定している名前と同じにします。
※ 全体背景の名前とメッセージの名前を変えて、ＣＳＳを変えた名前に
すると、複数のデザインを作成できます。
・移動可能・・・メッセージを移動可能にします。
0・・・移動できないようにする。 1・・・移動可能にする。
・コールバックパターン・・・クリックされたボタンを判定して、
再度、メッセージを表示したい場合などに使用します。
0～5を指定します。0の場合と、1～5以外の場合は、指定した
メッセージで終了となります。
◆ 複数メッセージの例
① スクリプト
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript">
$(document).ready(function(){
messagePOP('規約チェック','規約を守りますか？','ＹＥＳ','ＮＯ ','','',213,121,0.8,'messagePOP_body','messageP_dtl','1',1);
});
function c_back1(res){
if(res==1){ // クリックされたボタンを判定
messagePOP('結果','Yesをクリック','ＯＫ','','','',199,121,0.8,'messagePOP_body','messageP_dtl','1',0);
}else{
messagePOP('結果','Noをクリック','ＯＫ','','','',199,121,0.8,'messagePOP_body','messageP_dtl','1',0);
}
}
</script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/b5/1a/10017432899.css"></script>
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>
② 説明
(1) コールバックパターンを 1 にして c_back1(res) をボタンをクリックした
ときに呼び出すようにします。（規約を守りますか？の部分）
(2) c_back1(res) の関数を作成します。（判定処理）
ボタン①がクリックされたときは、resに1が返ってきます。
resが1の場合、Yesをクリックのメッセージを表示します。
resが1以外の場合、Noをクリックのメッセージを表示します。
コールバックパターンは、0 にして、判定処理の呼び出しはしません。
(3) ボタン①～④をクリックしたときに返される res の値は下記。
・ ボタン①・・・1
・ ボタン②・・・2
・ ボタン③・・・3
・ ボタン③・・・4
・ クローズボタンをクリックした場合・・・0
(4) 注意
上記はメッセージを表示①→ボタンをクリック①→メッセージを表示②のケースです。
メッセージを表示①→ボタンをクリック①→メッセージ②→ボタンをクリック②→
メッセージを表示③の場合は、メッセージ②のコールバックパターンは 2 に
してください。
コールバックパターン 1 ・・・ c_back1(res) がコールされる
コールバックパターン 2・・・ c_back2(res) がコールされる
コールバックパターン 3 ・・・ c_back3(res) がコールされる
コールバックパターン 4 ・・・ c_back4(res) がコールされる
コールバックパターン 5 ・・・ c_back5(res) がコールされる
★ 複雑なので、クリックされたボタンを判定して、メッセージを
表示したい場合は、この記事にコメントしてください。