リモコン
文字色エディタ
ver.3.0
　
　◆サンプル
　 　 ＜機能と特徴＞
　
・カラーエディタで作成した色に文字色を変更できます。

・ボタンを押し続けるとどんどん数値が変化します。
 



 

公開日 2002.3.10
最終更新日 2003.6.15
バージョンver.3.0
動作確認 IE6.0,NN4.7,NN7.0,Opera7.0
cookie 使用(NN4のみ)
CSS 使用
更新履歴 2002.03.20 ver.1.1 netscape6の不具合を改善，スタイルシートに対応(変更点：全般)
2002.05.01 ver.1.2 netscape6の動作を改良(変更点：ソース１,２)
2002.10.12 ver.2.0 スクリプトを簡略化(変更点：全般)
2002.10.24 ver.2.1 netscapeの色変更の際の値の初期化を修正(変更点：ソース１)
2003.06.15 ver.3.0 全般の動作を改良(変更点：ソース全般)

 

☆★☆使い方☆★☆
 
 初心者向け解説   中級者向け解説   ダウンロード 

１．カスタマイズフォームを使って設定をしてください。

２．ソース１をそのまま書き込み新しいHTMLファイルを作ってください

３．ソース２を文字色を変更したいページの<head>〜</head>の間に
　　書き込んでください。

４．作ったHTMLファイルを文字色を変更したいページから
　　ちらっと小窓君で呼び出してください。

５．ブラウザでテストしてみてください。
　　正常に動作すれば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 

１．ソース１をそのまま書き込み新しいHTMLファイルを作ってください

２．ソース２を文字色を変更したいページの<head>〜</head>の間に
　　書き込んでください。

３．作ったHTMLファイルを２のページから
　　ちらっと小窓君で呼び出してください。

４．ブラウザでテストしてみてください。
　　正常に動作すれば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。

２．右のボタンを押してファイルをダウンロードしてください。

３．以下のフォームに入力して
　　カラーエディタのウィンドウを開くスクリプトの設定をしてください。


小窓で開くファイルのパス：
*２で保存したファイルを指定してください。
ウィンドウの横幅： (半角数字：正の整数)
ウィンドウの縦幅： (半角数字：正の整数)
スクロールバーの有無：
ウィンドウの名前：
ウィンドウを開くリンクの形式：
リンクの文字：
　

 
■カラーエディタのウィンドウを開くページのダウンロードする形式を選択してください。

  【スクリプトを１つのページに組み込む】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。

２．右のボタンを押してファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は一括)】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。

２．右のボタンを押して外部ファイルをダウンロードしてください。
 
３．保存した外部ファイルのファイル名を入力してください。
　　 (ファイルのパスでも可)
 
４．右のボタンを押してHTMLファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は各ページ毎)】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。
 
２．右のボタンを押して外部ファイルをダウンロードしてください。
 
３．保存した外部ファイルのファイル名を入力してください。
　　 (ファイルのパスでも可)
 
４．右のボタンを押してHTMLファイルをダウンロードしてください。
 
５．複数のページが必要な場合は、カスタマイズフォームで設定をし
　　再度HTMLファイルのみダウンロードしてください。 


ew_url = 'fg_remocon_editor.html'; //小窓で開くファイルのパス
ew_x   = 360;                 //ウィンドウの横幅
ew_y   = 172;                 //ウィンドウの縦幅
ew_bar = 'no';                //スクロールバーの有無
ew_id  = 'editor_win';        //ウィンドウの名前


function editor_komadokun()
{ew_komado = open(ew_url,ew_id,"width="+ew_x+",height="+ew_y+",resizable=yes,scrollbars="+ew_bar);
 ew_opener = Math.random();
 if(ew_opener != ew_komado.opener.ew_opener)
 {ew_komado.close();
  komadokun();}
 ew_komado.focus();
 return false;}

<a href="JavaScript:;" onClick="editor_komadokun();">カラーエディタを開く</a>
 

 
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
色見本の横幅： (半角数字：正の整数)
色見本の縦幅： (半角数字：正の整数)
カラーエディタの初期値： (RGB値)
クッキーの名前： (半角英数字)
(通常変更の必要はありません)
文字色変更ボタンの文字：
　
 カスタマイズフォーム   補足説明   改造方法 
 
■特にありません。
 
 カスタマイズフォーム   補足説明   改造方法 
 
■色見本部分の大きさを変更する。(半角数字：正の整数)

//設定〜//ここまでの１〜２行目を変更してください。 
c_tr_width  = 64;
c_tr_height = 14;
■カラーエディタの初期の色を変更する。(RGB値)

//設定〜//ここまでの３行目を変更してください。 
c_tr_shoki  = '#999999';
■クッキーの名前を変更する。(半角英数字)

//設定２〜//ここまでの１行目を変更してください。
通常は変更の必要はありません。 
c_tr_cookie = 'c_tr_cookie';
 
 
  

■ソース１(以下のソースを書き込んで１つのページを作ってください)  
  
<html>
<head>
 <title>リモコン文字色エディタ</title>
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
    //ver.3.0


//設定
c_tr_width  = 64;        //色見本の横幅
c_tr_height = 14;        //色見本の縦幅
c_tr_shoki  = '#999999'; //カラーエディタの初期値
//ここまで


c_tr_stoper  = 0;
id = "";


function c_tr_shoki_rgb()
{document.forms["c_tr_form"].elements["c_tr_rgb"].value = c_tr_shoki;}


function c_tr_check_rgb()
{with(document)
 {if(forms["c_tr_form"].elements["c_tr_rgb"].value.replace("#","").length != 6)
  {return;}
  temp = forms["c_tr_form"].elements["c_tr_rgb"].value.replace("#","");
  forms["c_tr_form"].elements["c_tr_red"].value   = parseInt(temp.substring(0,2),16).toString(10);
  forms["c_tr_form"].elements["c_tr_green"].value = parseInt(temp.substring(2,4),16).toString(10);
  forms["c_tr_form"].elements["c_tr_blue"].value  = parseInt(temp.substring(4,6),16).toString(10);}}


function c_tr_spacer()
{if(document.layers)
 {with(document.layers["c_tr_color"].document)
  {open();
   write('<spacer type="block" width="'+c_tr_width+'" height="'+c_tr_height+'">');
   close();}}}


function c_tr_sreach()
{with(document)
 {if((forms["c_tr_form"].elements["c_tr_red"].value-0) > 255)
  {forms["c_tr_form"].elements["c_tr_red"].value = 255;}
  else if((forms["c_tr_form"].elements["c_tr_green"].value-0) > 255)
  {forms["c_tr_form"].elements["c_tr_green"].value = 255;}
  else if((forms["c_tr_form"].elements["c_tr_blue"].value-0) > 255)
  {forms["c_tr_form"].elements["c_tr_blue"].value = 255;}
  else if((forms["c_tr_form"].elements["c_tr_red"].value-0) < 0)
  {forms["c_tr_form"].elements["c_tr_red"].value = 0;}
  else if((forms["c_tr_form"].elements["c_tr_green"].value-0) < 0)
  {forms["c_tr_form"].elements["c_tr_green"].value = 0;}
  else if((forms["c_tr_form"].elements["c_tr_blue"].value-0) < 0)
  {forms["c_tr_form"].elements["c_tr_blue"].value = 0;}
  temp_r   = (forms["c_tr_form"].elements["c_tr_red"].value-0).toString(16);
  if(temp_r.length == 1)
  {temp_r = "0"+temp_r;}
  temp_g   = (forms["c_tr_form"].elements["c_tr_green"].value-0).toString(16);
  if(temp_g.length == 1)
  {temp_g = "0"+temp_g;}
  temp_b   = (forms["c_tr_form"].elements["c_tr_blue"].value-0).toString(16);
  if(temp_b.length == 1)
  {temp_b = "0"+temp_b;}
  temp_rgb = "#"+temp_r+temp_g+temp_b;
  if(!c_tr_stoper)
  {forms["c_tr_form"].elements["c_tr_rgb"].value = temp_rgb;}
  if(document.all)
  {all("c_tr_color").style.background = temp_rgb;}
  else if(document.getElementById)
  {getElementById("c_tr_color").style.background = temp_rgb;}
  else if(document.layers)
  {layers["c_tr_color"].bgColor = temp_rgb;}}
 setTimeout('c_tr_sreach()',200);}


function c_tr_edit_start(posi,i)
{clearTimeout(id);
 with(document)
 {temp = forms["c_tr_form"].elements["c_tr_"+posi].value-0+i
  if(temp > 255)
  {temp = 255;}
  else if(temp < 0)
  {temp = 0;}
  forms["c_tr_form"].elements["c_tr_"+posi].value = temp;}
 id = setTimeout('c_tr_edit_start("'+posi+'",'+i+');',50);}


function c_tr_edit_stop()
{clearTimeout(id);}


function c_tr_stop()
{c_tr_stoper = 1;}


function c_tr_start()
{c_tr_stoper = 0;}


function change_fgcolorB()
{temp = document.forms["c_tr_form"].elements["c_tr_rgb"].value;
 with(opener.document)
 {if(document.all)
  {all.tags("body")[0].style.color = temp;}
  else if(document.getElementById)
  {getElementsByTagName("body")[0].style.color = temp;}
  else if(document.layers)
  {c_tr_date = new Date();
   c_tr_date.setTime(new Date().getTime()+15*1000);
   cookie=opener.c_tr_cookie+"="+temp+"; expires="+c_tr_date.toGMTString()+";";
   if(cookie.indexOf(opener.c_tr_cookie+"="+temp) != -1)
   {location.reload();}
   else
   {alert('cookieを有効にしてご利用ください');}}}}


with(document)
{open();
 write('<style type="text/css">\n<!-\-\n');
 if(document.all || document.getElementById)
 {write('.c_tr_style {background:'+c_tr_shoki+';width:'+c_tr_width+'px;height:'+c_tr_height+'px;}\n');}
 else if(document.layers)
 {write('.c_tr_style {position:relative;}\n');}
 write('.c_tr_style2{background:'+c_tr_shoki+';}\n');
 write('\n-\->\n<\/style>\n')}


// -->
</script>
</head>
<body>
<form id="c_tr_form" name="c_tr_form">
<table border="0" cellspacing="0" cellpadding="3"<tr><td>
<table border="0" cellspacing="1" cellpadding="0"><tr>
<td class="c_tr_style2"><div class="c_tr_style" id="c_tr_color">
<script type="text/javascript" langurge="JavaScript"><!--
c_tr_spacer();
// --></script></div></td>
</tr></table></td>
<td><input type="text" size="8" value="#000000" id="c_tr_rgb" name="c_tr_rgb" onChange="c_tr_check_rgb();" onfocus="c_tr_stop();" onBlur="c_tr_start();">
<input type="button" value="文字色変更" onClick="change_fgcolorB();"></td>
</tr></table>
<table border="0" cellspacing="0" cellpadding="1"><tr>
<td>赤：<input type="text" size="3" id="c_tr_red" name="c_tr_red">
<input type="button" value="▲" name="c_tr_b1" onMouseDown="c_tr_edit_start('red',1);" onMouseOut="c_tr_edit_stop();" onMouseUp="c_tr_edit_stop();"
><input type="button" value="▼" name="c_tr_b2" onMouseDown="c_tr_edit_start('red',-1);" onMouseOut="c_tr_edit_stop();" onMouseUp="c_tr_edit_stop();"></td>
<td>緑：<input type="text" size="3" id="c_tr_green" name="c_tr_green">
<input type="button" value="▲" name="c_tr_b3" onMouseDown="c_tr_edit_start('green',1);" onMouseOut="c_tr_edit_stop();" onMouseUp="c_tr_edit_stop();"
><input type="button" value="▼" name="c_tr_b4" onMouseDown="c_tr_edit_start('green',-1);" onMouseOut="c_tr_edit_stop();" onMouseUp="c_tr_edit_stop();"></td>
<td>青：<input type="text" size="3" id="c_tr_blue" name="c_tr_blue">
<input type="button" value="▲" name="c_tr_b5" onMouseDown="c_tr_edit_start('blue',1);" onMouseOut="c_tr_edit_stop();" onMouseUp="c_tr_edit_stop();"
><input type="button" value="▼" name="c_tr_b6" onMouseDown="c_tr_edit_start('blue',-1);" onMouseOut="c_tr_edit_stop();" onMouseUp="c_tr_edit_stop();"></td>
</tr></table></form>
<script type="text/javascript" langurge="JavaScript"><!--
c_tr_shoki_rgb();
c_tr_check_rgb();
c_tr_sreach();
// --></script>
</body>
</html>

■ソース２(以下のソースを<head>〜</head>の間に書き込んでください)  
  
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/


//設定２
c_tr_cookie = 'c_tr_cookie'; //クッキーの名前
//ここまで


with(document)
{if(document.layers)
 {temp_cookie = cookie;
  while(temp_cookie.indexOf(" ") != -1)
  {temp_cookie = temp_cookie.replace(" ","");}
  temp_cookie = temp_cookie.split(";");
  for(i in temp_cookie)
  {if(temp_cookie[i].indexOf(c_tr_cookie) != -1)
   {temp_cookie2 = temp_cookie[i].split('=');
    if(temp_cookie2[0] == c_tr_cookie)
    {fgColor = temp_cookie2[1];
     open();
     write('<style type="text/css">\n<!--\n');
     write('body {color:'+temp_cookie2[1]+';}\n');
     write('-\->\n</style>\n');
     close();
     c_tr_shoki  = temp_cookie2[1];
     break;}
    else
    {temp_cookie2 = new Array();}}}}}

// -->
</script>


■スクリプト無効時にはちらっと小窓君も動作しませんので
　このスクリプトにおける対策は特にありません。

ウェブ木箱＞サンプル集
copyright(C) 2002-2004 あう