JQueryMobileを使ってスマートフォン用のサイトを作りました。
今さらですが、 いや〜これ作った人エライですね！
HTMLとCSSでのサイト制作経験のある人なら、ホントに数時間でスマートフォン用サイトを作ることができます！
用意されているカラーセットは５種類
あらかじめ用意されているカラーセットは黒／ブルー／ライトグレー／白／黄色の５種類あります。
a...黒
b...ブルー
c...ライトグレー
d...白
e...黄色
HTMLのdiv要素とかにdata-theme="a"などを追加することで、カラー変更できるようになっています。
ただ今回、コーポレートカラーが赤だったので
赤セットがないんなら作ればいいってことで、CSSをいじって作りました。
赤のカラーテーマを使えるCSSを追加
こんな感じの、赤といっても茶色に近い深めのレッドになっております。
使い方は、下記のCSSを追加して、data-theme="f"とするだけでOKです！
CSS変更するのって結構手間かかるので、チャッチャと作りたい人は、コピペでどうぞ。
CSS
/* F
-----------------------------------------------------------------------------------------------------------*/
.ui-bar-f {
border: 1px solid #920000 /*{b-bar-border}*/;
background: #950303 /*{b-bar-background-color}*/;
color: #fff /*{b-bar-color}*/;
font-weight: bold;
text-shadow: 0 /*{b-bar-shadow-x}*/ 1px /*{b-bar-shadow-y}*/ 1px /*{b-bar-shadow-radius}*/ #931527 /*{b-bar-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #dc2f2f /*{b-bar-background-start}*/), to( #d22323 /*{b-bar-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #dc2f2f /*{b-bar-background-start}*/, #950303 /*{b-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #dc2f2f /*{b-bar-background-start}*/, #950303 /*{b-bar-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #dc2f2f /*{b-bar-background-start}*/, #950303 /*{b-bar-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #dc2f2f /*{b-bar-background-start}*/, #950303 /*{b-bar-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #dc2f2f /*{b-bar-background-start}*/, #950303 /*{b-bar-background-end}*/);
}
.ui-bar-f,
.ui-bar-f input,
.ui-bar-f select,
.ui-bar-f textarea,
.ui-bar-f button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-bar-f .ui-link-inherit {
color: #fff /*{b-bar-color}*/;
}
.ui-bar-f a.ui-link {
color: #ddf0f8 /*{b-bar-link-color}*/;
font-weight: bold;
}
.ui-bar-f a.ui-link:visited {
color: #ddf0f8 /*{b-bar-link-visited}*/;
}
.ui-bar-f a.ui-link:hover {
color: #ddf0f8 /*{b-bar-link-hover}*/;
}
.ui-bar-f a.ui-link:active {
color: #ddf0f8 /*{b-bar-link-active}*/;
}
.ui-body-f,
.ui-overlay-f {
border: 1px solid #999 /*{b-body-border}*/;
background: #f3f3f3 /*{b-body-background-color}*/;
color: #222 /*{b-body-color}*/;
text-shadow: 0 /*{b-body-shadow-x}*/ 1px /*{b-body-shadow-y}*/ 0 /*{b-body-shadow-radius}*/ #fff /*{b-body-shadow-color}*/;
font-weight: normal;
background-image: -webkit-gradient(linear, left top, left bottom, from( #ddd /*{b-body-background-start}*/), to( #ccc /*{b-body-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/);
}
.ui-overlay-f {
background-image: none;
border-width: 0;
}
.ui-body-f,
.ui-body-f input,
.ui-body-f select,
.ui-body-f textarea,
.ui-body-f button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-body-f .ui-link-inherit {
color: #333 /*{b-body-color}*/;
}
.ui-body-f .ui-link {
color: #2489ce /*{b-body-link-color}*/;
font-weight: bold;
}
.ui-body-f .ui-link:visited {
color: #2489ce /*{b-body-link-visited}*/;
}
.ui-body-f .ui-link:hover {
color: #2489ce /*{b-body-link-hover}*/;
}
.ui-body-f .ui-link:active {
color: #2489ce /*{b-body-link-active}*/;
}
.ui-btn-up-f {
border: 1px solid #044062 /*{b-bup-border}*/;
background: #9a1414 /*{b-bup-background-color}*/;
font-weight: bold;
color: #fff /*{b-bup-color}*/;
text-shadow: 0 /*{b-bup-shadow-x}*/ 1px /*{b-bup-shadow-y}*/ 1px /*{b-bup-shadow-radius}*/ #710202 /*{b-bup-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #c32229 /*{b-bup-background-start}*/), to( #9a1414 /*{b-bup-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #c32229 /*{b-bup-background-start}*/, #9a1414 /*{b-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #c32229 /*{b-bup-background-start}*/, #9a1414 /*{b-bup-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #c32229 /*{b-bup-background-start}*/, #9a1414 /*{b-bup-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #c32229 /*{b-bup-background-start}*/, #9a1414 /*{b-bup-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #c32229 /*{b-bup-background-start}*/, #9a1414 /*{b-bup-background-end}*/);
}
.ui-btn-up-f:visited,
.ui-btn-up-f a.ui-link-inherit {
color: #fff /*{b-bup-color}*/;
}
.ui-btn-hover-f {
border: 1px solid #00415e /*{b-bhover-border}*/;
background: #4b88b6 /*{b-bhover-background-color}*/;
font-weight: bold;
color: #fff /*{b-bhover-color}*/;
text-shadow: 0 /*{b-bhover-shadow-x}*/ 1px /*{b-bhover-shadow-y}*/ 1px /*{b-bhover-shadow-radius}*/ #710202 /*{b-bhover-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #dc2f2f /*{b-bhover-background-start}*/), to( #c10000 /*{b-bhover-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #dc2f2f /*{b-bhover-background-start}*/, #c10000 /*{b-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #dc2f2f /*{b-bhover-background-start}*/, #c10000 /*{b-bhover-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #dc2f2f /*{b-bhover-background-start}*/, #c10000 /*{b-bhover-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #dc2f2f /*{b-bhover-background-start}*/, #c10000 /*{b-bhover-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #dc2f2f /*{b-bhover-background-start}*/, #c10000 /*{b-bhover-background-end}*/);
}
.ui-btn-hover-f:visited,
.ui-btn-hover-f:hover,
.ui-btn-hover-f a.ui-link-inherit {
color: #fff /*{b-bhover-color}*/;
}
.ui-btn-down-f {
border: 1px solid #772234 /*{b-bdown-border}*/;
background: #d22323 /*{b-bdown-background-color}*/;
font-weight: bold;
color: #fff /*{b-bdown-color}*/;
text-shadow: 0 /*{b-bdown-shadow-x}*/ 1px /*{b-bdown-shadow-y}*/ 1px /*{b-bdown-shadow-radius}*/ #710202 /*{b-bdown-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #8f0b0b /*{b-bdown-background-start}*/), to( #cb0000 /*{b-bdown-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #8f0b0b /*{b-bdown-background-start}*/, #cb0000 /*{b-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient( #8f0b0b /*{b-bdown-background-start}*/, #cb0000 /*{b-bdown-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient( #8f0b0b /*{b-bdown-background-start}*/, #cb0000 /*{b-bdown-background-end}*/); /* IE10 */
background-image: -o-linear-gradient( #8f0b0b /*{b-bdown-background-start}*/, #cb0000 /*{b-bdown-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient( #8f0b0b /*{b-bdown-background-start}*/, #cb0000 /*{b-bdown-background-end}*/);
}
.ui-btn-down-f:visited,
.ui-btn-down-f:hover,
.ui-btn-down-f a.ui-link-inherit {
color: #fff /*{b-bdown-color}*/;
}
.ui-btn-up-f,
.ui-btn-hover-f,
.ui-btn-down-f {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
text-decoration: none;
}
HTML
タイトル
ここにコンテンツ
テーマ変更のためのジェネレータThemeRoller
ここまで書いて気づきましたが、テーマ変更するためのジェネレータがあったんでした。なんだ〜こっちなら、超細かい設定をマウスクリックで作れるじゃん・・・
ThemeRoller
