 |
ColorPickerのダウンロード |
以下のサイトからZIP形式のファイルをダウンロードします。
ColorPicker - jQuery plugin
https://www.eyecon.ro/colorpicker/
Downloadのタブをクリックしてダウンロードページへ進みます。
colorpicker.zip のリンクをクリックしてダウンロードします。
ダウンロードしたファイルを解凍すると css 、images、js の3つのフォルダが出てきます。
これを設置するHTMLページが置かれているディレクトリに jscolorpicker というディレクトリを作成し、
その中に css 、images、js をフォルダごとコピーして下さい。
備考
既にjQueryが配置されている場合に、別のバージョンで上書きしないよう別のディレクトリに置きましたが、
任意のディレクトリに配置しても結構です。
images に格納されている画像などの配置を変更する場合は colorpicker.cssの画像パスを変更する必要が
あるなど面倒になりますので上記の配置がおすすめです。
| |
レイアウト枠と一行テキスト領域の設置 |
表を配置したい場所を左クリックしてカーソルを表示させます。
「挿入」 → 「その他」 → 「HTMLタグ」 とクリックします。
「DIV」 をクリックして 「挿入」 、「閉じる」 をクリックします。
すると以下のようにレイアウト枠が挿入され、選択された状態になります。
上記の状態のまま 「編集」 → 「スタイルの設定」 とクリックし、
「定義済みクラスの指定(2)」 のフォームに picker1 と入力します。
この picker1 という文字列は後でソース編集時に使用しますので覚えておきます。
複数ある場合は picker1、picker2、picker3 ・・・ と連番の名称がおすすめです。
次にページ編集画面上で「挿入」 → 「フォームと入力部品」 → 「一行テキスト領域」 とクリックし、
一行テキスト領域を挿入します。
挿入した一行テキスト領域をクリックし、「DIV」の操作と同じようにクラスを指定します。
挿入した「レイアウト枠」と「一行テキスト領域」は2つで1組となっており、
複数入力する場合は同じ組は同じクラスを指定する事に注意して下さい。
カラーピッカーを設置するフォームが複数ある場合は上記の操作を繰り返します。
HTMLソースに直接挿入する場合は以下のようになります。
下の例では3つの入力フォームがあり、フォーム左側にプレビュー用の■があります。
| |
ヘッダ内にソースを貼り付ける |
ビルダーの 「編集」 → 「ページの属性」 とクリックし 「その他」のタブをクリックします。
「その他のHTMLタグ」 と記載された入力枠がありますので、そこへ以下の行を追加します。
追加したら 「OK」 ボタンをクリックして下さい。
備考
直接HTMLソースに追記する場合は <head> 〜 </head> の間に追加します。
| |
貼り付けたソースを編集する |
HTMLソースタブをクリックし以下の行を探します。
赤枠で囲った部分が設置した入力フォームと同じクラス名になるように編集していきます。
'領域1, 領域2, 領域3' となっており、各項目は input.クラス名 と入力して下さい。
上記の手順のまま操作を行ってきた場合は input.picker1 などになります。
例えば一行テキスト領域が2つの場合は、
'input.picker1, input.picker2' という具合に修正します。
以上の操作で設置は完了です。
備考
前後の ' 記号や区切りの , 記号が足りないと実行時エラーになります。
| |
動作確認 |
プレビュー画面にして動作確認を行ってみます。
一行テキスト領域をクリックするとカラーピッカーが表示され、色を選択して右下のボタンを押すと
テキスト領域に色番号が入力され、左の■が選択した色と同じ色に変化します。
| |
動作しない場合は |
テキスト領域をクリックしても何も起こらない場合は、ヘッダ内にソースが挿入されているか、
「テキスト領域に指定したクラス名」と「貼り付けたソース内のクラス名」が一致しているか確認します。
エラーが出て動作しない場合は、「貼り付けたソース」を編集した際に余分な '記号や ,記号 が
除去されていないか確認して下さい。
|
