Welcome Guest 
メインメニュー
タグ一覧
トップ  >  xoops  >  theme(テーマ)&template(テンプレート)  >  携帯対応レンダラー-テンプレート変更(スマートフォン・iPhone・携帯用機能)
携帯 iphone smartphone スマートフォン アイフォン テーマ ローラー theme Roller プリロード 携帯対応レンダラー設定 jquery mobile min css
xoops(x)に梱包(pack)されている HypCommonの機能 HypCommonPreLoad を利用し、XOOPSを丸ごと携帯対応にすることができます。
theme内のテンプレート、cssを変更することでお好みの配色や配置が可能です。
しかし、ちょっと面倒なので確認しながらやってみる。

参考:
携帯対応レンダラー
テーマ | jQuery Mobile 1.1.0 日本語リファレンス
ThemeRoller | jQuery UI


1.まずは、「テーマ | jQuery Mobile 1.1.0 日本語リファレンス」を確認してみてください。
携帯対応レンダラーで利用できるthemeを確認できます。

2.次にhtml/theme/ktai_default/内のファイルの確認
   |- images/ ・・・ 画像フォルダ
   |    |- ajax-loader.gif ・・・ ロード中のアニメgif
   |    |- buttonbg.gif ・・・ボタン用の背景gif
   |    |
   |    |- logo.jpg ・・・ロゴ画像(themeに使用)
   |    |
   |    |- ajax-loader.png
   |    |- icons-18-black.png
   |    |- icons-18-white.png
   |    |- icons-36-black.png
   |    |- icons-36-white.png
   |    |- icon-search-black.png
   | 
   |- templates/ ・・・ module等のtemplate
   |    |-
   |    
   |- index.html ・・・ xoops内のフォルダで見かけるやつ(今回は無視)
   |- theme.html ・・・ 今回の肝
   |
   |- jquery.extra.js
   |- jquery.min.js
   |- jquery.mobile.min.js
   |- jquery.mobile-config.js
   |
   |- au.css
   |- docomo.css    
   |- handheld.css
   |- iphone.css
   |- jquery.mobile.min.css・・・ template用css ◆配色・配置など変更が可能
   |- keitaiswitch.css
   |- smart.css
   |- softbank.css    
   |- willcom.css

3.次にxoops_trust_path/class/hyp_common/ktairender/templates/内のファイルの確認
このファイルで表示される部位や順序を設定出来るthemeのようなテンプレートファイル
easylogin(簡単ログイン)、redirectMessage(リダクトメッセージ)、breadcrumbs(パンくずリスト)、rss、columnの順序を設定できる等をしたにも配置可能

   |- default/ ・・・ 携帯用デフォルトテンプレート
   |    |- body.html ・・・ body(中間部分)
   |    |- footer.html ・・・フッター(下部表示)
   |    |- header.html ・・・ヘッダー(上部表示)
   |- smart/ ・・・ スマートフォン用デフォルトテンプレート
   |    |- body.html ・・・ body(中間部分)
   |    |- footer.html ・・・フッター(下部表示)
   |    |- header.html ・・・ヘッダー(上部表示)

※テンプレートを変更する場合、defaultやsmartのフォルダごとコピーして設定すること。
 その場合、管理メニューで、[HypCommonFunc 関連の設定]-[モバイル対応の設定]で[携帯対応レンダラーテンプレート]で変更したフォルダ名に設定を変更する

◆簡単ログインの表示場所を変更する
簡単ログインの部分は、heder.html に が書かれていまして、その箇所に表示されるようになっています。
これを、footer.htmlに記述すれば、footer部分に表示されます。

◆templateに記載されたタグ?
 header.html
  <easylogin>・・・ログイン・スマホスタイル
  <redirectMessage>・・・リダクトメッセージ
  <breadcrumbs>・・・パンくず
 body.html
  <rssLink>・・・RSSリンク
  <headerbar>・・・区切り線
  <centerCcolumn>・・・センター中央コラム
  <content>・・・コンテンツ
  <centerLcolumn>・・・センター左コラム
  <centerRcolumn>・・・センター右コラム
  <leftcolumn>・・・左コラム
  <rightcolumn>・・・右コラム
 footer.html
  <blockMenu>・・・メニュー

4.jquery.mobile.min.cssの編集
  スマートフォンで表示されるページの配色は、標準で5種類あります。
   →テーマ | jQuery Mobile 1.1.0 日本語リファレンスにて確認ができます。
  ただ、オリジナルの配色などを設定する場合、jquery.mobile.min.cssの編集を行います。
   おおざっぱに配色を言うと a=黒地に白文字、b=青、c=白、d=白、e=黄 となるので、cとdが似ているので、こちらを変更するのもよいのだがThemeRollerを利用すれば簡単に好みの配色に出来上がる。
 ただし、ThemeRollerでは作成できない部分もあるみたいので、"HypCommonFunc の設定"モジュールの[モバイル対応の設定]-[jqm 追加 CSS]に追記するのもいいでしょう。

こちらは jqmテーマ のfに設定を追記しました。
白地に黄緑の設定を作成しました。
zipファイルダウンロード

プリンタ用画面
友達に伝える
投票数:33 平均点:10.00
前
携帯対応レンダラー設定-(スマートフォン・iPhone・携帯用機能)
カテゴリートップ
theme(テーマ)&template(テンプレート)
次
メール送信などのメールに本名などを表示(自動入力)する

メインメニュー
検索
テーマ選択

(5 テーマ)

(旧)仕様・環境

当サイトの仕様・環境

ServerQueen】仮想専用(VPS)サーバー QV-03

 CPU:  Quad Core Xeon
 OS:  CentOS 5
 データ転送量:  無制限
 独自SSL:  あり(無料)
 リモートログイン:  SSH
 Webサーバー:  Apache
 メールサーバー:  Qmail
   
 独自CGI  設置可能
 SSI:  設置可能
 Perl:  5.8.8
 PHP:  5.1.6
 SendMail:  ○
   
   
   
   
   
   
   

アクセスカウンタ
今日 : 1010
昨日 : 4040
総計 : 198420198420198420198420198420198420
検索
XOOPS Cube PROJECT
YuChiKo Create Company© 2001-2013