説明(概要)
3カラム対応としたテーマです。PCでもiPhone 等のスマートフォンでも使える XCL2.2用テーマです。HTML5で作成しています。閲覧環境に応じて、柔軟にページレイアウトを切り替えるレスポンシブ・ウェブデザイン(Responsive Web Design )を採用。Xoops Cube Legacy 2.2 で動作確認しました。
トップページのデザインをシンプルに仕上げ、サイトネームとメニューだけを初期表示するようにして、jQueryによるコンテンツ展開するようにしています。このテーマについては MIT ライセンスとさせていただきます。
説明(詳細)
メニューはデザイン上 theme_menu.html に直書きしていますので、あなたのサイトに合うように変更してください。
言語ファイルは、とりあえず、utf8とeucのlanguageファイルは用意しましたが、HTML5ということで utf8ベースで動作すると思います。eucでの動作は確認していません。(theme_menu.html は、utf8となっていますので、環境に合わせて変更してください。)
jQuery.js + jquery.jgrowlプラグインを利用して、画面遷移せずにリダイレクト表示できるので、スピーディーでセンスの良い表示が可能となっています。 なお、本テーマには、domifaraさん作成のphpファイルによるインクルード方法を用いております。domifaraさん、ありがとうございます。(javascriptオフ時には、リダイレクトの文字などがボックス表示されます。)
jQueryについては、domifaraさんによるXCL2.2対応措置がとられており、jQueryの二重読み込み防止や他のjavascriptとのバッティングを可能な限り避ける仕組みが用いられております。 (xugj_already_js.php をXCL2.1対応版に差し替えております。)
画面表示について
このテーマでは、メディア・クエリ(Media Queries)を利用して、表示するデバイス(ブラウザ)の画面幅によりスタイル(CSS)の切替を行います。
基本は、左カラム・中央カラム・右カラムの3カラム表示となっており、980pxにブラウザの幅を縮めるとそれに応じて2カラムに切り替わり、さらにデバイスの幅が480px以下になると1カラム表示に切り替わります。
なお、中央・中央カラムについては、表示順設定に応じて、トップとコンテンツ下やフッターに幅一杯にボックス表示したり、幅全体を使ってボックスを横に並べて表示することができます。
さらに、中央中央カラムの表示順を4000以上にすると、スクロールしてページの一番下に来たときに丸いボックスで表示するようにしています。(1個だけ表示)
かなり細かな表示設定が可能となってますので、詳しい表示ロジックについては、同封の layout.jpg をご覧下さい。
インストール
インストールは通常テーマと同じです。
プラスアルファとして、テーマ下テンプレートを利用して、主要モジュールのテンプレートを本テーマに最適化させ、テーマ下テンプレートとして利用する設定を行っています。
まずは、解凍してできあがったフォルダ「white-space」をFTPにてサイトのテーマ・ディレクトリへコピーしてください。(場合によっては、解凍したフォルダの階層が深くなっていることもありますので、ご注意ください。)
完了したら通常のテーマと同様、管理画面の「互換モジュール」「テーマの管理」でこのテーマを使用する設定としてください。
メニュー表示項目の変更
このテーマでは、メニューはデザイン上 theme_menu.html に直書きしていますので、あなたのサイトに合うように変更してください。また、CSSにて、モジュールのディレクトリ名に応じてメニュー横の画像を指定していますので、必要に応じてあなたのサイトに合うような画像に変更してください。
===== 初期設定 ====
body.bulletin #nav-pict {
background:url(images/notepad.png) no-repeat;
}
body.wordpress #nav-pict {
background:url(images/tag.png) no-repeat;
}
body.xpwiki #nav-pict {
background:url(images/basket-full.png) no-repeat;
}
body.pico #nav-pict {
background:url(images/file.png) no-repeat;
}
body.webphoto #nav-pict {
background:url(images/picture.png) no-repeat;
}
body.d3downloads #nav-pict {
background:url(images/disc-floopy.png) no-repeat;
}
body.d3forum #nav-pict {
background:url(images/users.png) no-repeat;
}
body.liaise #nav-pict {
background:url(images/mail.png) no-repeat;
}
バージョンアップ履歴
2013-1-15 ver0.82
とりあえず公開してみる。
2014-3-29 ver0.83
テーマディレクトリにreadme.txtを追加