ページへ戻る

− Links

 印刷 

Menu​/themes​/generator :: XOOPS Cube Developer Site

wiki:Menu/themes/generator
ページ内コンテンツ
  • テーマ生成ツール Themaker
    • テーマの作り方
    • 拡張計画
      • レイアウトタイプ
      • カラーパタン
        • 独自のカラーパタンを作成する
      • 画像
    • 生成したコードのライセンス

テーマ生成ツール Themaker anchor.png[1]

Themaker[2] は XOOPS Cube Legacy のテーマの雛形を生成するモジュールです。
セレクトボックスで選択することで、以下のようなカスタマイズが可能です。

  • HTMLタイプ（xhtml）
  • レイアウト（Grid）
  • トップページのカラム数（1, 2, 3）
  • サブページのカラム数（1, 2, 3）
  • カラースキーム（http://colorschemedesigner.com/[3] で作成）
  • センターカラムの位置（コンテンツ下部／フッタ）
Page Top

テーマの作り方 anchor.png[4]

  1. http://jp.xoopsdev.com/modules/themaker/[2] で、『テーマを作る』リンクをクリック
  2. 各項目を埋めて「送信」
  3. モジュール上部のメニューの中に「ダウンロード」というリンクがあるので、クリックしてダウンロードして下さい。
Page Top

拡張計画 anchor.png[5]

Page Top

レイアウトタイプ anchor.png[6]

レイアウトタイプも 960px 幅のグリッドレイアウトとTwitter Bootstrapベースしかありませんが、Responsible レイアウトなども取り入れていきたいと考えています。
また、おなじグリッドレイアウトでも、各要素のマージンやメニューの位置などを変えたバージョンがあってしかるべきだと思います。

Page Top

カラーパタン anchor.png[7]

カラースキーマの作成には http://colorschemedesigner.com/[3] を利用していますが、これで作成した色をどの要素に当てはめるかでも沢山のバリエーションを作ることができます。たとえば、カラーパタン light では、1-2色のカラーセットの場合、ブロックタイトルの背景色には primary-5 を当てはめています。

Page Top
独自のカラーパタンを作成する anchor.png[8]

独自のカラーパランを作成することも出来ます（上級者向け）。
以下の Google Docs の Worksheet にカラーパタンを記述してください（Google アカウントがあれば誰でも編集できると思います）。

https://docs.google.com/spreadsheet/ccc?key=0AnciFICRNnxEdEoxU08xOWdoVGF4YW1HZkota3FFR1E&hl=ja#gid=0[9]

いまは light というワークシートがあるので、これをコピーして変更するといいでしょう。
B-E列の２行目以降の primary-1 とか secondary-a-3 というのが、 Color Scheme Designer でエクスポートしたときの color の id です。
A列が、当てはめるスタイルシートの名前を書いてあるのですが、bgcolor-block-title とかいった名前からなんとなく推測してください ^ ^;;

Page Top

画像 anchor.png[10]

いま生成されるテーマでは画像を使用していません。どうやるか全く考えていませんが、画像もセットにして配布できたらいいなと思っています。

Page Top

生成したコードのライセンス anchor.png[11]

BSD ライセンスとします（何でもいいです。ご自由にお使いください、というのが言いたいことです）。
ただし、Twitter Bootstrap など、外部のライブラリについては各ライブラリのライセンスに従ってください。

Last-modified: 2012-12-18 (火) 18:36:02 (JST) (2132d) by admin
ページ別名: 未設定
ページ作成: admin
サイト管理: anonymous

Links list

(This host) = http://jp.xoopsdev.com

  1. (This host)/modules/wiki/?Menu%2Fthemes%2Fgenerator#i2e78c99
  2. (This host)/modules/themaker/
  3. http://colorschemedesigner.com/
  4. (This host)/modules/wiki/?Menu%2Fthemes%2Fgenerator#le1e6cd8
  5. (This host)/modules/wiki/?Menu%2Fthemes%2Fgenerator#d6c74f1a
  6. (This host)/modules/wiki/?Menu%2Fthemes%2Fgenerator#r4052c08
  7. (This host)/modules/wiki/?Menu%2Fthemes%2Fgenerator#ybee180a
  8. (This host)/modules/wiki/?Menu%2Fthemes%2Fgenerator#vcf42063
  9. https://docs.google.com/spreadsheet/ccc?key=0AnciFICRNnxEdEoxU08xOWdoVGF4YW1HZkota3FFR1E&hl=ja#gid=0
  10. (This host)/modules/wiki/?Menu%2Fthemes%2Fgenerator#ld7aa70d
  11. (This host)/modules/wiki/?Menu%2Fthemes%2Fgenerator#mcdcd735