MAYOテーマの名前は"MAke Your Own"というフレーズと、私の好きなマヨネーズ(Mayonnaise)からとりました。マヨネーズはともかく"MAke Your Own"というフレーズの通りユーザが自分だけのテーマを簡単に作れるようにする、ということを目的にしてPIXTUREテーマの開発経験をベースにして作成したDrupal 7用のテーマです。
MAYOはDrupal 7のカラーモジュールを利用することで高いカストマイズ性をもっています。サイトの構成要素(ヘッダー、ブロック、フッター等）の色を自由に好きな色にすることができる以外にも様々なカストマイズオプションを提供しています。全てのカストマイズはテーマの設定ページから行うことができ、PHPやCSS、HTMLの知識をほとんど必要としません。
以下はMAYOテーマをカストマイズしたサンプルです。ここにあるテーマは全てMAYOのテーマ設定ページからカストマイズをおこなっただけで数分で作成できるものです。
カストマイズ可能な点
- ほとんどの構成用途(base, page, header, footer, sidebar, node...)の背景色や枠線の色、文字色など
- ベースのフォントの書体とサイズ、見出しフォントの書体
- ページ幅(fixed layoutとliquidレイアウトの両方に対応)やページのマージン、サイドバーの幅や位置などの様々なレイアウト関連の設定
- ヘッダーエリアの詳細な設定（例：タイトルの位置）
- ヘッダーの背景画像。テーマの設定ページよりアップロード可能
- ヘッダー部のウォーターマーク
- パンくずリストの表示の有無など
以下はテーマ設定画面のスクリーンショットです。
これは設定画面の一部ですが、色々とカストマイズができるようになっているのがわかっていただけるかと思います。
その他の特徴
- サイト内検索用のフォームを改善。ヘッダー部の好きな位置にレイアウト可能
- サイトのテキストサイズを拡大・縮小するためのコントロールボタンを設置可能(テキストサイズの変更はJavascript,jQueryを使用)
- SuperfishとNice Menusのプルダウンメニューモジュールに対応
- 標準以外のリージョン（バナー、カラム式フッター）などのサポート
- 明るい色だけでなく暗い色のテーマにも完全対応。
- 色のカストマイズはCSSだけを使用してイメージ画像を使わないのでページのロードと表示が速い
高いカストマイズ性をもっているMAYOテーマですが、基本的には非常にシンプルです。ヘッダーの背景画像や黒い光沢メニューを選択しない場合には、画像は一切使用しないでCSS(スタイルシート)のみでヘッダー部のグラデーションやブロック・ノードの角丸などもおこないますので拙作のPIXTUREテーマなどと比べても軽快なテーマになっていると思います。
以下はサポートしているリージョンの図です。
フッター部のカラムとTop、Bottomのブロックカラムは最大で4カラムまで指定可能です。カラムの数に応じて横幅が自動で計算されます（例：3カラムの場合1つのカラムはフッター全体の33%の幅になる)。加えてTop、Bottomのブロックカラムは個々のカラムがサイドバーのブロックと同じようなスタイルのBOXに収まりますが高さがバラバラにならないように一番高さの高いブロックの高さに全てそろえられます。
またサイドバーは2つまで使用可能です。サイドバーをコンテンツに対して左右のどちらかに置くかはテーマの設定ページで簡単に指定できるようになっています。
注意事項など
SuperfishやNice Menusを使う場合
SuperfishやNice Menusを使ってメニューをプルダウンの階層メニュー化する場合には、デフォルトのプライマリーメニューとセカンダリーメニューは使いません。この２つはテーマの設定画面で表示をおこないわないようにチェックをはずします。次にSuperfishやNice Menusのメニューブロックを、/admin/structure/blockページでMAYOテーマのMenubarリージョンやSub-menubarリージョンに来るように指定してください。暗い色のテーマを使う場合
標準に含まれるChocolateやDeep Forestなどの暗い色のテーマを使う場合には、Drupalの標準のステータスメッセージ、エラーメッセージ、警告メッセージは色が明るいのでうまくマッチしません。これはMAYOテーマの設定画面で、Miscellanenousセクションから「Use dark message colors」を選択することで暗いテーマに合う色合いに変更することができます。ヘッダーに背景画像を設置する場合
リキッドレイアウト(ページ幅がブラウザのウィンドウ幅に連動して変わる）を使う場合にはヘッダーの背景画像の横幅をある程度大きなものを用意してください。MAYOではヘッダー画像は必要に応じてタイル状にくりかえし表示されますが見栄えを考慮して1600pxくらいの横幅の画像を使用することをお勧めします。サイドバーブロックとノードの角丸について
角丸はイメージ画像もJavascriptも使用せずにCSS3だけを使用しています。そのためにIEでは角丸が表示されません。他のブラウザー(Chrome, Firefox, Safari, Opera等)では角丸は表示されます。現在のIEではサポートされていないものの今後のバージョンのIEでCSS3のborder-radiusプロパティがサポートされれば表示できるようになります。管理画面用テーマ
MAYOを通常サイト用テーマとして使う場合でも、管理画面用にはデフォルトのSevenを使うことをお勧めします。MAYOを管理画面用に使うことももちろん可能ではありますが、管理画面テーマとして使うことを念頭に置いて開発していませんのでその点ご了承ください。ダウンロード
ダウンロードはdrupal.orgの以下のプロジェクトページからおこなってください。MAYOテーマ
http://drupal.org/project/mayo