【テーマ名 】 tw_corp 【バージョン】 0.18 【作 成 者】 marine / mistgreen 【動作 環境】 XOOPS Cube Legacy 2.1x (HD1.04)、2.2 【ライセンス】 MIT 【公 開 日 】 2012-11-04 ====================================================== 説明（概要） ====================================================== HTML5+TwitterBootstrap採用のXCL2.1x(HD1.04)・XCL2.2用テーマです。コーポレートサイト向けのデザインを意識して作ってみました。PCでもiPhone 等のスマートフォンでも使えます。 XOOPSらしい３カラムのテーマですが、ブロックの配置により１カラム～３カラムに変化します。また、閲覧環境に応じて柔軟に各カラムの幅が切り替わり、ブラウザの表示幅が480pxより狭くなると１カラムデザインとなるなど、表示環境に応じてページレイアウトを切り替えるレスポンシブ・ウェブデザイン（Responsive Web Design ）となっています。 ヘッダーには、横幅一杯に画像を表示しており印象深いアイキャッチ効果が望めることでしょう。また、ヘッダー画像下には、グローバルメニューを配しており、スクロールするとトップに固定されるようになっています。（jQuery利用） グローバルメニューは、xugj_assign プラグインを利用して、インストールされたモジュールに対応するメニューバーを自動表示するようにしています。（簡単な設定変更で、マルチメニューを表示させることも可能） また、フッターにユーザーメニュー項目も自動表示するので、xoopsの互換モジュールである「メインメニュー」「ユーザーメニュー」を利用しない運用が可能となっています。 色合い設定用のファイルを用意して、簡単に変更できる仕組みを追加してしてみました。 このテーマについては MIT ライセンスとさせていただきます。（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 という名称に変更しています。 XCL2.2では、デフォルトで google code から jQuery を読み込むようになっていますが、ネット環境にない場合などを想定して、 google code から読み込めない場合には、ローカルにある jquery.js を読み込むようにしています。 domifaraさん、ありがとうございます。 【画面表示について】 このテーマは、TwitterBootstrapのcssを採用しています。 また、メディア・クエリ（Media Queries）を利用して、表示するデバイス（ブラウザ）の画面幅によりスタイル（CSS）の切替を行います。最大表示幅は1200pxでブラウザの幅を縮めるとそれに応じて横幅が狭まったりします。 利用方法は、通常の３カラムテーマと殆ど同じですが、さらに****カラムについて ウェイト 1000から1999 の場合、メニュー下に全幅表示 ウェイト 2000以上 の場合、フッター下に全幅表示 するように設定していますので、特別な表示をさせたい場合にご利用ください。 カスタムブロック等で、HTMLとして記載する場合、TwitterBootstrapのclass等を利用すると、自在に表示コントロールが出来ると思います。 ■カスタムブロック内の記述例（spanは合計で12になるように設定するのがコツです。） <div class="row"> <div class="span3"> ブロック内の記述 </div> <div class="span4"> ブロック内の記述 </div> <div class="span2"> ブロック内の記述 </div> <div class="span3"> ブロック内の記述 </div> </div> ====================================================== インストール ====================================================== まずは、解凍してできあがったフォルダの最下層にある「tw_corp」をFTPにてサイトのテーマ・ディレクトリへコピーしてください。（場合によっては、/coffee_time/html/themes/tw_corp/ のように、解凍したフォルダの階層が深くなっていることもありますので、ご注意ください。html/themes/の下にある tw_corp フォルダをアップロードしてください。） d3pipesの同期ブロックを利用する場合は、xugj_dateプラグインを使いますので、サイトのプラグインディレクトリにコピーしてください。 「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/ （最新のHyperCommonFuncモジュールを利用している場合、または preload「HdXoopsTplHook.class.php」か「HypXoopsTplHook.class.php」を使っている場合、このディレクトリが優先となります。） ====================================================== カスタマイズ ====================================================== 【固定リンク】 表示ページの右上にコーポレートサイト向けの固定リンクが設定されています。 これらについては、theme.html内の７３行目付近に直書きされていますので、適宜のurlに変更する等してご利用ください。（不要であれば、 <div id="information">～</div><{* end information *}> を削除してください。） 【メニュー表示項目の変更】 ○xugjメニューの場合 このテーマでは、xugj_assign_phpを用いたメニュー表示を行いますが、インストールして初回表示した時に、メインメニュー表示する設定となっているメニュー項目を自動で引用してきます。（表示用のキャッシュファイルを自動作成して利用） 従って、モジュールの管理にてモジュールの表示名を変えたり、並び順を「０」として非表示指定した場合でも、テーマのメニュー表示は以前作成したキャッシュファイルを利用することから、変更した表示となりません。 そのような場合、FTPソフトを使って、cacheディレクトリ内の theme_trend_menus_****.php を削除してください。再度、サイトを表示した際に、新しくメニュー用のキャッシュファイルが自動生成されます。 なお、domifaraさん作成の「xugjメニューキャッシュリフレシュ 管理画面モジュール」を利用すると、FTPソフトを使わずにキャッシュファイルの削除ができるので、便利だと思います。（domifaraさん、ありがとうございます。） http://xodomifara.lolipop.jp/doxo/modules/d3downloads/index.php?cid=2 ○マルチメニューを利用する場合 theme.htmlの63行目にメニューに関する記述がありますので、マルチメニューを利用する場合は <{include file="`$xoops_theme`/xugj_menu.html"}> 部分の記述を <{include file="`$xoops_theme`/multi_menu.html"}> に変更してください。 【色合いの調整等】 TwitterBootstrapのcssから、主要な部分に関する記述を抜き出して、color_min.php としてまとめてみました。 この中の記述を変更すると、色合いの調整を行うことが可能となっています。 下記の記述のように、phpで色を定義しておりますので、各々色に該当するコードを変更すると必要箇所に反映されるようになっています。（例：基本背景色の #fafafa を #cccccc に変更するなど） <?php header('Content-Type: text/css'); //config //基本色 define('_TC_BG_COLOR','#fafafa'); //基本背景色 define('_TC_BASE_COLOR','#333333'); //基本文字色 define('_TC_NAV_COLOR','#777777'); //navbar 文字色 define('_TC_NAVBG_COLOR','#fafafa'); //navbar background color define('_TC_NAVBG_IMAGE1','#ede4e1'); //navbar background image color 1 define('_TC_NAVBG_IMAGE2','#e5c1cd'); //navbar background image color 2 define('_TC_BREADCRUMB_BG_COLOR','#f5ecf4'); //パンくずリスト背景色 define('_TC_BREADCRUMB_DIVIDER_COLOR','#8d6449'); //パンくずリスト区切り define('_TC_BREADCRUMB_ACTIVE_COLOR','#999999'); //パンくずリスト アクティブ define('_TC_A_COLOR','#c85179'); //基本a define('_TC_A_HOVER_COLOR','#9a493f'); //基本a hover ?> なお、全てを変更する場合は、TwitterBootstrapのcssを修正する必要があります。 TwitterBootstrapのcssについては、オリジナルをそのまま採用していますので、当該サイトにおけるカスタマイズや関連サイトで紹介されている設定変更方法などを参照してください。 【cssの調整】 表示をコントロールするため、style.cssとmodules.min.cssを追加読み込みさせています。 bootstrap.cssで指定されたclassなどに上書きする形でcssが読み込まれることにより、元のbootstrap.cssを修正することなくテーマデザインの調整を行っています。 もし、利用者において調整される場合は、style.cssまたはmodules.min.cssを修正・加筆されるのが良いでしょう。 ================================================================================== 利用について ================================================================================== このテーマは、MIT ライセンスです。ご自由に改変するなどしてご利用ください。 なお、TwitterBootstrapのcssについては、Apache2ライセンスとなっておりますので、留意願います。 雑誌・書籍への掲載の場合には、あらかじめ当サイト管理人へご一報ください。 連絡先：http://xoops123.com/modules/liaise/ ================================================================================== 利用拒否について ================================================================================== 違法行為を行っているサイト、公序良俗に反するサイトでの利用は、お断り申し上げます。 ================================================================================== 連絡先 ================================================================================== http://xoops123.com/modules/liaise/ ====================================================== バージョンアップ履歴 ====================================================== 2012-10-7 ver0.1 tw_basicとして公開開始 2012-10-14 ver0.11 IEでデザイン崩れが出ていたのを改修。 2012-10-16 ver0.12 bootstrap.min.js、bootstrap.min.cssを利用する設定とした。 IEの互換表示アイコンが出ない設定とした。 xugjメニューとマルチメニューを選択表示可能とした。（デフォルトはxugjメニュー） サブメニューをドロップダウンできるようにした。 2012-10-16 ver0.13 style.cssを調整 2012-10-28 ver0.14（tw_basicから分離、tw_corpとして開発開始） style.cssを再調整 パンくずリストをtwitterbootstrapの様式に合わせた。 テキストエリアの調整と自動で伸びる機能を付加（jQueryプラグイン） d3pipesの同期ブロックのみテーマ下テンプレート付けた（xugj_dateプラグイン同梱） 2012-11-04 ver0.15 ogp付加のためのメタタグ追加（argonさん作成のogp用画像も添付させていただきました。ありがとうございます。） 2012-11-25 ver0.16 jQuery.fancybox の動作設定を少し変更。JSファイル不足を追加。 2012-12-25 ver0.17 xugj_menu.htmlを更新（xugjでGEMさんに提示していただいた方法を採用、thx GEMさん） http://www.xugj.org/modules/d3forum/index.php?topic_id=1281#post_id6885 コンテンツが少ない場合にフッターを画面下に表示するように変更 新着PMがあった場合、最上部右のサブメニュー部分に表示がでるようにした。 2014-3-29 ver0.18 テーマディレクトリにreadme.txtを追加 ====================================================== お願い ====================================================== できましたら、当方のサイト掲示板（ご訪問帳）に何か書き込んでいただけると嬉しいです～m(_ _)m http://xoops123.com/modules/d3forum/?forum_id=1