【テーマ名 】 fashion_a
【バージョン】 0.90
【作 成 者】 marine / mistgreen
【動作 環境】 XOOPS Cube Legacy 2.2
【ライセンス】 creative commons
【公 開 日 】 2012-05-01
===================================================
説明（概要）
===================================================
XCL2.2用のテーマです。Xoops Cube Legacy 2.2 で動作確認しました。
XCL2.1でも動作すると思いますが、確認していませんので悪しからず。
トップページ（ホーム）は、可変グリッドレイアウト（可変幅のリキッドデザイン）として、モジュールページは左カラム固定のテーマとしました。
テーマ名のとおりファッションサイトなどで使うイメージで画面をデザインしています。（実現できているかどうかは、別にして）
Responsive Web Design として設計しており、ブラウザの表示サイズにより可変するようになってます
jQuery等のjavascriptを利用しているので、javascript許可環境にて閲覧することを前提としています。
また、CSS3を利用して、角丸やボックスの影などを表現しています。（可能な限りクロスブラウザを実現できるように考慮していますが、残念ながらIEについては実現できない機能などもありますので、ご了承ください。）
このテーマでは、背景色や文字色などの色に関する設定を簡単に行えるように設定用のCSSファイルを分離、さらにPHPファイル（colors.php）として、theme_config.phpの設定を読み込むようにしています。色使いの設定変更を行う場合は、theme_config.phpを編集してください。
設定ファイル theme_config.php の一文字だけを変更するだけで、テーマの色合いをガラッと変えることができるという、画期的（？）な仕様にしております。
（2012-3-13 theme_config.php にhslaで色相変化させる機能を追加）
このテーマでは、xugj_assign.phpを用いたメニューを採用しており、メインメニュー項目とサブメニュー項目が自動で表示されます。
また、フッター部分にはユーザーメニュー項目を自動で表示するので、xoopsの互換モジュールである「メインメニュー」「ユーザーメニュー」を表示しない運用が可能となっています。
下記リンク先のブログに掲載された可変グリッドレイアウトを実現する jQuery のプラグインを利用して、Xoopsには珍しい可変グリッドのテーマが出来上がりました。（ありがとうございます。＞作者様）
http://blog.xlune.com/2009/09/jqueryvgrid.htmlダウンロードしたファイルは、解凍ソフトにて解凍してください。
解凍してできあがったフォルダは、２重になっている場合がありますので、インストールするフォルダにご注意ください。（テーマ名のフォルダをインストールしてください。）
===================================================
説明（詳細）
===================================================
トップページ(ホーム）は可変グリッドとなっており、表示サイドや並び順指定により色々な表示が実現できるように設定していることから、思い通りの表示はなかなか難しいかもしれません。
基本的には、並び順の指定に従ってブロックが表示されますが、ブロックの幅や高さ、ブラウザの表示幅を変更すると、各ブロックが自動で隙間を埋めるように回り込むので、表示指定したとおりの表示になるとは限らないということもご理解願います。
モジュールページの場合は、表示サイド「左」があれば、左カラム固定の２カラム表示（右メインカラム可変のリキッドデザイン）となります。
表示サイド「左」がない場合は、中央カラムと右カラムによる１カラム表示となります。
中央カラム（表示サイド「中央」「中央右」「中央左」）と右カラム（表示サイド「右」）、モジュールのコンテンツについては、基本、次のような表示となります。
==============================================
トップページ（ホーム）の場合
==============================================
中央中央ブロック(表示順 0 ） 幅456px
中央中央ブロック(表示順 1-99 ） 幅456px
中央左ブロック 幅222px
中央右ブロック 幅222px
モジュールコンテンツ 幅456px
中央中央ブロック(表示順 100以上 ） 幅456px
左ブロック 幅222px
右ブロック 幅222px
==============================================
==============================================
モジュールページの場合
==============================================
左カラム（左ブロック） 幅222px
右メインカラム 幅100%-222px
中央中央ブロック(表示順 0 ） 幅100%
中央左ブロック 幅222px
中央中央ブロック(表示順 1-99 ） 幅456px
中央右ブロック 幅222px
モジュールコンテンツ 幅100%
中央中央ブロック(表示順 100-499 ） 幅456px
右ブロック 幅222px
中央中央ブロック(表示順 500以上 ） 幅100%
==============================================
※モジュールコンテンツ以外は、floatによりブロックが横に並びます。
utf8とeucのlanguageファイルを用意しました。多分、eucでも動作すると思いますが、一部、文字化けする可能性も否定できません。（eucについては、動作環境がないので未確認ですが・・・）
メニューは、Xoops Users Group Japan(XUGJ) で GIJOEさんが提唱された xugj_assign.php を利用したメニューを採用しています。
通常のメインメニューに表示されるのと同じ項目が自動で表示されるので、メニューの項目を編集する必要もありません。
http://www.xugj.org/modules/d3forum/index.php?topic_id=125 なお、同封しているものは、オリジナルの xugj_assign.php から少し変更しているので、xugj_assign_fashion.php という名称に変更しています。
jQuery.js + jquery.jgrowlプラグインを利用して、画面遷移せずにリダイレクト表示できるので、スピーディーでセンスの良い表示が可能となっています。
なお、本テーマには、domifaraさん作成のphpファイルによるインクルード方法を用いております。
domifaraさん、ありがとうございます。
（javascriptオフ時には、リダイレクトの文字などがボックス表示されます。）
jQueryについては、domifaraさんによるXCL2.2対応措置がとられており、jQueryの二重読み込み防止や他のjavascriptとのバッティングを可能な限り避ける仕組みが用いられております。(xugj_already_js.phpをXCL2.1対応版に差し替えております。）
利用モジュールの判定については、d3モジュールの場合、trust_path のディレクトリ名を利用する設定としており、それによりcssをコントロールしています。
===================================================
インストール
===================================================
インストールは通常のテーマと同様です。
解凍してできあがったフォルダ fashion_a をFTPにてサイトのテーマ・ディレクトリへコピーして、管理画面の「互換モジュール」「テーマの管理」でこのテーマを使用する設定としてください。
【テーマ下テンプレートが利用可能な場合】
ご利用になっている xoops がテーマ下テンプレート利用可能な場合は、本テーマディレクトリ下にある 「templates」ディレクトリに収納されたカスタマイズ済みのテンプレートを利用するようになります。
この場合、xugj_date や xugj_block を利用しますので、本テーマ下の「extra/plugin」フォルダに収納されている modifier.xugj_date.php と function.xugj_block.php をFTPにてサイトの「plugin」ディレクトリにコピーしてください。（既に存在する場合は不要）
「plugin」ディレクトリは、XCL2.1x と XCL2.2 では場所が違うのでご注意ください。
XCL2.1xの場合 /XOOPS_ROOT_PATH/class/smarty/plugins/
XCL2.2の場合 /XOOPS_TRUST_PATH/libs/smarty/plugins/ または
/XOOPS_TRUST_PATH/libs/smartyplugins/ （preload「HdXoopsTplHook.class.php」を使っている場合）
【テーマ下テンプレートが利用できない場合】
もし、テーマ下テンプレートを利用できない環境の場合で、本テーマのテーマ下テンプレートを利用したい場合は、本テーマ下の「extra/preload」フォルダにある HdXoopsTplHook.class.php をFTPにてサイトの「preload」ディレクトリに、本テーマ下の「up/plugin」フォルダにある resource.db.php をサイトの「plugin」ディレクトリにそれぞれコピーしてください。（既に存在する場合は不要）
詳細はこちらを参照して下さい。
http://xoops.peak.ne.jp/md/news/index.php?page=article&storyid=450【テーマ下テンプレート利用可能だが、本テーマのテーマ下テンプレートを使いたくない場合】
逆に、ご利用になっている xoops がテーマ下テンプレート利用可能な状態であって、本テーマ下のテンプレートを使いたくない場合は、テーマ下にある「templates」ディレクトリを削除してください。（当該ディレクトリ内の個別のテンプレートを削除するのも良いでしょう。）
■理由：テーマ下テンプレート利用可能なxoops（HDなど）では、次の優先順位でテンプレートを読み込むため
１ テーマ下テンプレート
２ 現在ActiveなDBテンプレート
３ Default(DB)テンプレート
つまり、テンプレートを変更しようとして、Altsysで「現在ActiveなDBテンプレート」をいくら修正しても、テーマ下テンプレートがある場合はそちらが優先されてしまうのです。
【Wordpress(XPressME Integration Kit)を利用している場合】
XPressME Integration Kit は、ブログシステムである Wordpress を取り込んで xoopsのモジュールとして利用できるので、非常に高度なブログを構築することが可能です。
http://ja.xpressme.info/ 本テーマでは、このモジュール用にカスタマイズしたCSSも実装しているので、ある程度は本テーマに合った表示が可能となってはいます。
しかし、このモジュールの場合、テーマ下テンプレートはもちろんDBテンプレートによる表示カスタマイズが出来ない構造であるため、テーマに合った表示に最適化するには、モジュール下に専用のテーマを追加する必要があります。
今回、本テーマを作成・配布するにあたり、本テーマに合ったWordpress用のテーマ「fashion」も作成、同封していますので、次の要領にて作業してみてください。
１ 本テーマにある「up/wordpress」フォルダ下の「wp-content」フォルダをFTPにてサイトの /modules/wordpress/ ディレクトリにコピーする。（ここでは、同モジュールをwordpressというディレクトリ名にてインストールしていると仮定）
２ 「Wordpress管理」の「XPressMe」「表示設定」にて、表示モード設定項目のXPressMeの表示モードの選択を「XOOPSモード」に、XOOPSモードで使用するテーマを選択で「fashion」を選択して、下部の更新ボタンを押して設定を更新・反映させる。
===================================================
カスタマイズ
===================================================
【メニュー表示項目の変更】
このテーマでは、xugj_assign_phpを用いたメニュー表示を行いますが、インストールして初回表示した時に、メインメニュー表示する設定となっているメニュー項目を自動で引用してきます。（表示用のキャッシュファイルを自動作成して利用）
従って、モジュールの管理にてモジュールの表示名を変えたり、並び順を「０」として非表示指定した場合でも、テーマのメニュー表示は以前作成したキャッシュファイルを利用することから、変更した表示となりません。
そのような場合、FTPソフトを使って、cacheディレクトリ内の theme_fashion_menus_****.php を削除してください。
再度、サイトを表示した際に、新しくメニュー用のキャッシュファイルが自動生成されます。
なお、domifaraさん作成の「xugjメニューキャッシュリフレシュ 管理画面モジュール」を利用すると、FTPソフトを使わずにキャッシュファイルの削除ができるので、便利だと思います。（domifaraさん、ありがとうございます。）
http://xoops123.com/modules/d3downloads/index.php?page=singlefile&cid=10&lid=66【モジュールの表示設定】
このテーマでは、各モジュールの表示をこのテーマに合わせた表示に変更するため、専用のCSSを用いて本来のCSS設定を上書きするようにしています。
もし、必要がない場合は、theme.html 35行目にある次の記述部分を削除してください。
<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_imageurl}>modules.css" charset="utf-8" />
【背景色や文字色等の一括変更】
このテーマでは、背景色や文字色などの色に関する設定を簡単に行えるように設定用のCSSファイルを分離、さらにPHPファイル（colors.php）として、theme_config.phpの設定を読み込むようにしています。色使いの設定変更を行う場合は、theme_config.phpを編集してください。
デフォルトでは、赤とピンクをベースに作成してますが、このバージョンでは、theme_config.php 内の一番上にある記述の数値を変えることで、全体の色相を変更できるように設定しています。（ただし、CSS3が理解できるモダンブラウザのみ）
//色相選択（color phase）
define('_THEME_CONFIG_COLOR_PHASE','28'); //hslaによる色相値（0-360）
IE8等の古いブラウザ対応として、全体の色合いを変えるには、theme_config.php内の他の記述も変更してください。（モダンブラウザの場合、上記、色相の設定を優先して読み込みます。）
コンテンツ部分の背景は、デフォルトで透明としているためbodyの背景色が透過されますが、もしお好きな色合いを表示させたい場合は、次の記述の先頭にある // を削除して、background の色合いをお好きなものに変更してください。
// define('_THEME_CONFIG_BG_OUTERWRAPPER_COLOR','background:#ccc'); //コンテンツ背景
また、コンテンツの背景に画像を使いたい場合は、次の記述の先頭にある // を削除して、background として指定している画像をお好きなものに変更してください。（違う画像を使う場合、テーマ下のimagesディレクトリにお好きな画像をコピーしてください。）
// define('_THEME_CONFIG_BG_OUTERWRAPPER_COLOR','background:url(images/b005bcg.gif)'); //コンテンツ背景
【表示幅の変更】
このテーマでは、可変幅のリキッドデザインを採用していますが、コンテンツ部分の幅を固定したい場合や最大幅などを設定したい場合は、style.cssの次の記述を変更してみてください。
例えば、example としてあらかじめコメントアウトの形で書かれている部分のコメントを外すと、picoの場合について、コンテンツ部分の最大表示幅が1274px となります。（中途半端な数値でごめんなさい。）
/* example
body.pico #Container {
max-width:1274px;
min-width:980px;
margin:0 auto;
}
*/
これを次のように変える
body.pico #Container {
max-width:1274px;
min-width:980px;
margin:0 auto;
}
===================================================
バージョンアップ履歴
===================================================
2012-01-22 ver0.86
何とか使える形になったので公開（fashion）
2012-02-05 ver0.88
iPhone用の表示を省略
パンくずリストをスタイリッシュに変更
画像ポップアップをfancyboxに変更、コメント統合のQuickReplyやログインブロックなどをポップアップ表示するように変更
picoのブロックメニューをアコーディオン形式に変更（jQuery利用）
d3forumの表示を更にカスタマイズ、複雑な表示を簡略化して、QuickReplyのブロックをポップアップ表示したり、コントローラーなどを折りたたみ表示するようにした。
その他、各部を調整
2012-02-15 ver0.89
モジュールごとの表示調整に利用していた「ディレクトリ名をbodyのclassにする」設定について、d3モジュールの場合trust_pathのディレクトリ名を利用するようにした。
モジュール用ページにつき、上下のブロックを追加した際の表示を調整しました。
2012-05-01 ver0.90
hslaによる色相の数値を1カ所変えるだけで、全体の色合い調整ができるようにした。これにより、従来のテーマ「fashion」と区別するため、名称を「fashion_a」とした。
===================================================
お願い
===================================================
できましたら、当方のサイト掲示板（ご訪問帳）に何か書き込んでいただけると嬉しいです～m(_ _)m
http://xoops123.com/modules/d3forum/?forum_id=1
3864
767.13 KB
XOOPS Cube Legacy 2.1x | 2.2x
CreativeCommons
