船長！Blogへの設置方法も書いてみましたぜ！
あなたのHPにも「名倉の一言」を設置してみませんか？


*注意点*
・要javascript
・IE/NN/FF/OPで一応動作するはずです。
　超お遊びで作ったので不具合あるかも。。
・Operaは最後の「薄くなりながら消える」のができません。
・CSSの設定によっては表示が崩れる場合があります。
　そこは各自がんばってください。
・フォントは似ているのを選んだだけで、厳密には違いますが
　大目にみてください。
・改造とかご自由にどうぞ。
*設置法*

1：「nagura.js」 「nagura_icon.jpg」 「nagura_back.jpg」をダウンロードして
　　表示させたいページと同一階層に置く。

2：「名倉の一言」を表示させたいページの<head>〜</head>内に
<script type="text/javascript" language="JavaScript" src="nagura.js"></script>
　　の一行を書き加える。

3:「名倉の一言」を表示させたいページの<body>〜</body>内に
<div id="nagura" style="position:absolute; left:-360px; top:-80px;">
<table background="nagura_back.jpg" width="360" height="80" border="0" cellpadding="6" cellspacing="0">
<tr><td width="60"></td>
<td width="300"><span style="font-size:16px; color:#FFFFFF; font-family:'HG丸ｺﾞｼｯｸM-PRO'; line-height:100%;">
船長！ここにメッセージが<br>４行くらいまで書けますぜ！
</span></td>
</tr></table></div>
 　　を書き加える。
　　メッセージはご自由に変更してください。

4：ページ読み込み時に「名倉の一言」を表示させたい場合は、<body>を
<body onload="Nagura();">
　　に書き換える。

5：名倉のアイコンを押したら表示するようにするには、
<a onclick="Nagura()" style="cursor:pointer;"><img src="nagura_icon.jpg" title="名倉の一言"></a>
　　を好みの場所に設置する。

6：進んだ使い方（javascriptの知識のある方）
　　画面中央での静止時間を変更したい場合は、
　　nagura.jsファイルを開き、最初の変数「waittime」を
　　お好みの数値（単位：ミリ秒）に変更してください。




■Blogに設置する場合（とりあえずseesaaでやってみた）
注：もしかしたら別のBlogでは
　　もっとややこしいかもしれません。

1.「nagura.js」 「nagura_icon.jpg」 「nagura_back.jpg」をBlogにアップロードしてみて
　　どのフォルダにアップロードされたか覚えておく。
　　seesaaでは標準で/image/フォルダにアップされるようなのでこれを覚えておく。

2.今回は名倉ボタンを左サイドバーに追加してみます。
　　seesaa Blogの「デザイン - コンテンツ」から、新しいコンテンツを追加します。
　　「種類：自由形式」「配置：左サイドバー」を選び、「コンテンツの追加」をクリック！

3.以下の文を自由入力欄に書く
　　（青色のメッセージ部分は自由に書き換えてください）

<script type="text/javascript" language="JavaScript" src="./image/nagura.js"></script>
<div id="nagura" style="position:absolute; left:-360px; top:-80px;">
<table background="./image/nagura_back.jpg" width="360" height="80" border="0" cellpadding="6" cellspacing="0">
<tr><td width="60"></td>
<td width="300"><span style="font-size:16px; color:#FFFFFF; font-family:'HG丸ｺﾞｼｯｸM-PRO'; line-height:100%;">
船長！ここにメッセージが<br>４行くらいまで書けますぜ！
</span></td>
</tr></table></div>

<a onclick="Nagura()" style="cursor:pointer;"><img src="./image/nagura_icon.jpg" title="名倉の一言"></a>

3.そして、赤色になっている所をさっき覚えておいた「画像がアップロードされるフォルダ」に書き換える。
　　（ここでは既にimageフォルダに書き換えてあります。）

4.(ﾟдﾟ)ｳﾏｰ（設置例）



■Blogに設置する場合（Livedoor Blogでもやってみた）

1.jsファイルはアップロードできないので、imageだけ「nagura_back.jpg（名倉背景）」 「nagura_icon.jpg（名倉アイコン）」をBlogにアップロードしてみて
　　アップロードされたファイルのパスを調べてメモしておく
　　（勝手に http://image.blog.livedoor.jp/nagura7/imgs/0/e/0ec10b90.jpg みたいなファイル名に書き換えられる）

2.「デザインを変更する」ボタン（左下にあります）を押して、一番右下の「カスタマイズ」を開きます。
　　そして、デザインの設定から「トップページ」を選びます。
　　真ん中らへんの「<!--プラグインＡ（左）ここから-->」を探して、そこの「<$PluginList_A$>」の次の行に
　　以下の太字部分を全部書き込みます。
　　（今回は左サイドバーに追加してみました。他の場所に追加したい場合は各自工夫してください。）

<script language="JavaScript">
<!--
//waittime
//画面中央で静止する時間(ms)
//初期設定では2500、つまり2.5秒静止にしてあります。
var waittime=2500;

var a,xPos,yPos,winx,winy,xx;
function Nagura(){
a=0;
if(window.opera){
winx=document.body.clientWidth;
winy=document.body.clientHeight;
nagura.style.left=parseInt(winx);
yPos=(winy/2)-40+document.body.scrollTop;
nagura.style.top=parseInt(yPos);
}
else if(document.all){
winx=document.body.clientWidth;
winy=document.body.clientHeight;
nagura.style.left=parseInt(winx);
yPos=(winy/2)-40+document.body.scrollTop;
nagura.style.top=parseInt(yPos);
nagura.style.filter="alpha(opacity=0)";
nagura.filters.alpha.opacity=100;
}
else if(document.getElementById){
winx=window.innerWidth;
winy=window.innerHeight;
document.getElementById("nagura").style.left=winx-200+'px';
xPos=winx;
yPos=(winy/2)-40+self.pageYOffset;
document.getElementById("nagura").style.top=yPos+'px';
document.getElementById("nagura").style.MozOpacity=1;
}
else if(document.layers){
winx=window.innerWidth;
winy=window.innerHeight;
document.nagura.left=winx;
yPos=(winy/2)-40+self.pageYOffset;
document.nagura.top=yPos;
document.nagura.style.MozOpacity=100;
}
xx=((winx/2)+180)/20;
StartMove();
}

function StartMove(){
if (a<19){
if(document.all){
xPos=nagura.style.left;
nagura.style.left=parseInt(xPos)-xx;
}
else if(document.getElementById){
document.getElementById("nagura").style.left=xPos-xx+'px';
xPos=xPos-xx;
}
else if(document.layers){
xPos=document.nagura.left;
document.nagura.left=xPos-xx;
}
setTimeout('StartMove()',15);
a++
}
else{
a=0;
setTimeout('MoveOut()',waittime);
}
}

function MoveOut(){
if (a<22){
if(window.opera){
xPos=nagura.style.left;
nagura.style.left=parseInt(xPos)-xx;
}
else if(document.all){
xPos=nagura.style.left;
nagura.style.left=parseInt(xPos)-xx;
nagura.style.filter="alpha(opacity=0)";
nagura.filters.alpha.opacity=100-(5*a);
}
else if(document.getElementById){
document.getElementById("nagura").style.left=xPos-xx+'px';
document.getElementById("nagura").style.MozOpacity=(100-(5*a))/100;
xPos=xPos-xx;
}
else if(document.layers){
xPos=document.nagura.left;
document.nagura.left=xPos-xx;
document.nagura.style.MozOpacity=100-(5*a);
}
setTimeout('MoveOut()',15);
a++
}
}
//-->
</script>
<div id="nagura" style="position:absolute; left:-360px; top:-80px;">
<table background="http://image.blog.livedoor.jp/nagura7/imgs/0/e/0ec10b90.jpg" width="360" height="80" border="0" cellpadding="6" cellspacing="0">
<tr><td width="60"></td>
<td width="300"><span style="font-size:16px; color:#FFFFFF; font-family:'HG丸ｺﾞｼｯｸM-PRO'; line-height:100%;">
船長！ここにメッセージが<br>４行くらいまで書けますぜ！
</span></td>
</tr></table></div>

<a onclick="Nagura()" style="cursor:pointer;"><img src="http://image.blog.livedoor.jp/nagura7/imgs/5/3/5375f512.jpg title="名倉の一言"></a>

3.そして、赤文字部分を最初にメモしておいた「名倉の背景」のURLに、
　　緑文字部分を「名倉のアイコン」のURLにそれぞれ置き換えます。
　　また、青文字部分は好きなようにメッセージを書いてください。

4.(ﾟдﾟ)ｳﾏｰ（設置例）




[←大航海時代ツール配布所に戻る]