「テーマの基本」の版間の差分

提供:MoodleDocs
移動先:案内検索
162行目: 162行目:
== さらに基本的なCSSファイルをいくつか ==
== さらに基本的なCSSファイルをいくつか ==


In addition to theme CSS files, Moodle features a basic CSS file for every module, block and for every language. Developers can provide basic CSS properties for their modules and blocks to get the page or block layout right, if they need formatting for special functionality. The look and feel of Moodle is not changed by these layout basics.
テーマのCSSファイルに加えて、すべてのMoodleモジュール、ブロック、言語は独自のCSSを持っています。Developers can provide basic CSS properties for their modules and blocks to get the page or block layout right, if they need formatting for special functionality. The look and feel of Moodle is not changed by these layout basics.


These files are only loaded when the "standard" CSS is activated. They are loaded first before all theme CSS files.
These files are only loaded when the "standard" CSS is activated. They are loaded first before all theme CSS files.

2008年6月10日 (火) 15:25時点における版

作成中です - 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 (stylesheetsを含んだ、すべてのメタタグ)
$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」


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

さらに進んだ方法では、既存のテーマを「親」テーマに設定し、「親」に対する変形テーマを作成することです。2つの可能な親テーマ使用方法では、まず、すべての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を持っています。Developers can provide basic CSS properties for their modules and blocks to get the page or block layout right, if they need formatting for special functionality. The look and feel of Moodle is not changed by these layout basics.

These files are only loaded when the "standard" CSS is activated. They are loaded first before all theme CSS files.

Moodle CSS Loading Order

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


外部リンク