ご自由に改変するなどしてご利用ください。雑誌・書籍への掲載の場合には、あらかじめ当サイト管理人へご一報いただけると嬉しいです。2012-02-15======================================================説明(概要)======================================================XCL2.2用のテーマです。XCL2.1でも動作すると思いますが、確認していませんので悪しからず。トップページ(ホーム)は、可変グリッドレイアウト(可変幅のリキッドデザイン)として、モジュールページは左カラム固定のテーマとしました。テーマ名のとおりファッションサイトなどで使うイメージで画面をデザインしています。して設計しており、ブラウザの表示サイズにより可変するようになってます。(画面幅480px以下になると、iPhone等のスマートフォンに最適な1カラム表示になります。)jQuery等のjavascriptを利用しているので、javascript許可環境にて閲覧することを前提としています。CSS3を利用して、角丸やボックスの影などを表現しています。(可能な限りクロスブラウザを実現できるように考慮していますが、残念ながらIEについては実現できない機能などもありますので、ご了承ください。)このテーマでは、背景色や文字色などの色に関する設定を簡単に行えるように設定用のCSSファイルを分離、さらにPHPファイル(colors.php)として、theme_config.phpの設定を読み込むようにしています。色使いの設定変更を行う場合は、theme_config.phpを編集してください。このテーマでは、xugj_assign.phpを用いたメニューを採用しており、メインメニュー項目とサブメニュー項目が自動で表示されます。フッター部分にはユーザーメニュー項目を自動で表示するので、xoopsの互換モジュールである「メインメニュー」「ユーザーメニュー」を表示しない運用が可能となっています。プラグインを利用して、Xoopsには珍しい可変グリッドのテーマが出来上がりました。(ありがとうございます。>作者様)http://blog.xlune.com/2009/09/jqueryvgrid.html======================================================説明(詳細)======================================================トップページ(ホーム)は可変グリッドとなっており、表示サイドや並び順指定により色々な表示が実現できるように設定していることから、思い通りの表示はなかなか難しいかもしれません。基本的には、並び順の指定に従ってブロックが表示されますが、ブロックの幅や高さ、ブラウザの表示幅を変更すると、各ブロックが自動で隙間を埋めるように回り込むので、表示指定したとおりの表示になるとは限らないということもご理解願います。モジュールページの場合は、表示サイド「左」があれば、左カラム固定の2カラム表示となります。表示サイド「左」がない場合は、中央カラムと右カラムによる1カラム表示となります。)と右カラム(表示サイド「右」)、モジュールのコンテンツについては、基本、次のような表示となります。(2012.2.15モジュールページについて変更しました。幅100%==============================================※モジュールコンテンツ以外は、floatによりブロックが横に並びます。utf8とeucのlanguageファイルを用意しました。eucでも動作すると思いますが、一部、文字化けする可能性も否定できません。利用したメニューを採用しています。通常のメインメニューに表示されるのと同じ項目が自動で表示されるので、メニューの項目を編集する必要もありません。いう名称に変更しています。jquery.jgrowlプラグインを利用して、画面遷移せずにリダイレクト表示できるので、スピーディーでセンスの良い表示が可能となっています。本テーマには、domifaraさん作成のphpファイルによるインクルード方法を用いております。domifaraさん、ありがとうございます。(javascriptオフ時には、リダイレクトの文字などがボックス表示されます。)jQueryについては、domifaraさんによるXCL2.2対応措置がとられており、jQueryの二重読み込み防止や他のjavascriptとのバッティングを可能な限り避ける仕組みが用いられております。(xugj_already_js.phpをXCL2.1対応版に差し替えております。ディレクトリ名を利用する設定としており、それによりcssをコントロールしています。======================================================インストール======================================================インストールは通常のテーマと同様です。FTPにてサイトのテーマ・ディレクトリへコピーして、管理画面の「互換モジュール」「テーマの管理」でこのテーマを使用する設定としてください。「templates」ディレクトリに収納されたカスタマイズ済みのテンプレートを利用するようになります。FTPにてサイトの「plugin」ディレクトリにコピーしてください。場所が違うのでご注意ください。サイトの「plugin」ディレクトリにそれぞれコピーしてください。(既に存在する場合は不要)詳細はこちらを参照して下さい。テーマ下テンプレート利用可能な状態であって、本テーマ下のテンプレートを使いたくない場合は、テーマ下にある「templates」ディレクトリを削除してください。(当該ディレクトリ内の個別のテンプレートを削除するのも良いでしょう。Default(DB)テンプレートつまり、テンプレートを変更しようとして、Altsysで「現在ActiveなDBテンプレート」をいくら修正しても、テーマ下テンプレートがある場合はそちらが優先されてしまうのです。xoopsのモジュールとして利用できるので、非常に高度なブログを構築することが可能です。http://ja.xpressme.info/本テーマでは、このモジュール用にカスタマイズしたCSSも実装しているので、ある程度は本テーマに合った表示が可能となってはいます。このモジュールの場合、テーマ下テンプレートはもちろんDBテンプレートによる表示カスタマイズが出来ない構造であるため、テーマに合った表示に最適化するには、モジュール下に専用のテーマを追加する必要があります。今回、本テーマを作成・配布するにあたり、本テーマに合ったWordpress用のテーマ「fashion」も作成、同封していますので、次の要領にて作業してみてください。ディレクトリにコピーする。「Wordpress管理」の「XPressMe」「表示設定」にて、表示モード設定項目のXPressMeの表示モードの選択を「XOOPSモード」に、XOOPSモードで使用するテーマを選択で「fashion」を選択して、下部の更新ボタンを押して設定を更新・反映させる。======================================================カスタマイズ======================================================【メニュー表示項目の変更】このテーマでは、xugj_assign_phpを用いたメニュー表示を行いますが、インストールして初回表示した時に、メインメニュー表示する設定となっているメニュー項目を自動で引用してきます。(表示用のキャッシュファイルを自動作成して利用)従って、モジュールの管理にてモジュールの表示名を変えたり、並び順を「0」として非表示指定した場合でも、テーマのメニュー表示は以前作成したキャッシュファイルを利用することから、変更した表示となりません。再度、サイトを表示した際に、新しくメニュー用のキャッシュファイルが自動生成されます。管理画面モジュール」を利用すると、FTPソフトを使わずにキャッシュファイルの削除ができるので、便利だと思います。(domifaraさん、ありがとうございます。)http://xoops123.com/modules/d3downloads/index.php?page=singlefile&cid=10&lid=66【モジュールの表示設定】このテーマでは、各モジュールの表示をこのテーマに合わせた表示に変更するため、専用のCSSを用いて本来のCSS設定を上書きするようにしています。35行目にある次の記述部分を削除してください。/>【背景色や文字色等の一括変更】このテーマでは、背景色や文字色などの色に関する設定を簡単に行えるように設定用のCSSファイルを分離、さらにPHPファイル(colors.php)として、theme_config.phpの設定を読み込むようにしています。色使いの設定変更を行う場合は、theme_config.phpを編集してください。デフォルトでは、赤とピンクをベースに作成してますが、全体の雰囲気を変えるには、theme_config.php内のコメントに「※※※」が付加されている部分について色合いを変更すると良いでしょう。色合いをお好きなものに変更してください。して指定している画像をお好きなものに変更してください。(違う画像を使う場合、テーマ下のimagesディレクトリにお好きな画像をコピーしてください。【d3forumのアイコン変更】このテーマでは、d3forumのテーマ下テンプレートを用いており、コンテンツヘッダ部分にも独自のアイコンを表示しています。このアイコンについては、テンプレートに画像を直書きしていることから、変更するのは結構面倒だったりするので、今回、少し裏技になりますが、言語ファイルに定数として定義して、言語ファイル内の記述を変更することにより容易に画像を差し替えすることが可能となりました。変更可能な画像は、ヘッダーのノートアイコンと新規投稿アイコン、訪問帳アイコンの3つです。変更の際には、テーマ下のimagesディレクトリに差し替えたい画像を保存し、言語ファイル内の下記記述の画像名部分を変更してください。ヘッダ訪問帳アイコン【表示幅の変更】このテーマでは、可変幅のリキッドデザインを採用していますが、コンテンツ部分の幅を固定したい場合や最大幅などを設定したい場合は、style.cssの次の記述を変更してみてください。(中途半端な数値でごめんなさい。画像ポップアップをfancyboxに変更、コメント統合のQuickReplyやログインブロックなどをポップアップ表示するように変更picoのブロックメニューをアコーディオン形式に変更(jQuery利用)d3forumの表示を更にカスタマイズ、複雑な表示を簡略化して、QuickReplyのブロックをポップアップ表示したり、コントローラーなどを折りたたみ表示するようにした。ver0.89モジュールごとの表示調整に利用していた「ディレクトリ名をbodyのclassにする」設定について、d3モジュールの場合trust_pathのディレクトリ名を利用するようにした。モジュール用ページにつき、上下のブロックを追加した際の表示を調整しました。利用ライセンスは、クリエイティブ・コモンズとなっております。marine/mistgreen)表示していただければ、非商用に限り無償で、自由に改変してご利用頂くことができます。(フッターのcopyright表示を消して利用したい場合は、商用利用扱いとなります。)雑誌・書籍への掲載の場合には、あらかじめ当サイト管理人へご一報ください。企業様、または営利個人様でのご利用は、原則商用とさせていただきます。個人利用であっても、著作権表示を削除してご利用される場合は、商用利用扱いとなります。商用利用は有償とさせていただきたく、1サイト(ドメイン)につき1500円にてお願い致します。管理人へのご連絡のうえ、手続きをお願い申し上げます。違法行為を行っているサイト、公序良俗に反するサイトでの利用は、お断り申し上げます。2012-05-01===================================================説明(概要)===================================================XCL2.2用のテーマです。XCL2.1でも動作すると思いますが、確認していませんので悪しからず。トップページ(ホーム)は、可変グリッドレイアウト(可変幅のリキッドデザイン)として、モジュールページは左カラム固定のテーマとしました。テーマ名のとおりファッションサイトなどで使うイメージで画面をデザインしています。して設計しており、ブラウザの表示サイズにより可変するようになってますjQuery等のjavascriptを利用しているので、javascript許可環境にて閲覧することを前提としています。CSS3を利用して、角丸やボックスの影などを表現しています。(可能な限りクロスブラウザを実現できるように考慮していますが、残念ながらIEについては実現できない機能などもありますので、ご了承ください。)このテーマでは、背景色や文字色などの色に関する設定を簡単に行えるように設定用のCSSファイルを分離、さらにPHPファイル(colors.php)として、theme_config.phpの設定を読み込むようにしています。色使いの設定変更を行う場合は、theme_config.phpを編集してください。一文字だけを変更するだけで、テーマの色合いをガラッと変えることができるという、画期的(?)な仕様にしております。hslaで色相変化させる機能を追加)このテーマでは、xugj_assign.phpを用いたメニューを採用しており、メインメニュー項目とサブメニュー項目が自動で表示されます。フッター部分にはユーザーメニュー項目を自動で表示するので、xoopsの互換モジュールである「メインメニュー」「ユーザーメニュー」を表示しない運用が可能となっています。プラグインを利用して、Xoopsには珍しい可変グリッドのテーマが出来上がりました。(ありがとうございます。>作者様)http://blog.xlune.com/2009/09/jqueryvgrid.htmlダウンロードしたファイルは、解凍ソフトにて解凍してください。解凍してできあがったフォルダは、2重になっている場合がありますので、インストールするフォルダにご注意ください。(テーマ名のフォルダをインストールしてください。)===================================================説明(詳細)===================================================トップページ(ホーム)は可変グリッドとなっており、表示サイドや並び順指定により色々な表示が実現できるように設定していることから、思い通りの表示はなかなか難しいかもしれません。基本的には、並び順の指定に従ってブロックが表示されますが、ブロックの幅や高さ、ブラウザの表示幅を変更すると、各ブロックが自動で隙間を埋めるように回り込むので、表示指定したとおりの表示になるとは限らないということもご理解願います。モジュールページの場合は、表示サイド「左」があれば、左カラム固定の2カラム表示(右メインカラム可変のリキッドデザイン)となります。表示サイド「左」がない場合は、中央カラムと右カラムによる1カラム表示となります。)と右カラム(表示サイド「右」)、モジュールのコンテンツについては、基本、次のような表示となります。幅100%==============================================※モジュールコンテンツ以外は、floatによりブロックが横に並びます。utf8とeucのlanguageファイルを用意しました。eucでも動作すると思いますが、一部、文字化けする可能性も否定できません。利用したメニューを採用しています。通常のメインメニューに表示されるのと同じ項目が自動で表示されるので、メニューの項目を編集する必要もありません。いう名称に変更しています。jquery.jgrowlプラグインを利用して、画面遷移せずにリダイレクト表示できるので、スピーディーでセンスの良い表示が可能となっています。本テーマには、domifaraさん作成のphpファイルによるインクルード方法を用いております。domifaraさん、ありがとうございます。(javascriptオフ時には、リダイレクトの文字などがボックス表示されます。)jQueryについては、domifaraさんによるXCL2.2対応措置がとられており、jQueryの二重読み込み防止や他のjavascriptとのバッティングを可能な限り避ける仕組みが用いられております。(xugj_already_js.phpをXCL2.1対応版に差し替えております。ディレクトリ名を利用する設定としており、それによりcssをコントロールしています。===================================================インストール===================================================インストールは通常のテーマと同様です。FTPにてサイトのテーマ・ディレクトリへコピーして、管理画面の「互換モジュール」「テーマの管理」でこのテーマを使用する設定としてください。「templates」ディレクトリに収納されたカスタマイズ済みのテンプレートを利用するようになります。FTPにてサイトの「plugin」ディレクトリにコピーしてください。場所が違うのでご注意ください。サイトの「plugin」ディレクトリにそれぞれコピーしてください。(既に存在する場合は不要)詳細はこちらを参照して下さい。テーマ下テンプレート利用可能な状態であって、本テーマ下のテンプレートを使いたくない場合は、テーマ下にある「templates」ディレクトリを削除してください。(当該ディレクトリ内の個別のテンプレートを削除するのも良いでしょう。Default(DB)テンプレートつまり、テンプレートを変更しようとして、Altsysで「現在ActiveなDBテンプレート」をいくら修正しても、テーマ下テンプレートがある場合はそちらが優先されてしまうのです。xoopsのモジュールとして利用できるので、非常に高度なブログを構築することが可能です。http://ja.xpressme.info/本テーマでは、このモジュール用にカスタマイズしたCSSも実装しているので、ある程度は本テーマに合った表示が可能となってはいます。このモジュールの場合、テーマ下テンプレートはもちろんDBテンプレートによる表示カスタマイズが出来ない構造であるため、テーマに合った表示に最適化するには、モジュール下に専用のテーマを追加する必要があります。今回、本テーマを作成・配布するにあたり、本テーマに合ったWordpress用のテーマ「fashion」も作成、同封していますので、次の要領にて作業してみてください。ディレクトリにコピーする。「Wordpress管理」の「XPressMe」「表示設定」にて、表示モード設定項目のXPressMeの表示モードの選択を「XOOPSモード」に、XOOPSモードで使用するテーマを選択で「fashion」を選択して、下部の更新ボタンを押して設定を更新・反映させる。===================================================カスタマイズ===================================================【メニュー表示項目の変更】このテーマでは、xugj_assign_phpを用いたメニュー表示を行いますが、インストールして初回表示した時に、メインメニュー表示する設定となっているメニュー項目を自動で引用してきます。(表示用のキャッシュファイルを自動作成して利用)従って、モジュールの管理にてモジュールの表示名を変えたり、並び順を「0」として非表示指定した場合でも、テーマのメニュー表示は以前作成したキャッシュファイルを利用することから、変更した表示となりません。再度、サイトを表示した際に、新しくメニュー用のキャッシュファイルが自動生成されます。管理画面モジュール」を利用すると、FTPソフトを使わずにキャッシュファイルの削除ができるので、便利だと思います。(domifaraさん、ありがとうございます。)http://xoops123.com/modules/d3downloads/index.php?page=singlefile&cid=10&lid=66【モジュールの表示設定】このテーマでは、各モジュールの表示をこのテーマに合わせた表示に変更するため、専用のCSSを用いて本来のCSS設定を上書きするようにしています。35行目にある次の記述部分を削除してください。/>【背景色や文字色等の一括変更】このテーマでは、背景色や文字色などの色に関する設定を簡単に行えるように設定用のCSSファイルを分離、さらにPHPファイル(colors.php)として、theme_config.phpの設定を読み込むようにしています。色使いの設定変更を行う場合は、theme_config.phpを編集してください。内の一番上にある記述の数値を変えることで、全体の色相を変更できるように設定しています。//hslaによる色相値(0-360)IE8等の古いブラウザ対応として、全体の色合いを変えるには、theme_config.php内の他の記述も変更してください。(モダンブラウザの場合、上記、色相の設定を優先して読み込みます。色合いをお好きなものに変更してください。して指定している画像をお好きなものに変更してください。(違う画像を使う場合、テーマ下のimagesディレクトリにお好きな画像をコピーしてください。【表示幅の変更】このテーマでは、可変幅のリキッドデザインを採用していますが、コンテンツ部分の幅を固定したい場合や最大幅などを設定したい場合は、style.cssの次の記述を変更してみてください。(中途半端な数値でごめんなさい。画像ポップアップをfancyboxに変更、コメント統合のQuickReplyやログインブロックなどをポップアップ表示するように変更picoのブロックメニューをアコーディオン形式に変更(jQuery利用)d3forumの表示を更にカスタマイズ、複雑な表示を簡略化して、QuickReplyのブロックをポップアップ表示したり、コントローラーなどを折りたたみ表示するようにした。ver0.89モジュールごとの表示調整に利用していた「ディレクトリ名をbodyのclassにする」設定について、d3モジュールの場合trust_pathのディレクトリ名を利用するようにした。モジュール用ページにつき、上下のブロックを追加した際の表示を調整しました。ver0.90hslaによる色相の数値を1カ所変えるだけで、全体の色合い調整ができるようにした。これにより、従来のテーマ「fashion」と区別するため、名称を「fashion_a」とした。利用ライセンスは、クリエイティブ・コモンズとなっております。marine/mistgreen)表示していただければ、非商用に限り無償で、自由に改変してご利用頂くことができます。(フッターのcopyright表示を消して利用したい場合は、商用利用扱いとなります。)雑誌・書籍への掲載の場合には、あらかじめ当サイト管理人へご一報ください。企業様、または営利個人様でのご利用は、原則商用とさせていただきます。個人利用であっても、著作権表示を削除してご利用される場合は、商用利用扱いとなります。商用利用は有償とさせていただきたく、1サイト(ドメイン)につき1500円にてお願い致します。管理人へのご連絡のうえ、手続きをお願い申し上げます。違法行為を行っているサイト、公序良俗に反するサイトでの利用は、お断り申し上げます。説明(概要)HTML5+TwitterBootstrap2採用のXCL2.2用テーマです。シンプルで見やすいデザインを意識して作ってみました。等のスマートフォンでも使えます。XOOPSらしい3カラムのテーマですが、ブロックの配置により1カラム~3カラムに変化します。プラグインを利用して、インストールされたモジュールに対応するメニューバーを自動表示するようにしています。(簡単な設定変更で、マルチメニューを表示させることも可能)また、フッターにユーザーメニュー項目も自動表示するので、xoopsの互換モジュールである「メインメニュー」「ユーザーメニュー」を利用しない運用が可能となっています。色合い設定用のファイルを用意して、簡単に変更できる仕組みを追加してしてみました。ライセンスとさせていただきます。utf8ベースで動作すると思います。eucでの動作は確認していません。(d3forum用のテーマ下テンプレートについては、テンプレートに日本語部分を直書きしてるので、ご注意願います。利用したメニューを採用しています。通常のメインメニューに表示されるのと同じ項目が自動で表示されるので、メニューの項目を編集する必要もありません。いう名称に変更しています。読み込むようにしています。(多分、動作すると思いますが・・・余り、自信はありません。)【画面表示について】このテーマは、TwitterBootstrap2のcssを採用しています。Queries)を利用して、表示するデバイス(ブラウザ)の画面幅によりスタイル(CSS)の切替を行います。最大表示幅は1200pxでブラウザの幅を縮めるとそれに応じて横幅が狭まったりします。利用方法は、通常の3カラムテーマと殆ど同じですが、中央中央カラムについては、管理画面のブロック管理にてタイトルに指定文字を追記すると、TwitterBootstrap2のclassを追加するような仕組みを加えています。「span3」のwidthが適用されます。(TwitterBootstrap2のグリッドシステムは12カラムで構成されており、span1からspan12までで、span12の場合全幅表示となり、span1の場合、1/12の横幅となります。とそれぞれ違うクラスを指定しても結構です。ポイントは、合計で12にすることですね。場合、フッター下に全幅表示するように設定していますので、希望する表示となるようにウェイトを指定してください。指定すると、希望する幅で表示出来ます。)中央左、中央右ブロックは、中央カラム幅の50%にて表示するようにしています。左カラム、右カラムは、タイトルにTwitterBootstrap2のクラスを記述しても適用されませんので、ご注意ください。カスタムブロック等で、HTMLとして記載する場合、TwitterBootstrap2のclass等を利用すると、自在に表示コントロールが出来ると思います。■カスタムブロック内の記述例(spanは合計で12になるように設定するのがコツです。</div>インストールまずは、解凍してできあがったフォルダの最下層にある「green-label」をFTPにてサイトのテーマ・ディレクトリへコピーしてください。ように、解凍したフォルダの階層が深くなっていることもありますので、ご注意ください。フォルダをアップロードしてください。)このテーマではブロック幅をコントロールするための機能拡張を利用するために専用のプラグインを利用する設定としております。プラグインがない場合はエラーとなりますので、必ず導入してください。これをサイトのプラグインディレクトリにコピーしてください。利用しているので、これも同様にコピーして下さい。場所が違うのでご注意ください。preload「HdXoopsTplHook.class.php」か「HypXoopsTplHook.class.php」を使っている場合、このディレクトリが優先となります。○xugjメニューの場合このテーマでは、xugj_assign_phpを用いたメニュー表示を行いますが、インストールして初回表示した時に、メインメニュー表示する設定となっているメニュー項目を自動で引用してきます。(表示用のキャッシュファイルを自動作成して利用)従って、モジュールの管理にてモジュールの表示名を変えたり、並び順を「0」として非表示指定した場合でも、テーマのメニュー表示は以前作成したキャッシュファイルを利用することから、変更した表示となりません。再度、サイトを表示した際に、新しくメニュー用のキャッシュファイルが自動生成されます。管理画面モジュール」を利用すると、FTPソフトを使わずにキャッシュファイルの削除ができるので、便利だと思います。(domifaraさん、ありがとうございます。file="`$xoops_theme`/multi_menu.html"}>に変更してください。この中の記述を変更すると、色合いの調整を行うことが可能となっています。下記の記述のように、phpで色を定義しておりますので、各々色に該当するコードを変更すると必要箇所に反映されるようになっています。define('_TC_BG_COLOR','#f8fbf8');//基本背景色なお、全てを変更する場合は、TwitterBootstrap2のcssを修正する必要があります。TwitterBootstrap2のcssについては、オリジナルをそのまま採用していますので、当該サイトにおけるカスタマイズや関連サイトで紹介されている設定変更方法などを参照してください。表示をコントロールするため、style.cssとmodules.min.cssを追加読み込みさせています。bootstrap.cssで指定されたclassなどに上書きする形でcssが読み込まれることにより、元のbootstrap.cssを修正することなくテーマデザインの調整を行っています。利用者において調整される場合は、style.cssまたはmodules.min.cssを修正・加筆されるのが良いでしょう。ver0.1まずは公開してみる。ver0.11modules.min.cssを修正、コメント投稿欄のinputを調整した。利用ライセンスは、クリエイティブ・コモンズ(CC)となっております。marine/mistgreen)表示していただければ、非商用に限り無償で、自由に改変してご利用頂くことができます。(フッターのcopyright表示を消して利用したい場合は、商用利用扱いとなります。)なお、TwitterBootstrapのcssについては、Apache2ライセンスとなっておりますので、留意願います。雑誌・書籍への掲載の場合には、あらかじめ当サイト管理人へご一報ください。企業様、または営利個人様でのご利用は、原則商用とさせていただきます。個人利用であっても、著作権表示を削除してご利用される場合は、商用利用扱いとなります。商用利用の場合は有償とさせていただきたく、1サイト(ドメイン)につき3000円にてお願い致します。管理人へのご連絡のうえ、手続きをお願い申し上げます。違法行為を行っているサイト、公序良俗に反するサイトでの利用は、お断り申し上げます。XCL2.1x(HD1.04)・XCL2.2用テーマです。HTML5で作っています。