XoopsCubeLegacy テーマ : magazine バージョン: 1.00 掲載日: 2011-10-15======================================
説明======================================
XCL2.1x(HD1.04)・XCL2.2用のテーマです。
Xoops Cube Legacy 2.2 で動作確認しました。
基本は2カラム構成として左カラムを固定、右側メインカラムを可変グリッドレイアウト(可変幅のリキッドデザイン)のテーマとしました。
テーマ名のとおり洒落た雑誌をイメージして画面をデザインしています。(実現できているかどうかは、別にして)
jQuery等のjavascriptを利用しているので、javascript許可環境にて閲覧することを前提としています。
閲覧者がjavascriptを許可している場合、ページごと(モジュールごと)に背景画像が切り替わったり、動きのあるメニューを実現。
さらに、メインカラムは可変グリッドレイアウトなので、ブラウザの表示幅を変更すると、その幅に応じて各ブロックがアニメーションしながら並び変わるなど、面白い効果が見られます。
可能な限りクロスブラウザを実現できるように考慮していますが、残念ながらIEについてはブロックの角丸やメニューやブロックなどの透過処理を省略、IE6については背景画像の表示も省いています。
その他のFireFox等のモダンブラウザについては、背景画像が自動でウィンドウサイズにフィットするなど、各種機能を実装しています。
テーマ magazine では、xugj_assign.phpを用いたメニューを採用しており、メインメニュー項目を自動で表示します。
また、フッター部分にはユーザーメニュー項目を自動で表示するので、xoopsの互換モジュールである「メインメニュー」「ユーザーメニュー」を表示しない運用が可能となっています。
下記リンク先のブログに掲載された可変グリッドレイアウトを実現する jQuery のプラグインを利用して、Xoopsには珍しい可変グリッドのテーマが出来上がりました。(ありがとうございます。>作者様)
http://blog.xlune.com/2009/09/jqueryvgrid.html
基本は、左サイドカラムと右メインカラムの2グリッドデザインですが、メインカラムが可変グリッドとなっており、表示サイドや並び順指定により色々な表示が実現できるように設定していることから、思い通りの表示はなかなか難しいかもしれません。
まずは、添付の画像(magazine_L0R0.jpg、magazine_L0R1.jpg、magazine_L1R0.jpg、magazine_L1R1.jpg)をご覧いただき、表示指定のロジックをご理解いただいた上でご利用願えればと思います。
(ただし、実際の表示はブロックの幅や高さ、ブラウザの表示幅を変更すると、各ブロックが自動で隙間を埋めるように回り込むので、表示指定したとおりの表示になるとは限らないということもご理解願います。)
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_magazine.php という名称に変更しています。
jQuery.js + jquery.jgrowlプラグインを利用して、画面遷移せずにリダイレクト表示できるので、スピーディーでセンスの良い表示が可能となっています。
なお、本テーマには、domifaraさん作成のphpファイルによるインクルード方法を用いております。
domifaraさん、ありがとうございます。
(javascriptオフ時には、リダイレクトの文字などがボックス表示されます。)
jQueryについては、domifaraさんによるXCL2.2対応措置がとられており、jQueryの二重読み込み防止や他のjavascriptとのバッティングを可能な限り避ける仕組みが用いられております。
(xugj_already_js.phpをXCL2.1対応版に差し替えております。)
======================================
インストール======================================
インストールは通常のテーマと同様です。
解凍してできあがったフォルダ magazine をFTPにてサイトのテーマ・ディレクトリへコピーして、管理画面の「互換モジュール」「テーマの管理」でこのテーマを使用する設定としてください。
【テーマ下テンプレートが利用可能な場合】
ご利用になっている xoops がテーマ下テンプレート利用可能な場合は、本テーマ下にある 「templates」ディレクトリに収納されたカスタマイズ済みのテンプレートを利用するようになります。
この場合、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」を使っている場合)
【テーマ下テンプレートが利用できない場合】
もし、テーマ下テンプレートを利用できない環境の場合で、本テーマのテーマ下テンプレートを利用したい場合は、本テーマ下の「up/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など)では、次の優先順位でテンプレートを読み込むため
1 テーマ下テンプレート
2 現在ActiveなDBテンプレート
3 Default(DB)テンプレート
つまり、テンプレートを変更しようとして、Altsysで「現在ActiveなDBテンプレート」をいくら修正しても、テーマ下テンプレートがある場合はそちらが優先されてしまうのです。
【Wordpress(XPressME Integration Kit)を利用している場合】
XPressME Integration Kit は、ブログシステムである Wordpress を取り込んで xoopsのモジュールとして利用できるので、非常に高度なブログを構築することが可能です。
http://ja.xpressme.info/ 本テーマでは、このモジュール用にカスタマイズしたCSSも実装しているので、ある程度は本テーマに合った表示が可能となってはいます。
しかし、このモジュールの場合、テーマ下テンプレートはもちろんDBテンプレートによる表示カスタマイズが出来ない構造であるため、テーマに合った表示に最適化するには、モジュール下に専用のテーマを追加する必要があります。
今回、本テーマを作成・配布するにあたり、本テーマに合ったWordpress用のテーマ「magazine」も作成、同封していますので、次の要領にて作業してみてください。
1 本テーマにある「up/wordpress」フォルダ下の「wp-content」フォルダをFTPにてサイトの /modules/wordpress/ ディレクトリにコピーする。(ここでは、同モジュールをwordpressというディレクトリ名にてインストールしていると仮定)
2 「Wordpress管理」の「XPressMe」「表示設定」にて、表示モード設定項目のXPressMeの表示モードの選択を「XOOPSモード」に、XOOPSモードで使用するテーマを選択で「magazine」を選択して、下部の更新ボタンを押して設定を更新・反映させる。
======================================
カスタマイズ======================================
【メニュー表示項目の変更】
このテーマでは、xugj_assign_phpを用いたメニュー表示を行いますが、インストールして初回表示した時に、メインメニュー表示する設定となっているメニュー項目を自動で引用してきます。(表示用のキャッシュファイルを自動作成して利用)
従って、モジュールの管理にてモジュールの表示名を変えたり、並び順を「0」として非表示指定した場合でも、テーマのメニュー表示は以前作成したキャッシュファイルを利用することから、変更した表示となりません。
そのような場合、FTPソフトを使って、cacheディレクトリ内の theme_magazine_menus_****.php を削除してください。
再度、サイトを表示した際に、新しくメニュー用のキャッシュファイルが自動生成されます。
なお、domifaraさん作成の「xugjメニューキャッシュリフレシュ 管理画面モジュール」を利用すると、FTPソフトを使わずにキャッシュファイルの削除ができるので、便利だと思います。(domifaraさん、ありがとうございます。)
http://xodomifara.lolipop.jp/doxo/modules/d3downloads/index.php?cid=2【ページごとに表示させる背景画像の変更】
各ページの背景画像は、Backgound StretcherというjQueryのプラグインを利用して表示しています。
表示させる画像の指定は、本テーマフォルダ内の theme_ext_js.html に記述してますので、変更する場合、UTF-8が利用できるエディターなどで編集してください。
theme_ext_js.html には、ディレクトリ名判定により表示画像を変更するよう設定しており、デフォルトで次のように指定しています。
サイトトップ(ホーム) Image001.jpg
bulletin Image002.jpg
pico Image003.jpg
d3forum Image004.jpg
d3downloads Image005.jpg
ccenter Image006.jpg
d3blog Image001.jpg
wordpress Image004.jpg
weblinks Image005.jpg
その他のディレクトリ Image001.jpg、Image002.jpg、Image003.jpg、Image004.jpg、Image005.jpg、Image006.jpg
お使いのxoopsでディレクトリ名を変更されている場合は、theme_ext_js.html 内に記述されているディレクトリ名をそれぞれ変更してください。
表示される画像を変更したい場合は、幅1024×高さ768ピクセルのjpg画像を用意して、テーマ下の「images」ディレクトリにコピーし、theme_ext_js.html 内にある Image001.jpg などの記述を対応するものに変更してください。
なお、上記、その他のディレクトリのように複数画像を指定すると一定時間ごとに背景画像が切り替わるようになるので、ご希望により変更してみてください。
【モジュールの表示設定】
このテーマでは、各モジュールの表示をこのテーマに合わせた表示に変更するため、専用のCSSを用いて本来のCSS設定を上書きするようにしています。
もし、必要がない場合は、theme.html 35行目にある次の記述部分を削除してください。
<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_imageurl}>modules.css" charset="utf-8" />
======================================
バージョンアップ履歴======================================
2011-10-15 ver1.00
何とか使える形になったので公開
2012-01-10
ダウンロードファイルが破損していたので、差し替えました。
======================================
お願い======================================
できましたら、掲示板(ご訪問帳)
http://xoops123.com/modules/d3forum/?forum_id=1 に何か書き込んでいただけると嬉しいです~m(_ _)m