テーマの基本

提供:MoodleDocs
移動先:案内検索

作成中です - Mitsuhiro Yoshida 2008年5月28日 (水) 11:31 (CDT)

テーマフォルダの中には何が入っていますか?

それぞれのテーマフォルダには、以下のファイルおよびフォルダが入っています。

pix/
config.php
favicon.ico
footer.html
header.html
styles.php
styles_color.css
styles_fonts.css
styles_layout.css
styles_moz.css

pixフォルダ

このフォルダには、テーマで使用する、すべての画像およびアイコンが含まれています。

favicon.ico

これは、ブラウザのアドレス入力欄のURIの前に表示される小さなアイコンです。

header.html およびfooter.html

これらのhtmlファイルには、あなたのロゴ、ログイン、ジャンプメニュー、ナビゲーションバー、Moodleロゴ等が含まれています。これらのファイルを使用することで、すべてのMoodleページに対して、独自のトップおよびボトムを作成することができます。

header.htmlおよびfooter.htmlでは、「$CFG->wwwroot」の代わりに「$CFG->httpswwwroot」を使用すべきです。この理由は、loginhttpsが有効にされている場合、適切なログインページ (および他のhttpsで保護されたページ) の処理を実行するためです。

以下、これらのファイルで使用できる主な変数です:

$CFG  (すべてのシステム変数のオブジェクト)
$THEME (config.phpから取得した、現在のすべてのテーマ変数のオブジェクト)
$COURSE (現在のコースのオブジェクト)
$meta (スタイルシートを含む、すべてのメタタグ)
$home (論理型)
$title (ページタイトル)
$heading (ページのヘッディング)
$navigation (「ナビゲーションバー」ではなく、実ナビゲーション)
$navmenulist  (xhtml)
$menu (ポップアップメニューまたはボタン)

ヘッダのみ:

$direction (ltr または rtl)
$bodytags (bodyに追加する必要のあるタグ)

フッタのみ:

$homelink (現在のコースまたはサイトページから、「ホーム」へのリンクバック)
$loggedinas (ユーザ名をリンクとした文字列)
$performanceinfo (パフォーマンス情報の文字列)

最後に、ヘッダおよびフッタには、すべてのMoodle PHPコードを含むことができます。つまり、必要に応じてデータベースまたは環境変数から各種データを抽出することができます。

styles.php

このファイルは、1.4でも同じファイル名で使用されていますが、1.5では別の役割を持っています。このファイルは、header.htmlより呼ばれ、CSSファイルへのブリッジとなります。あなたは、このファイルを編集する必要はありません。

config.php

このファイルは、1.4でも同じファイル名で使用されていますが、1.5では別の役割を持っています。このファイルでは、CSSファイルがどのように共同して動作するか設定します。あなたは、スタンダードテーマまたは他の親テーマの上に独自のテーマを作成することができ、CSSファイルを含んだり、含まなかったりすることができます。

スタイルシート

柔軟性、アクセシビリティ、自由なページデザインのため、Moodle 1.5から明確にプレゼンテーション層からコンテンツを分離することになりました。比較的簡単に少しの色とフォントの変更でテーマを変えるチャンスをあなたに与えるため、CSSは以下の3つのファイルに分けられました:

styles_layout.css
styles_fonts.css
styles_color.css

加えて、styles_moz.cssには、FirefoxおよびMozilla特有のフォーマット (特に丸角 rounded corners) を含んでいます。

付加的なファイル

最後にテーマデザイナーは、ピクチャプレビューを含む、テーマに関する情報を提供することができます。ピクチャプレビューは、テーマページに表示されます。そして、テーマが選択された後、READMEファイルの情報が表示されます。

README.html
screenshot.jpg

プレゼンテーション層からコンテンツを分離する

ページのコンテンツ層はXHTMLを通して表示され、プレゼンテーション層はCSSを通して表示されます。両方のレイヤー (層) に接続するため、ページ内のXHTMLタグおよび名前付きフックが使用されます。Moodleのように複雑なウェブアプリケーションをデザインするには、これらのことに関して極めて多くのことを知る必要があります。

カスケードCSS

レイアウト、フォントおよび色を制御して、Moodle「らしさ」を表現するため、Moodleテーマではスタイルシートを使用します。これらは、各テーマディレクトリ内の「styles.php」と呼ばれるPHPスクリプトで構築され、同じディレクトリ内の「config.php」により制御されます。

Moodleには「スタンダード」テーマと呼ばれる、非常にシンプルで、他のテーマの構築に基本的なレイアウトを提供する標準的なテーマがあります。それぞれのテーマは、現在のテーマの前に読み込まれる「親」テーマを持つことができます。

ですから、あなたの設定により、1つのテーマに以下の3つのスタイルシートを持つことができます:

  1. 「スタンダード」テーマ - theme/standard/styles.php
  2. 「親」テーマ - theme/parenttheme/styles.php
  3. 「メイン」テーマ - theme/yourtheme/styles.php

CSSのカスケーディングの特徴のため、前のCSSファイルの定義を、後のファイルで上書きすることができます。Moodleでは多くのCSSのカスケーディングの特徴を利用し、テーマデザイナに多くのチャンスを与えます。チャンスの幅は、既存のテーマを1つを使用して少しの変更を加える簡単な開発から、新しいCSSを使用して完全に独自のアピアランスを持ったMoodleテーマの開発まであります。

テーマデザイナは、あらゆるCSSスタイルシートを定義および追加することができ、テーマの必要に応じて名前付けすることもできます。

スタンダードテーマ

スタンダードテーマ

図1: テーマ「standard」 + CSSファイル「styles_layout.css」「styles_fonts.css」「styles_color.css」「styles_moz.css」


変更を少々

色を変えたり、ロゴを追加するような小さなテーマ変更の場合、あなたの新しいテーマには、「standard」テーマを含んで、いくつかの付加的なCSSスタイルを新しいCSSファイルに定義すると良いでしょう。

例として「standardwhite」テーマをとりあげます。

適切なオプションを設定するため、「standardwhite」テーマでは「config.php」を使用しています。最初のエントリ $THEME->sheets = array('gradients'); では、CSSファイル「gradients.css」を付加的なファイルとして定義しています。また、 $THEME->standardsheets = array('styles_layout','styles_fonts','styles_color','styles_moz'); と定義することで、「standard」テーマのスタイルを含めています。

テーマ内で「standard」テーマを基本にする代わり、次のように他のテーマを基本にすることもできます: $THEME->parent = 'cooltheme';

Theme Standardwhite
図 2: テーマ「standardwhite」 + テーマ「standard」のCSSファイルすべて + 独自の「gradients.css」

混合したCSS - 標準レイアウト + 独自のフォントおよび色

テーマ「formal_white」では、ページレイアウトに関して、テーマ「standard」のレイアウトおよび独自のレイアウト、フォント、色を同時に使用しています。テーマ「standard」でMoodleレイアウトが変更された場合、レイアウトの変更が反映されます。config.phpファイルで $THEME->sheets = array('fw_layout','fw_color','fw_fonts'); and $THEME->standardsheets = array('styles_layout'); のように定義します。

Theme "formal_white"

図 3: テーマ「formal_white」 + テーマ「standerd」のCSSファイル「styles_layout.css」 + 独自の「fw_layout.css」「fw_fonts.css」「fw_color.css」


親テーマを使用したテーマ (フェイク)

さらに進んだ方法では、既存のテーマを「親」テーマに設定し、「親」に対する変形テーマを作成します。まず、すべてのCSS定義を持った「親」テーマをデザインして、ユーザの好みによって「色」が異なる変形版「子」テーマを作成します。これらの「子」テーマには「色」の定義を持ったCSSのみ必要です。または、「header.html」の「ロゴまたはバナー」のみ異なる変形版の「子」テーマを作成します。これらの「子」テーマは、CSSファイルを必要としません。

「子」テーマの設定は次のようになります: $THEME->sheets = array('my_layout');$THEME->parent = 'formal_white'; および $THEME->parentsheets = array('fw_layout','fw_color','fw_fonts');

Theme Formalemwhite plus, faked

図 4: フェイクテーマ「formal_white_plus」 + 追加CSSファイル「my_layout.css」


標準テーマへの依存状態を持たないテーマ (フェイク)

このテーマでは、独自のCSSを使用します。設定 $THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color'); および $THEME->standardsheets = false; は、他のすべてのMoodle CSSを無効にし、自身を完全に独立したテーマとします。Moodleスタンダードテーマのすべての変更は、このテーマに全く影響を与えません。

Theme Independent (faked)

図 5: テーマ + 独自のCSSファイル「styles_layout.css」「styles_fonts.css」「styles_color.css」


さらに基本的なCSSファイルをいくつか

テーマのCSSファイルに加えて、すべてのMoodleモジュール、ブロック、言語は独自のCSSを持っています。特別な機能の表示方法を変更したい場合、レイアウトが正しくなるよう、開発者はモジュールおよびブロックに独自の基本的なCSSを提供することができます。Moodleの外観は、これらのCSSで変更されることはありません。

これらのファイルは「standard」CSSが有効にされている場合のみ、読み込まれます。また、すべてのテーマCSSファイルが読み込まれる前、最初にこれらのファイルが読み込まれます。

Moodle CSS Loading Order

図 6: CSSのロード順: すべてのMoodle CSSおよびテーマCSSファイル


外部リンク