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

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


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

　PCでもiPhone 等のスマートフォンでも使える XCL2.1x(HD1.04)・XCL2.2用テーマです。HTML5で作っています。
　閲覧環境に応じて、柔軟にページレイアウトを切り替えるレスポンシブ・ウェブデザイン（Responsive Web Design ）を採用しました。Xoops Cube Legacy 2.2 で動作確認しました。

　下記サイトのテンプレートを流用してXoops用のテーマとした basic5 をベースに作成しました。
http://www.onextrapixel.com/2011/09/12/create-a-responsive-web-design-template/

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

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

　このテーマについては MIT ライセンスとさせていただきます。



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

　とりあえず、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_trend.php という名称に変更しています。

　jQuery.js + jquery.jgrowlプラグインを利用して、画面遷移せずにリダイレクト表示できるので、スピーディーでセンスの良い表示が可能となっています。　なお、本テーマには、domifaraさん作成のphpファイルによるインクルード方法を用いております。
　domifaraさん、ありがとうございます。（javascriptオフ時には、リダイレクトの文字などがボックス表示されます。）

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


【画面表示について】

　このテーマでは、メディア・クエリ（Media Queries）を利用して、表示するデバイス（ブラウザ）の画面幅によりスタイル（CSS）の切替を行います。

　基本は、左メイン・右サイドカラムの２カラム表示となっており、最大表示幅は９８０ｐｘでブラウザの幅を縮めるとそれに応じて横幅が狭まり、デバイスの幅が480px以下になると１カラム表示に切り替わります。

　なお、中央・中央カラムについては、表示順設定に応じて、トップとボットムに幅一杯にボックス表示することができます。

　■　　中央中央カラム　表示順 ０　（トップカラム）
　■　　中央中央カラム　表示順５００以上　（ボットムカラム）

　詳しい表示ロジックについては、同封の trend2012.jpg をご覧下さい。

　ヘッダー画像下のメニューバーは、スクロールすると自動でトップにFIXするようにしています。また、検索窓をクリックするとキーワード入力部が横に広がるギミックも装備してみました。（jQuery利用）


======================================================
インストール
======================================================

　インストールは通常テーマと同じですが、主要モジュールのテンプレートを本テーマに最適化させ、テーマ下テンプレートとして利用する設定が可能ですので、その場合＋αの作業が必要となります。（+αの作業をしないと表示エラーが出る場合があります。）

　まずは、解凍してできあがったフォルダ「trend2012」をFTPにてサイトのテーマ・ディレクトリへコピーしてください。（場合によっては、解凍したフォルダの階層が深くなっていることもありますので、ご注意ください。）

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

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


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

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

　テーマ下テンプレートを利用する場合、xugj_date や xugj_block を利用しますので、本テーマ下の「up/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」または「HypXoopsTplHook.class.php」を使っている場合、このディレクトリが優先となります。）


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

　もし、テーマ下テンプレートを利用できない環境の場合、本テーマ下の「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

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

2012-5-20 ver0.8
　とりあえず公開してみる。
2015-7-26 ver0.81
　nao-ponさんによる改良機能を追加しました。（nao-ponさん、ありがとうございました。）
　・position: fixed で場面上部に張り付く時は1行分だけ表示
　・その表示範囲は、カレントモジュールのメニューが表示される位置
　・1行表示の時にマウスオーバーすると、ちょっと間を置いて広げて全部表示
　・マウスカーソルを外すと、ちょっと間を置いて1行表示に戻る
　・検索ボックスの下にメニューが隠れないように
　・メニューボックスが、上部固定モードに切り替わる時、メニューボックスの高さ分 body 要素の表示位置が上へずれるのを防止　　
　　　http://xoops.hypweb.net/modules/UsersWiki/person/nao-pon/blog/2015-04-17-1


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

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