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

提供:MoodleDocs
移動先:案内検索
130行目: 130行目:
</div>
</div>
<div style="float:left;border-left:1px solid #CCC;margin-left:2em;padding-left:0.5em;width:13em;font-size:0.9em">
<div style="float:left;border-left:1px solid #CCC;margin-left:2em;padding-left:0.5em;width:13em;font-size:0.9em">
Figure 3: The theme "formal_white" with the CSS file "styles_layout.css" from the theme "standard" and the individual files "fw_layout.css", "fw_fonts.css", "fw_color.css".
3: テーマ「formal_white」 + テーマ「standerd」のCSSファイル「styles_layout.css」 + 「fw_layout.css」「fw_fonts.css」「fw_color.css」
</div><br style="clear:both" />
</div><br style="clear:both" />
</div>
</div>

2008年6月5日 (木) 15:18時点における版


作成中です - 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」


変更を少々

If you just want to make small changes to a theme like using different colors or adding a logo then your new theme will include the "standard" theme and you define a few extra CSS styles in a new CSS file.

As an example, see the "standardwhite" theme.

It uses the file "config.php" to set the appropriate options. The first entry $THEME->sheets = array('gradients'); defines the CSS file "gradients.css" as the file with additional CSS definitions. It also specifies $THEME->standardsheets = true; which says to include all the styles from the standard theme too.

Instead of basing the theme on "standard", you could base it on another theme by specifying $THEME->parent = 'cooltheme';

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

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

The theme "formal_white" mixes the page layout from the theme "standard" with its own layout, fonts and colours. This way all layout changes in the standard Moodle layout are kept. This is done by setting $THEME->sheets = array('fw_layout','fw_color','fw_fonts'); and $THEME->standardsheets = array('styles_layout'); in the config file.

Theme "formal_white"

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


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

An advanced feature is to set any existing theme as the "parent" theme and offer variant themes to this. Two possible uses can be to design one "parent" theme with all CSS definitions. Then offer "child" themes with color variants to be chosen by the users according to their color preferences. These "child" themes need only one CSS file holding the different color definitions. Or create "child" themes which only vary in the logo/banner placed in the "header.html". These "child" themes do not need their own CSS files.

The configuration for the "child" themes could look like $THEME->sheets = array('my_layout');, $THEME->parent = 'formal_white'; and $THEME->parentsheets = array('fw_layout','fw_color','fw_fonts');

Theme Formalemwhite plus, faked

Figure 4: The faked theme "formal_white_plus" with the additional CSS file "my_layout.css".


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

This theme would use its own CSS. The settings $THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color'); and $THEME->standardsheets = false; deactivate all other Moodle CSS and make a completely independent theme. All changes in the standard Moodle theme do not change this theme at all.

Theme Independent (faked)

Figure 5: The theme with it's own CSS files "styles_layout.css", "styles_fonts.css" and "styles_color.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.

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

Moodle CSS Loading Order

Figure 6: The CSS file loading order of all Moodle CSS and theme CSS files.


外部リンク