どうも!LSSです!!
ブラウザ上で動作するカラーピッカーを作り、サイドバーに設置してみました!
こんな感じで表示されます
安直に、inputタグの type="color" を置いて、その色コードを表示しただけ…だとちょっと味気ないので、10個の提案色をついでに表示していますw
コード
<p>色を選択するとカラーコードが分かり、さらに10個の提案色が出てきます。</p>
<p><input id="sbcolorselect" type="color" value="#888888" /> <span id="sbcolorselectis">#888888</span></p>
<div id="sbcolors"> </div>
<script>// <![CDATA[
sbcolorselect.addEventListener('input',sbcolorselectch,false);
sbcolorselectch();
function sbcolorselectch(){
sbcolorselectis.innerHTML=sbcolorselect.value;
sbcolortxt='';
for(sbcolori=0;sbcolori<10;sbcolori++){
sbcolorsmp='#'+('0'+(parseInt(sbcolorselect.value.substr(1,2),16)+Math.floor(Math.random()*(255-parseInt(sbcolorselect.value.substr(1,2),16)))).toString(16)).substr(-2)+('0'+(parseInt(sbcolorselect.value.substr(3,2),16)+Math.floor(Math.random()*(255-parseInt(sbcolorselect.value.substr(3,2),16)))).toString(16)).substr(-2)+('0'+(parseInt(sbcolorselect.value.substr(5,2),16)+Math.floor(Math.random()*(255-parseInt(sbcolorselect.value.substr(5,2),16)))).toString(16)).substr(-2);
sbcolortxt+='<span style="width:100%;background-color:'+sbcolorsmp+';padding:2px;">'+sbcolorsmp+'</span> ';
}
sbcolors.innerHTML=sbcolortxt;
}
// ]]></script>
はてなブログのダッシュボード→デザイン→工具アイコン→サイドバー→モジュールを追加 で、「HTML」を選び、上記コードをコピペする事で設置できます。
詳しくは
にスクリーンショット付きで手順を書いています^^
色を探したい時は当ブログを開くといつでも探せます
というアクセスアップを狙っても良かったのですが、もし自分のブログに設置したいという方がおられましたら、ご自由にどうぞ、です^^
あとがき
記事内のコードとの干渉を避けるために、idや関数名、変数名がやたら長くなっていますw
「提案色」は
の「色味」と同じ手法で、「選択色」のR・G・Bそれぞれを「選択色より明るい色」からランダムで選んでいるので、黒を選択すると最もバラエティに富み、白に近いほど範囲が狭くなります。
あと、余談なんですが、Googleで「カラーピッカー」とだけ入れて検索すると、そのまま検索候補のトップにカラーピッカーが出てくるんですね!
初めて知りましたw
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^