jQueryUIのオリジナルテーマをThemeRollerで作成する

jquery

こんにちわ!2013年4月7日、東京は低気圧のせいで強風です。(**)
外出出来ないので、家にこもってブログを書いています。

jQueryUIの標準のテーマはいかにもjQuery使っています感がでているので、みなさんjQueryのテーマを各自で変更していると思います。

jQueryUIのテーマをCSSでゴリゴリ変更することも可能ですが、ThemeRollerを使えばGUIでjQueryテーマを変更することが出来ます。

[スポンサーリンク]

この章でやること

ThemeRollerを使ってjQueryUIのテーマを変更します。
変更後のテーマ(CSS)をダウンロードします。
ダウンロードしたテーマ(CSS)を自分のサイトにセットします。

ThemeRollerを使ってみよう

jQuery本家サイトの「ThemeRoller」へアクセスします。

テーマのひな形を決めます。
themeroller-use1

テーマをカスタマイズします。
themeroller-use2

ダウンロード画面へいきましょう。
themeroller-use3

CSSをダウンロードします。
どのウィジェット(アコーディオンとかタブとか)のCSSをダウンロードするか聞かれます。
使用しないウィジェットのCSSは省略することが出来ます。
themeroller-use4

ダウンロードしたCSSを自分のサイトにセットする。
jQueryの標準CSS(jquery-ui.css)と共存させることも可能です。
表示されるウィジェットは、カスタマイズしたテーマが優先されます。

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" media="all" href="http://javatechnology.net/wp-content/css/jquery-ui-1.10.2.custom-tab.css">

さいごに

GUIのCSSジェネレータって、自分の思い通りなデザインが作れなくって、結局はCSSを自分で編集することも少なくありませんでした。
ThemeRollerを使ってみた感想としては、思ったより使える。というのが素直な感想です。
(ボーダーを太くしたり、もう少し色々出来ればなおよかったのですが、、)

CSSをゴリゴリ書いて、jQuery UI のデザインをカスタマイズするのは、本人が思っている以上に体力と時間がかかります。
ThemeRollerを積極的につかいましょう!
それでは!