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 をインストールすると付随して導入されます。
携帯対応レンダラーを有効にしよう！
「HypCommon の設定」でメインスイッチの「携帯対応機能を有効にする」で「はい」を選択するだけです。
これでスマホでアクセスすると、次のような感じで表示されます。
ThemeRoller for jQuery Mobile でテーマを作成しよう！
ThemeRoller for jQuery Mobile のサイトで雛形となるテーマとして、jQuery Mobile 1.2 のテーマを読み込みます。
右上のあたりの「Import」ボタンをクリック
表示されたダイアログの「Import Default Theme」をクリックするとテキストエリアにデフォルトの CSS が表示されるので「Import」をクリック
今回は、サンプルとしてブロック部分のテーマを変更してみようと思います。
ブロック部分は、デフォルトで c テーマが適用されているので、今回は C テーマを元に新しく F テーマを作成して、ブロックに適用します。
左上のほうのタブ「C」を選択して「Duplicate」をクリックすると Fタブ に C テーマがコピーされます。
色の変更は、カラーパレットからドラッグ＆ドロップで行うことができます。
色を変更したら、「Download」ボタンをクリックします。
Theme Name に適当な名称を入力して、「Download ZIP」ボタンをクリックすると、ZIP ファイルがダウンロードされます。
作成したテーマをサイトに適用しよう！
ZIP ファイルを解凍すると、theme ホルダに [Theme Name].css が入っていますので、テキストエディタで開きます。(Windows のメモ帳で開くと改行コードの違いで、改行が認識されませんのでサクラエディタなど LF が認識できるテキストエディタをお使いください。)
F テーマに該当する部分をコピーします。
"/* F" 行から下
"/* Structure */" 行の前までです。
コピーした内容を「HypCommonの設定」-「モバイル対応の設定」の「jqm 追加 CSS」にペーストします。
あとは、「ブロックに適用する jQuery Mobile のテーマ」で「f」選択して「送信」ボタンをクリックで完了！
このような感じで、先程作成したテーマがブロック部に適用されます。
携帯対応レンダラーのスマホ対応では、全体のテーマ・メイン部のテーマ・ブロック部のテーマを別々に設定できるようになっていますので、ThemeRoller for jQuery Mobile を利用し、ぜひセンスの光るテーマを作成してご自身のサイトに色々と適用してみてください。
<- 前日: スクロールしたらメニューバーがトップに固定される方法
-> 翌日: おたのしみに♪