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

【テーマ名　】 Sequence
【作　成　者】 marine / mistgreen
【動作　環境】 XOOPS Cube Legacy 2.1x (HD1.04)、2.2
【ライセンス】 MIT
【公 開 日　】 2012-9-10

======================================================
説明（概要）
======================================================

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

　トップページについては、Appleライクな画像スライダーを装備しました。
　（下記サイトの素晴らしいjQueryプラグインを利用させていただきました。thx
　　　　http://www.sequencejs.com/）

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

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



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

　このテーマについては MIT ライセンスとさせていただきます。（jQueryのプラグイン sequence については MIT/GPLデュアルライセンス。TwitterBootstrapについては、Apache2ライセンス）

また、このテーマには、XOOPSに適切なメタ情報とOGPを付加するカスタマイズを追加していますので、同封のファイル群を指定したディレクトリにコピーしてご利用ください。（下記インストール参照）なお、カスタマイズの詳細については下記ページをご覧ください。
　　http://xoops123.com/modules/d3downloads/index.php?page=singlefile&cid=9&lid=61


======================================================
説明（詳細）
======================================================

　とりあえず、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に記載された横幅でしか表示できませんでしたが、このテーマでは、管理画面のブロック管理にてブロックタイトルに指定したキーワードを追記するだけで、あらかじめ設定した１２種類の横幅を設定することが可能となっています。
（テーマの名称は tw_coffee_time ですが、表示のコントロール方法は テーマ coffee_time とは全く異なっていますので留意願います。また、tw_940ではフッター部分にあった右ブロック表示部分が変更となっていますので、合わせてご注意ください。）

　★設定方法：
　　ブロックのタイトル欄に　[[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に適切なメタ情報とOGPを付加するカスタマイズを追加しておりますので、html/common/ogp/ フォルダをサイトの common ディレクトリに追加してください。（必須。ただし、既に存在している場合は、上書きに要注意。）

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

　簡単な方法としては、解凍してできあがったフォルダ下にある html フォルダを開いて、そこにある common、preload、themes の各フォルダをFTPにてサイトのルート・ディレクトリへコピーすると良いでしょう。（コピー先に既に存在する場合は、適宜判断してください。）

　次に、以下の手順でテーマ下テンプレート利用のための作業を行ってください。

　完了したら通常のテーマと同様、管理画面の「互換モジュール」「テーマの管理」でこのテーマを使用する設定としてください。


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

　ご利用になっている 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テンプレート」をいくら修正しても、テーマ下テンプレートがある場合はそちらが優先されてしまうということに注意が必要です。


【prettyPhotoを利用する場合】
　このテーマでは、jQuery のプラグインである prettyPhoto を利用するとお洒落なポップアップ画像表示ができるように設定しています。

　ご利用になるには、同封している jQuery_Pretty.class.php をサイトのプリロードディレクトリにアップロードしてください。
　xcl2.2の場合は、xoopsのcommonディレクトリに jQuery と一緒に prettyPhoto が入っていると思いますので、それで作動すると思います。もし、commonディレクトリに prettyPhoto がない場合は、このテーマに同封しているものをアップロードしてください。

　利用しているプリロードはdomifaraさん作のもので、最新のものは次のurlとなります。（domifaraさん、感謝します。）
　　　http://xodomifara.lolipop.jp/doxo/modules/d3downloads/index.php?page=singlefile&cid=3&lid=67


【webphotoの利用について】
　webphotoでprettyPhotoを利用する場合、webphotoの一般設定画面にて、次の設定を行ってください。
　　PopBoxを使用する　「いいえ」
　　LightBoxを使用する「いいえ」

　一般設定画面にて設定する各種画像の大きさはデフォルトを想定しています。
　一覧表示の表示タイプは、「テーブル表示」「説明文付きリスト表示」のいずれでも prettyPhoto が動作するように設定していますが、テーブル表示を選択した場合、テーブルではなく div（ボックス）を利用した表示としており、画面幅に応じてボックスが並ぶように設定していますので、テーブル表示時のカラム数欄の数値は意味をなしません。

　なお、このテーマでは、webphotoモジュールを「webphoto」ディレクトリ名にて利用する場合を想定して、テンプレート等の設定を行っています。もし、違うディレクトリ名でご利用の場合は、別途カスタマイズが必要となりますので、ご了承ください。


======================================================
カスタマイズ
======================================================

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

　このテーマでは、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 を修正することで、簡単に背景色などの変更を行うことが出来るように設定しております。是非ともお試し下さい。


【スライドショーについて】
　スライドショーはトップページのみ表示するようになっています。
　theme_sequence.html と sequencejs-theme.apple-style.css にて、表示文章や画像の設定を行っていますので、カスタマイズする場合は、それぞれのファイルを修正してください。

　もし、スライドショーを使いたくない場合は、theme_home.html の 4行目にある
　 　<{include file="`$xoops_theme`/theme_sequence.html"}>
という記述をコメントアウトするか削除してください。


==================================================================================
連絡先
==================================================================================

　 http://xoops123.com/modules/liaise/


======================================================
バージョンアップ履歴
======================================================

2012-9-7 ver0.1
　tw_940の構造を利用して作成。
2012-9-10 ver0.11
　画像スライダー用のjQueryプラグイン内の記述を修正
　（theme_ext_js.html内で利用するプラグインをsequence.jquery.jsに変更）
2012-9-15 ver0.12
　テーマ下テンプレート修正（リッチエディタ対応）
　d3forumのページナビにも対応
　theme_ext_js.html内のsequence.jquery.jsに関する記述を修正
2012-10-7 ver0.13
　表示幅を狭めた際にメニューが出なかったバグ修正など
2014-3-29 ver0.14
　テーマディレクトリにreadme.txtを追加


======================================================
お願い
======================================================

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