Artisteer で Drupal テーマを作るときのヒント
Artisteer は、Joomla、Wordpress、Drupal などの CMS をサポートする Windows 用の Web デザイン ツール。画面上の UI でスタイルやレイアウトを定義することで、それを反映したテンプレートやテーマを自動生成する。
http://www.artisteer.com/
以下、Artisteer でテーマを作るときに知っておくと便利な事項をメモ。
サブテーマの利用
自動生成したテーマを手作業で変更した場合、後で再エクスポートしたときに変更箇所がリセットされてしまう。これを防ぐには、生成したテーマのサブテーマを作成し、そのテーマをカスタマイズして使えばよい。ベーステーマが上書きされても、サブテーマのファイルは影響を受けない。
サブテーマの作り方は下記を参照。
https://drupal.org/node/225125
たとえば、foo というテーマをベースに bar というサブテーマを作るには、テーマのインストール ディレクトリ (sites/all/themes など) に bar という名前のディレクトリを作り、その中に bar.info という名前で次のようなファイルを作成する。
name = bar description = このテーマの説明 core = 7.x base theme = foo
name = にはテーマ名、base theme = にはベーステーマの名前をそれぞれ指定する。これだけでちゃんとテーマとして認識される。
通常はこれに加え、リージョン定義のコピーとスタイルの再定義を記述する css ファイルの指定を追加する。リージョン定義は自動的に継承されないため、ベーステーマの .info ファイルからコピーしておく必要があるのだ。
name = bar description = このテーマの説明 core = 7.x base theme = foo regions[sidebar_left] = First sidebar regions[vnavigation_left] = First vertical menu regions[art_header] = Header regions[content] = Content regions[navigation] = Menu regions[banner1] = Banner 1 regions[banner2] = Banner 2 regions[banner3] = Banner 3 regions[banner4] = Banner 4 regions[banner5] = Banner 5 regions[banner6] = Banner 6 regions[user1] = User 1 regions[user2] = User 2 regions[user3] = User 3 regions[user4] = User 4 regions[extra1] = Extra 1 regions[extra2] = Extra 2 regions[copyright] = Copyright regions[top1] = Top 1 regions[top2] = Top 2 regions[top3] = Top 3 regions[bottom1] = Bottom 1 regions[bottom2] = Bottom 2 regions[bottom3] = Bottom 3 regions[footer_message] = Footer stylesheets[all][]= local.css
これで、foo とそっくりのテーマとして使えるようになる。スタイルなどのカスタマイズは新たに加えた local.css に書いておけばよい。
editor.css の利用
Artisteer が生成するテーマには editor.css というファイルが含まれている。これは、WYSIWYG エディタのスタイル指定に必要なサブセットを抽出したもので、使用するエディタの CSS 設定で使用できる。なお、サブテーマ側でカスタマイズを加えた場合は、同じ変更を editor.css にも反映する必要がある。
CKEditor の水平スクロールバー
Artisteer で作ったテーマで CKEditor を有効にすると、次のように水平スクロールバーが表示されることがある。
この現象は、Artisteer が生成する CSS で body のスタイルとして固定値の width または min-width が設定され、これが CKEditor の編集領域内に生成される body 要素にも適用されてしまうために発生する。
CKEditor の body 要素には class 属性として ”cke_editable" 等の値が設定されているので、これを利用して、次のような記述をエディタ用のスタイルシートに追加すれば解決する。
body.cke_editable {
min-width:100%!important;
overflow:auto!important;
}