携帯対応レンダラーのスマホテーマのカスタマイズ with ThemeRoller

![](http://xoops.hypweb.net/modules/xelfinder/index.php/view/1544/jquerymobile0.png)

[XOOPS Themes and Templates Advent Calendar 2012](http://qiita.com/advent-calendar/2012/xoops-themes-templates/participants) の17日目の投稿です！

<- 前日: [スクロールしたらメニューバーがトップに固定される方法](http://qiita.com/items/bd7408cbbcc1d4315dc2) by marine_xoops123 さん
-> 翌日: [カスタムブロック管理画面に[更新して編集継続]ボタンを追加する](http://ryus.co.jp/modules/d3blog/details.php?bid=368) by mik さん

****

## 携帯対応レンダラーって？

携帯対応レンダラーは、HypCommonFunc に含まれる機能で、XOOPS サイトを丸ごと携帯対応する機能です。

導入は、パーミッションの設定などが伴うため若干面倒です。でも大丈夫です。X-update を使えばブラウザ上から簡単に導入できます。

X-update は XOOPS Cube Legacy 2.2 以降に対応し、XOOPS X (ten) には標準装備されています。

## HypCommonFunc をインストールしよう！

![HypCommonFunc は hypconf](http://xoops.hypweb.net/modules/xelfinder/index.php/view/1543/xupdate_hypconf.png)

HypCommonFunc は hypconf をインストールすると付随して導入されます。


## 携帯対応レンダラーを有効にしよう！

![携帯対応機能を有効にする](http://xoops.hypweb.net/modules/xelfinder/index.php/view/1540/main_switch.png)

「HypCommon の設定」でメインスイッチの「携帯対応機能を有効にする」で「はい」を選択するだけです。


これでスマホでアクセスすると、次のような感じで表示されます。

![スマホ表示例](http://xoops.hypweb.net/modules/xelfinder/index.php/view/1531/snap20121216_205226.png)

## [ThemeRoller for jQuery Mobile](http://jquerymobile.com/themeroller/index.php) でテーマを作成しよう！

[ThemeRoller for jQuery Mobile](http://jquerymobile.com/themeroller/index.php) のサイトで雛形となるテーマとして、jQuery Mobile 1.2 のテーマを読み込みます。

![「Import」ボタンをクリック](http://xoops.hypweb.net/modules/xelfinder/index.php/view/1534/jquerymobile1.png)

右上のあたりの「Import」ボタンをクリック

![](http://xoops.hypweb.net/modules/xelfinder/index.php/view/1535/jquerymobile2.png)

表示されたダイアログの「Import Default Theme」をクリックするとテキストエリアにデフォルトの CSS が表示されるので「Import」をクリック

今回は、サンプルとしてブロック部分のテーマを変更してみようと思います。
ブロック部分は、デフォルトで c テーマが適用されているので、今回は C テーマを元に新しく F テーマを作成して、ブロックに適用します。

![「Duplicate」をクリック](http://xoops.hypweb.net/modules/xelfinder/index.php/view/1536/jquerymobile3.png)

左上のほうのタブ「C」を選択して「Duplicate」をクリックすると Fタブ に C テーマがコピーされます。

![カラーパレットからドラッグ＆ドロップ](http://xoops.hypweb.net/modules/xelfinder/index.php/view/1537/jquerymobile4.png)

色の変更は、カラーパレットからドラッグ＆ドロップで行うことができます。

![「Download」](http://xoops.hypweb.net/modules/xelfinder/index.php/view/1538/jquerymobile5.png)

色を変更したら、「Download」ボタンをクリックします。

![「Download ZIP」](http://xoops.hypweb.net/modules/xelfinder/index.php/view/1539/jquerymobile6.png)

Theme Name に適当な名称を入力して、「Download ZIP」ボタンをクリックすると、ZIP ファイルがダウンロードされます。

## 作成したテーマをサイトに適用しよう！

ZIP ファイルを解凍すると、theme ホルダに [Theme Name].css が入っていますので、テキストエディタで開きます。(Windows のメモ帳で開くと改行コードの違いで、改行が認識されませんのでサクラエディタなど LF が認識できるテキストエディタをお使いください。)

F テーマに該当する部分をコピーします。

!["/* F" 行から下](http://xoops.hypweb.net/modules/xelfinder/index.php/view/1541/text_select1.png)

"/* F" 行から下

!["/* Structure */" 行の前まで](http://xoops.hypweb.net/modules/xelfinder/index.php/view/1542/text_select2.png)

"/* Structure */" 行の前までです。

![「jqm 追加 CSS」にペースト](http://xoops.hypweb.net/modules/xelfinder/index.php/view/1533/hypconf1.png)

コピーした内容を「HypCommonの設定」-「モバイル対応の設定」の「jqm 追加 CSS」にペーストします。
あとは、「ブロックに適用する jQuery Mobile のテーマ」で「f」選択して「送信」ボタンをクリックで完了！

![作成したテーマを適用後](http://xoops.hypweb.net/modules/xelfinder/index.php/view/1532/snap20121216_205109.png)

このような感じで、先程作成したテーマがブロック部に適用されます。

携帯対応レンダラーのスマホ対応では、全体のテーマ・メイン部のテーマ・ブロック部のテーマを別々に設定できるようになっていますので、ThemeRoller for jQuery Mobile を利用し、ぜひセンスの光るテーマを作成してご自身のサイトに色々と適用してみてください。

****

<- 前日: [スクロールしたらメニューバーがトップに固定される方法](http://qiita.com/items/bd7408cbbcc1d4315dc2) 
-> 翌日: おたのしみに♪