JQuery プラグイン「Palette Color Picker」の使い方です。パレット型のカラーピッカーです。設置や設定方法をまとめておきます。
Webツールで色を選択する必要があり、パレットカラーピッカーを導入しました。WordPress(Cocoon)の記事の中で使います。
パレットカラーの色データも公開しておきます。
JQuery プラグイン「Palette Color Picker」とは？
jQueryプラグインのカラーピッカーです。パレットから色が選択できます。色は任意のカラーコードを、あらかじめ設定可能です。綺麗で高機能なプラグインです。
JQuery プラグイン「Palette Color Picker」の使い方
JQuery Palette Color Picker v1.13 の設置
https://github.com/carloscabo/jquery-palette-color-picker設置方法や利用法は、README.mdに記載があります。
必要なモジュールは以下の３つです。
[Requirements]
JQuery 1.7+
palette-color-picker.js
palette-color-picker.css
- JQueryは、WordPressに実装済です。
- サンプルとしてready.jsが添付されています。
これを修正して、そのまま利用することにします。
ここでは、ready.jsに色データを定義しました。
当サイト（https://lufa-tawasi.com/）では
/plug-in/color-picker/palette-color-picker.js
/plug-in/color-picker/palette-color-picker.css
/plug-in/color-picker/ready.js
としてFTPで配置しました。
ready.jsは、後ろにコードを置きました。コピペでお使いください。
Cocoon「head_custom」にCSS/JSソースを記述
JQuery プラグイン「Palette Color Picker」は、今回、WordPress(Cocoon)の特定の記事（この記事の中だけ）で使います。Cocoonのカスタムフィールド「head_custom」に、次のように記載しました。（以下のコードが<head>のタグの中にくればいいです）
<!-- palette-color-picker -->
<link rel="stylesheet" href="/plug-in/color-picker/palette-color-picker.css">
<script src="/plug-in/color-picker/palette-color-picker.js"></script>
<script src="/plug-in/color-picker/ready.js"></script>
<!-- /palette-color-picker -->HTMLソースを記述
<input type="text" id="my-color-picker" name="my-color-picker" value="#005aa0">
↑ 動作見本として設置しておきます。お試しください。
idはユニークであることが動作条件です。ここでは「my-color-picker」というinput要素がマウスクリックされたとき、JQueryが発火します。
デフォルトでは２秒間、パレットが表示されています。色を選択して欄外をクリックすると、パレットが非表示になります。
ready.jsについて
JQuery プラグイン「Palette Color Picker」の各種オプションは、ready.jsで指定します。各自、お好みの色を定義してください。
実際のところ、カラーパレットにどの色を定義するか悩ましいです。いろいろ悩んだ結果・・
- 「虹の7色」と「黒のモノトーン」を基本色として・・
- 基本8色を6段階淡くし・・
- 全48色（6×8）のカラーパレットを作成しました。
当初は「FF(256)」を４つに分け、4x4x4の64色を作成してみましたが、機械的に割った色はハテナ？でした。次にWebカラーネームで設置しましたが、色が多すぎて選ぶのが大変でした。
このプラグインは、オプションが豊富です。お好みのスタイルでカスタマイズしてください。
- クリアボタンが追加できます。
- パレットの表示位置を指定できます。
- その他・・、詳しくはドキュメントを参照してください。
// https://lufa-tawasi.com/
//
// to JQuery Palette Color Picker v1.13
// Color data
$(document).ready(function(){
$('#my-color-picker').paletteColorPicker({
colors: [
'#000000','#292929','#4e4e4e','#a2a2a2','#d0d0d0','#ffffff',
'#c7000b','#d84833','#e77058','#f39480','#fbb8a9','#ffdbd3',
'#d28300','#de973c','#e9ab64','#f2bf8a','#f9d4b0','#fde9d7',
'#00873c','#459b5b','#6daf7a','#92c39a','#b6d7bb','#dbebdc',
'#dfd000','#e8d749','#f0df72','#f6e796','#fbefb9','#fef7dc',
'#005aa0','#4973b0','#728dc0','#96a8cf','#b9c4df','#dce1ef',
'#181878','#493a8e','#6f5ea5','#9384bb','#b7abd2','#dbd4e8',
'#800073','#973d89','#ad65a0','#c38bb7','#d8b1cf','#ecd8e7'
],
clear_btn: null,
position: 'downside', // default -> 'upside'
});
});
コメント
常に開いた2秒後固定で自動的に閉じてしまうのが扱いにくいと感じました。
特に、開いて色を探している最中に消えてしまう、選んだ色が合わず別の色にしようと試している間に消えてしまう、という動作は非常に不快に感じ、使うのをやめよう、という判断にも繋がります。
初回選択の前はタイマーは動作させない、何か色を選択したらその時点にタイマーを初期化、といった動作は必須かと思います。
コメントありがとうございます。
「jquery-palette-color-picker」の本体「palette-color-picker.js」に
「Default settings」の項があります。
// Default settings
defaults = {
custom_class: null,
colors: null,
position: ‘upside’, // upside | downside
insert: ‘before’, // default
clear_btn: ‘first’, // default
timeout: 2000, // default
set_background: false, // default
close_all_but_this: false // default
},
ここでの初期設定値を参考に「ready.js」でカスタマイズすると
ある程度は、お好みの挙動になると思います。