「背景色コントローラ Fine」背景色のRGBを256階調で指定、変更できるコントローラ

ファンブログおすすめツール投稿日：2012年07月15日 23:10

背景色に使えるカラーコードは web 上に様々色見本のサイトさんがありますので、そちらから好みのカラーコードを探してきて変更するだけなんですが、実際に自分のブログの背景色を変更してみますと思っていたイメージと違ってしまうことが結構多いんです。
「色的にはいいんだけど...」「もう少し薄い色の方が...」「もうちょっと黄色味を強く...」とか思うたびにカラーコードを変更して「プレビュー」で確認していく作業の繰り返しとなり、作業は単純なんですがこれが意外と面倒なんです。

そんなときに超便利なのが、Masa 氏の Scrap Dir. さんで無料公開・配布されています、セーフカラー（216色）で表示できる背景色コントローラと、フルカラー（16,777,216色）で表示できる背景色コントローラ Fineです。

説明するより試していただいた方が早いので、ボックスの下の数字や ▲▼ ボタンをクリックしてみてください。

　
　　　　背景色コントローラ（216色）　　　　　　　　　背景色コントローラ Fine（16,777,216色）

「CLOSE」ボタンは反応しません。
こちらはお借りしているサンプルなのでコントローラ周辺の背景色が変更されますが、実際に設置しますと設置したブログの背景色が変更されます。
旧スキンでは使用できない場合がございます。　► 対応スキンについて

いかがでしたでしょうか？ ▲▼ ボタンをカチカチと押すだけで、コントローラの周りの背景色が変わっていくのを体験していただけたかと思います。実際に設置しますと設置したブログの背景色が変更され、連続してプレビューすることが出来ますので、ストレスなく背景色を選ぶことが出来ると思います。

► Scrap Dir.

とても便利な「背景色コントローラ Fine」ですが、使っていきますと数字錠のようにカチカチと数字を合わせる作業が少し大変になってきます。216色の「背景色コントローラ」のようにマウスで英数字が選べればもっと便利かと思いましたので、216色バージョンを16,777,216色バージョンに改造したものを、Scrap Dir. さんの「利用規定」に則り、こちらで公開・再配布させていただくことにしました。

※ 改造した「(改)背景色コントローラ」はサイドバーの一番下に設置してあります。ご自由にお試しください。
※ JavaScriptをダウンロードしてお使いになる場合は [JavaScript 利用規定] をご覧ください。
※ 旧スキンでは使用できない場合がございます。　► 対応スキンについて

こちらのコードをコピーして、サイドバーの項目に貼り付けるだけでご利用できます。

<!-- ==================================================================================
                          背景色コントローラ Version 0.02
                      http://homepage3.nifty.com/masas/sdir/
                    Copyright(c)2001 Masa, All Rights Reserved.
             （改）背景色コントローラ 16,777,216 Color Custom Version
          改造・再配布：＋ぷちカスタマイズ日記＋ https://fanblogs.jp/pamphlet/
=================================================================================== -->
<script type="text/javascript" language="JavaScript">
<!--
function changeBgcolor()
{
  var CTLMODE = 1;  // コントロールモード(1:自フレームのみ、2:両方、3:他フレームのみ)

  if (CTLMODE <= 2) {
    document.bgColor = "#"
      + document.bcctl.rval1.options[document.bcctl.rval1.selectedIndex].value
      + document.bcctl.rval2.options[document.bcctl.rval2.selectedIndex].value
      + document.bcctl.gval1.options[document.bcctl.gval1.selectedIndex].value
      + document.bcctl.gval2.options[document.bcctl.gval2.selectedIndex].value
      + document.bcctl.bval1.options[document.bcctl.bval1.selectedIndex].value
      + document.bcctl.bval2.options[document.bcctl.bval2.selectedIndex].value;
  }
  if (CTLMODE >= 2) {
    window.parent.FRAME2.document.bgColor = "#"
      + document.bcctl.rval1.options[document.bcctl.rval1.selectedIndex].value
      + document.bcctl.rval2.options[document.bcctl.rval2.selectedIndex].value
      + document.bcctl.gval1.options[document.bcctl.gval1.selectedIndex].value
      + document.bcctl.gval2.options[document.bcctl.gval2.selectedIndex].value
      + document.bcctl.bval1.options[document.bcctl.bval1.selectedIndex].value
      + document.bcctl.bval2.options[document.bcctl.bval2.selectedIndex].value;
  }
}
// -->
</script>

    <form name="bcctl">
    <table summary="bgcolor controller" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <th style="color:#ffffff;background-color:#ff0000;">R</th>
        <th style="color:#ffffff;background-color:#ff6666;">R</th>
        <th style="color:#ffffff;background-color:#009900;">G</th>
        <th style="color:#ffffff;background-color:#33cc33;">G</th>
        <th style="color:#ffffff;background-color:#0000ff;">B</th>
        <th style="color:#ffffff;background-color:#6666ff;">B</th>
      </tr>
      <tr>
        <td>
          <select name="rval1" size="16" onChange="changeBgcolor()">
            <option value="F" selected>F</option>
            <option value="E">E</option>
            <option value="D">D</option>
            <option value="C">C</option>
            <option value="B">B</option>
            <option value="A">A</option>
            <option value="9">9</option>
            <option value="8">8</option>
            <option value="7">7</option>
            <option value="6">6</option>
            <option value="5">5</option>
            <option value="4">4</option>
            <option value="3">3</option>
            <option value="2">2</option>
            <option value="1">1</option>
            <option value="0">0</option>
          </select>
        </td>
        <td>
          <select name="rval2" size="16" onChange="changeBgcolor()">
            <option value="F" selected>F</option>
            <option value="E">E</option>
            <option value="D">D</option>
            <option value="C">C</option>
            <option value="B">B</option>
            <option value="A">A</option>
            <option value="9">9</option>
            <option value="8">8</option>
            <option value="7">7</option>
            <option value="6">6</option>
            <option value="5">5</option>
            <option value="4">4</option>
            <option value="3">3</option>
            <option value="2">2</option>
            <option value="1">1</option>
            <option value="0">0</option>
          </select>
        </td>
        <td>
          <select name="gval1" size="16" onChange="changeBgcolor()">
            <option value="F" selected>F</option>
            <option value="E">E</option>
            <option value="D">D</option>
            <option value="C">C</option>
            <option value="B">B</option>
            <option value="A">A</option>
            <option value="9">9</option>
            <option value="8">8</option>
            <option value="7">7</option>
            <option value="6">6</option>
            <option value="5">5</option>
            <option value="4">4</option>
            <option value="3">3</option>
            <option value="2">2</option>
            <option value="1">1</option>
            <option value="0">0</option>
          </select>
        </td>
        <td>
          <select name="gval2" size="16" onChange="changeBgcolor()">
            <option value="F" selected>F</option>
            <option value="E">E</option>
            <option value="D">D</option>
            <option value="C">C</option>
            <option value="B">B</option>
            <option value="A">A</option>
            <option value="9">9</option>
            <option value="8">8</option>
            <option value="7">7</option>
            <option value="6">6</option>
            <option value="5">5</option>
            <option value="4">4</option>
            <option value="3">3</option>
            <option value="2">2</option>
            <option value="1">1</option>
            <option value="0">0</option>
          </select>
        </td>
        <td>
          <select name="bval1" size="16" onChange="changeBgcolor()">
            <option value="F" selected>F</option>
            <option value="E">E</option>
            <option value="D">D</option>
            <option value="C">C</option>
            <option value="B">B</option>
            <option value="A">A</option>
            <option value="9">9</option>
            <option value="8">8</option>
            <option value="7">7</option>
            <option value="6">6</option>
            <option value="5">5</option>
            <option value="4">4</option>
            <option value="3">3</option>
            <option value="2">2</option>
            <option value="1">1</option>
            <option value="0">0</option>
          </select>
        </td>
        <td>
          <select name="bval2" size="16" onChange="changeBgcolor()">
            <option value="F" selected>F</option>
            <option value="E">E</option>
            <option value="D">D</option>
            <option value="C">C</option>
            <option value="B">B</option>
            <option value="A">A</option>
            <option value="9">9</option>
            <option value="8">8</option>
            <option value="7">7</option>
            <option value="6">6</option>
            <option value="5">5</option>
            <option value="4">4</option>
            <option value="3">3</option>
            <option value="2">2</option>
            <option value="1">1</option>
            <option value="0">0</option>
          </select>
        </td>
      </tr>
    </table>
    </form>
<!-- =========================== End of 背景色コントローラ ======================== -->
<div style="font-size:10px; margin-top:5px;"><a href="http://homepage3.nifty.com/masas/sdir/" target="_blank" style="color:#ccc;" title="Scrap Dir.">Scrap Dir.</a>　<a href="https://fanblogs.jp/pamphlet/archive/269/0" target="_blank" style="color:#ccc;" title="＋ぷちカスタマイズ日記＋">Petit Customization Diary</a></div>

ボックス内にマウスを置くだけでコードが全て選択されます。右ボタン⇒コピーでお持ち帰りください。

このブログではお試しいただくために常設しておりますが、常にサイドバーに設置しておく必要はございません。
ご使用になる時だけ「項目の選択/並び替え」で「使用する機能」に入れてお使いください。

※ 上記ソースコード、ツールのご利用につきましては、利用者の自己責任にてお願いします。

≪　前の記事に戻る　｜　次の記事を読む　≫