xoops123さあ、いっしょに XOOPS はじめましょう！

説明（概要）

　HTML5+TwitterBootstrap採用のXCL2.2用テーマです。
　閲覧環境に応じて柔軟にページレイアウトを切り替えるレスポンシブ・ウェブデザイン（Responsive Web Design ）、１２分割のグリッドシステムを採用しているので、自由な画面レイアウトが可能となっています。TwitterBootstrapのページにてcssをカスタマイズしてそれを導入することも可能です。Xoops Cube Legacy 2.2 で動作確認しました。

　トップページについては、一番上に中央中央ブロックが表示されるように設定、可変グリッドを採用しており、ブラウザの横幅を変更するとブロックがブラウザ幅に合うように自動で並べ替えを行うようになっています。

★重要★

　このテーマではブロック幅をコントロールするための機能拡張のため、専用のプラグインを利用する設定としておりますので、解凍してできあがったフォルダ下にある xoops_trust_path/libs/smartyplugins フォルダの modifier.xoops_blocktitleclass.php と modifier.xoops_blocktitleclassdel.php をサイトのプラグインディレクトリにコピーしてください。（必須です。）

　構造が通常のテーマとは全く異なっておりますので、ご利用の際は構造を理解のうえ、ブロック配置を行ってください。

　ヘッダーには、xugj_assign プラグインを利用して、インストールされたモジュールに対応するメニューバーを自動表示するようにしています。
　また、フッターにユーザーメニュー項目も自動表示するので、xoopsの互換モジュールである「メインメニュー」「ユーザーメニュー」を利用しない運用が可能となっています。

　このテーマについては CC ライセンスとさせていただきます。（TwitterBootstrapについては、Apache2ライセンス）

説明（詳細）

　とりあえず、utf8とeucのlanguageファイルは用意しましたが、HTML5ということで utf8ベースで動作すると思います。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_theme.php という名称に変更しています。
　jQuery.js + jquery.jgrowlプラグインを利用して、画面遷移せずにリダイレクト表示できるので、スピーディーでセンスの良い表示が可能となっています。　なお、本テーマには、domifaraさん作成のphpファイルによるインクルード方法を用いております。
　domifaraさん、ありがとうございます。（javascriptオフ時には、リダイレクトの文字などがボックス表示されます。）

　jQueryについては、domifaraさんによるXCL2.2対応措置がとられており、jQueryの二重読み込み防止や他のjavascriptとのバッティングを可能な限り避ける仕組みが用いられております。　(xugj_already_js.php をXCL2.1対応版に差し替えております。）

【画面表示について】

　このテーマは、TwitterBootstrapのcssを採用し、横幅940pxで１２分割のグリッドシステムを採用しているので、自由な配置が可能です。
　また、メディア・クエリ（Media Queries）を利用して、表示するデバイス（ブラウザ）の画面幅によりスタイル（CSS）の切替を行います。基本的な最大表示幅は940pxでブラウザの幅を縮めるとそれに応じて横幅が狭まったり、ボックスが移動したりします。

　従来のテーマでは、ブロックの幅などについて、cssに記載された横幅でしか表示できませんでしたが、このテーマでは、管理画面のブロック管理にてブロックタイトルに指定したキーワードを追記するだけで、あらかじめ設定した１２種類の横幅を設定することが可能となっています。

　★設定方法：

　　ブロックのタイトル欄に　[[span1 から [[span12 までの１２種類の文字列を追記してください。
　　なお、追記しない場合には初期値が利用されるので、問題はありません。また、従来から利用しているタイトルの none 技も継承しています。

１、トップページ（ホーム）の場合
　上から５つの領域に分けて表示できるようになっており、それぞれ次のように設定しています。

　■ header ■■■■■■■■■■■■■■■■■■■■
　■ 　h1 sitename + slogan
　■ 　中央中央ブロック表示（h3でタイトル表示） 初期値：span4

　■ section id:level_01 ■■■■■■■■■■■■■■
　■ 　左ブロック表示（h3でタイトル表示）　初期値：span4

　■■■■■■■■■■■■■■■■■■■■■■■■■■
　■ xoopsコンテンツ（指定がある場合）　初期値：span12（横幅一杯に表示）

　■ section id:level_02 ■■■■■■■■■■■■■■
　■ 　中央左ブロック表示（h3でタイトル表示）　初期値：span2

　■ section id:level_03 ■■■■■■■■■■■■■■
　■ 　中央右ブロック表示（h3でタイトル表示）　初期値：span2

　■ section id:level_04 ■■■■■■■■■■■■■■
　■ 　右ブロック表示（h3でタイトル表示）　初期値：span2

　■ footer ■■■■■■■■■■■■■■■■■■■■
　■ 　フッターメニュー

２、モジュール・ページの場合

　■ header ■■■■■■■■■■■■■■■■■■■■
　　h1 sitename + slogan + 中央中央ブロックのweghtが一番小さいブロックのタイトル
　　中央中央ブロック表示（weghtが一番小さいもの以外は、h3でタイトル表示） 初期値：span4

　（１）左ブロックがある場合
　■　wrap　■■■■■■■■■■■■■■■■■■■■■■■
　■　左ブロック　■　■■■　モジュールコンテンツ　■■■
　■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　（２）左ブロックがない場合
　■　wrap　■■■■■■■■■■■■■■■■■■■■■■■
　■　モジュールコンテンツ　　　　　　　　　　　　　　　■
　■■■■■■■■■■■■■■■■■■■■■■■■■■■■

　■ section id:level_02 ■■■■■■■■■■■■■■
　■ 　中央左ブロック表示（h3でタイトル表示）　初期値：span2

　■ section id:level_03 ■■■■■■■■■■■■■■
　■ 　中央右ブロック表示（h3でタイトル表示）　初期値：span2

　■ section id:level_04 ■■■■■■■■■■■■■■
　■ 　右ブロック表示（h3でタイトル表示）　初期値：span2

　■ footer ■■■■■■■■■■■■■■■■■■■■
　■ 　フッターメニュー

　２（１）の場合、基本２カラム表示であり左ブロックの初期値は span3 となっていますが、weightが一番小さなブロックに [[span4 などの指定がある場合、左ブロック全体を包むdivがそれに応じて広がり、モジュール側のdivが自動調整されるようになっています。つまり、表現力が大幅に向上しているということですね。

　なお、フッターのメニューにはログインなどのリンクを装備しており、jQueryのプラグインを用いて、ポップアップでログインブロックが表示されるようにしています。

インストール

　このテーマではブロック幅をコントロールするための機能拡張を利用するために専用のプラグインを利用する設定としております。
　プラグインがない場合はエラーとなりますので、必ず導入してください。

　プラグインは、解凍してできあがったフォルダ下にある xoops_trust_path/libs/smartyplugins フォルダの modifier.xoops_blocktitleclass.php と modifier.xoops_blocktitleclassdel.php の２種類です。これをサイトのプラグインディレクトリにコピーしてください。（必須です。）
　また、テーマ下テンプレートで function.xugj_block.php と modifier.xugj_date.php を利用しているので、これも同様にコピーして下さい。

　インストールは通常テーマと同じですが、主要モジュールのテンプレートを本テーマに最適化させるため、テーマ下テンプレートとして同封していますので、できればテーマ下テンプレートが有効となるように設定していただいた方が良いでしょう。(その際、同封のプラグインも利用するようにコピー作業等を行ってください。）

　次に、以下の手順でテーマ下テンプレート利用のための作業を行ってください。
　完了したら通常のテーマと同様、管理画面の「互換モジュール」「テーマの管理」でこのテーマを使用する設定としてください。

【テーマ下テンプレートが利用可能な場合】

　ご利用になっている xoops がテーマ下テンプレート利用可能な場合は、本テーマディレクトリ下にある 「templates」ディレクトリに収納されたカスタマイズ済みのテンプレートを利用するようになります。
　XOOPS X（Pack2011～）の場合、既にpreloadに「HypXoopsTplHook.class.php」が入っていますので、テーマ下テンプレートが利用可能となっています。（最新のHyperCommonFoncを利用している場合、このプリロードも不要です。）

　テーマ下テンプレートを利用する場合、xugj_date や xugj_block を利用します。（前述のとおり、modifier.xugj_date.php と function.xugj_block.php が必要）

　「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」または「HypXoopsTplHook.class.php」を使っている場合、このディレクトリが優先となります。最新のHyperCommonFoncを利用している場合は、同モジュールにて読み込み順の設定等が可能となっています。）

【テーマ下テンプレートが利用できない場合】

　最新のHyperCommonFoncを利用している場合、この作業は不要です。

　それ以外の場合・・・もし、テーマ下テンプレートを利用できない環境の場合、本テーマ下の「up/preload」フォルダにある HdXoopsTplHook.class.php をFTPにてサイトの「preload」ディレクトリに、本テーマ下の「up/plugin」フォルダにある resource.db.php をサイトの「plugin」ディレクトリにそれぞれコピーしてください。
　なお、XOOPS X（Pack2011～）の場合、既にpreloadに「HypXoopsTplHook.class.php」が入っていますので、この作業は不要です。（「HypXoopsTplHook.class.php」は、「HdXoopsTplHook.class.php」の機能を最新版にしたものです。）

　詳細はこちらを参照して下さい。
　　http://xoops.peak.ne.jp/md/news/index.php?page=article&storyid=450

【テーマ下テンプレート利用可能だが、本テーマのテーマ下テンプレートを使いたくない場合】

　逆に、本テーマ下のテンプレートを使いたくない場合は、テーマ下にある「templates」ディレクトリを削除してください。ただし、webphotoモジュール使用時のギャラリー表示などはできなくなります。

■理由：テーマ下テンプレート利用可能なxoops（HDやXOOPS X（Pack2011～）など）では、次の優先順位でテンプレートを読み込むため
　１　テーマ下テンプレート
　２　現在ActiveなDBテンプレート
　３　Default(DB)テンプレート

テンプレートを変更しようとして、Altsysで「現在ActiveなDBテンプレート」をいくら修正しても、テーマ下テンプレートがある場合はそちらが優先されてしまうということに注意が必要です。

カスタマイズ

【メニュー表示項目の変更】

　このテーマでは、xugj_assign_phpを用いたメニュー表示を行いますが、インストールして初回表示した時に、メインメニュー表示する設定となっているメニュー項目を自動で引用してきます。（表示用のキャッシュファイルを自動作成して利用）

　従って、モジュールの管理にてモジュールの表示名を変えたり、並び順を「０」として非表示指定した場合でも、テーマのメニュー表示は以前作成したキャッシュファイルを利用することから、変更した表示となりません。

　そのような場合、FTPソフトを使って、cacheディレクトリ内の theme_trend_menus_****.php を削除してください。再度、サイトを表示した際に、新しくメニュー用のキャッシュファイルが自動生成されます。

　なお、domifaraさん作成の「xugjメニューキャッシュリフレシュ　管理画面モジュール」を利用すると、FTPソフトを使わずにキャッシュファイルの削除ができるので、便利だと思います。（domifaraさん、ありがとうございます。）
　　http://xoops123.com/modules/d3downloads/index.php?page=singlefile&cid=10&lid=66

　　　最新のXOOPS X に入っている X-update を用いると、管理画面から簡単にインストールできます。

【色合いの調整等】

　本格的な調整は、TwitterBootstrapのcssを修正する必要があります。
　TwitterBootstrapのcssについては、オリジナルをそのまま採用していますので、当該サイトにおけるカスタマイズや関連サイトで紹介されている設定変更方法などを参照してください。

　なお、本テーマについては、sectionなどオリジナルな部分を追加しておりますので、それらについては同封の colors.css を修正することで、簡単に背景色などの変更を行うことが出来るように設定しております。是非ともお試し下さい。

バージョンアップ履歴

2013-7-15 ver0.1 公開
2014-3-29 ver0.11
　テーマディレクトリにreadme.txtを追加

お願い

　できましたら、当方のサイト掲示板（ご訪問帳）に何か書き込んでいただけると嬉しいです～m(_ _)m
　　 http://xoops123.com/modules/d3forum/?forum_id=1