Mobile
XOOPS
jQueryMobile
theme
XOOPSCubeLegacy

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

More than 1 year has passed since last update.

XOOPS Themes and Templates Advent Calendar 2012 の17日目の投稿です!

<- 前日: スクロールしたらメニューバーがトップに固定される方法 by marine_xoops123 さん
-> 翌日: カスタムブロック管理画面に[更新して編集継続]ボタンを追加する by mik さん


携帯対応レンダラーって?

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

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

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

HypCommonFunc をインストールしよう!

HypCommonFunc は hypconf

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

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

携帯対応機能を有効にする

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

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

スマホ表示例

ThemeRoller for jQuery Mobile でテーマを作成しよう!

ThemeRoller for jQuery Mobile のサイトで雛形となるテーマとして、jQuery Mobile 1.2 のテーマを読み込みます。

「Import」ボタンをクリック

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

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

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

「Duplicate」をクリック

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

カラーパレットからドラッグ&ドロップ

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

「Download」

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

「Download ZIP」

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

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

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

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

"/* F" 行から下

"/* F" 行から下

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

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

「jqm 追加 CSS」にペースト

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

作成したテーマを適用後

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

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


<- 前日: スクロールしたらメニューバーがトップに固定される方法
-> 翌日: おたのしみに♪