Archive  RSS  Login

のんびり歩き。

ゲームは1日2時間まで


 
Category: スポンサー広告  

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


Category: ブログカスタマイズ&PC知識関連  

Farbtastic カラーピッカー設置


すっきりしたデザインの色見本を直感的にクリックするだけでフルカラー(16,777,216色)の選択が可能なjQuery のプラグイン、「Farbtastic」というカラーピッカーを設置しました1028421.gif
(プラグイン1に置いてます)
これをあるサイト様で見て以来、ずっとfc2ブログでも表示してみたいと思っていたんだけど
その方法が調べてもさっぱりわからず、何度か挑戦してようやくできた


http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/からfarbtastic12.zipをDLする。


color_400x200.jpg


②解凍したファイル群の中で使うのは5つ。
 A.farbtastic.js 
 B.wheel.png
 C.marker.png
 D.mask.png
 E.farbtastic.css

③AからDのファイルをfc2へ画像と同じようにアップロード。

④EのCSSを開くと

/**
* Farbtastic Color Picker 1.2
* © 2008 Steven Wittens
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
*/
.farbtastic {
position: relative;
}
.farbtastic * {
position: absolute;
cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
width: 195px;
height: 195px;
}
.farbtastic .color, .farbtastic .overlay {
top: 47px;
left: 47px;
width: 101px;
height: 101px;
}
.farbtastic .wheel {
background: url(wheel.png) no-repeat;
width: 195px;
height: 195px;
}
.farbtastic .overlay {
background: url(mask.png) no-repeat;
}
.farbtastic .marker {
width: 17px;
height: 17px;
margin: -8px 0 0 -8px;
overflow: hidden;
background: url(marker.png) no-repeat;
}


↑のように長いソースが入っているので、青太字の箇所をさっきアップロードしたファイルのURLに置き換えます。

⑤変更したCSSをfc2へアップロード。

⑥ブログテンプレートのHTMLを編集。
 <head></head>タグの間に以下のコードを追加する。

<script type="text/javascript" src="/lib/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" src=" jsのアップロードURL">
</script>
<link rel="stylesheet" href="変更後CSSのアップロードURL"
type="text/css" />

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#colorpicker').farbtastic('#color');
});
</script>



⑦共有プラグインから適当に1つDLしてきてソースを全部消し、Farbtastic用にします。
 共用プラグインの編集>HTMLの編集を開いて以下のコードを入れる。

<div id="colorpicker"></div>

<form class="hex_code"><input type="text" id="color" name="color" value="#123456" /></form>:

青太字には初期表示させたい色の番号を入れてください。



以上です!
ちょっと使ってみようかなという人はぜひ。

この記事は役に立ちましたか?
↓いいね!とおもったら拍手おねがいします1028421.gif


Comments

Leave a Comment

カレンダー
プロフィール

ぼたん

Author:ぼたん
AION <Yustiel>
ボウウイング:

❀当ブログでのお約束❀

Farbtastic: jQuery     color picker
Hex Color Code
favorite♪
検索フォーム
Comments...A
<>+-
copyright
(c) 北京完美時空網絡技術有限公司 ALL RIGHTS RESERVED. Copyright (c) 2006-2007 C&C Media Co.,Ltd. All Rights Reserved. The Tower of AION(TM) is a trademark of NCsoft Corporation. Copyright (c) 2009 NCsoft Corporation. NC Japan K.K. was granted by NCsoft Corporation the right to publish, distribute and transmit The Tower of AION(TM) in Japan. All rights reserved.
ブロとも申請フォーム
QRコード
QRコード
geotargeting

ジオターゲティング

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。