メインコンテンツまでスキップ
pdf?stylesheet=default
Blackboard Help

テーマの使用

テーマはユーザーインターフェイス(UI)の重要な要素で、外観の一貫性を維持し、特定のロケールを反映します。テーマを編集して、文化的イメージとフォントを取り入れることができます。

ユーザーインターフェイスから画像と色を追加する場所は他にもあります。

  • 管理者はデフォルトのブランドをカスタマイズして、教育機関の文化的アイデンティティを強化できます。
  • 管理者は[テーマとパレットカタログ]を使用して、Blackboard Learn全体で使用される色を変更できます。
  • インストラクタは[コーススタイル]ツールを使用して、ロケールを強調できるバナー画像の追加などにより、コースをカスタマイズできます。

このセクションでは、テーマをダウンロードして編集する方法と、テーマの編集に使用する推奨ツールの詳細情報を説明しています。

テーマの編集

Blackboard Learnからダウンロードしたテーマを編集して、システムの外観を変更できます。各テーマには関連付けられたカスケーディングスタイルシート(CSS)があり、これによってUIの表示方法が決定されます。フォントサイズやタイプなどの特性、背景画像、その他のXHTML要素はCSSによって記述されます。Mozilla® Firefox® WebブラウザとFirefoxアドオンのFirebug®を使用して、ユーザーは個々のCSS要素をUIから直接簡単に識別できます。

以下の手順を実行する前に、FirefoxとFirebugの最新バージョンをダウンロードしてインストールしてください。

FirefoxとFirebug

Firefoxには、サードパーティが開発したプログラムが多数あります。この中にはFirebugがあり、Webページで使用されているCSS、HTML、JavaScriptの編集、デバッグ、監視に使用されています。要素が特定されたら、CSSエディタを使用して要素を検索し、テーマのCSSを変更できます。

Firefoxのインストール方法

  1. http://www.mozilla.comにアクセスします。
  2. (オプション)英語以外の場合は、使用する言語を指定します。
  3. 緑のダウンロードボタンをクリックします。
  4. インストールの手順に従います。
  5. デスクトップからFirefoxを開きます。

Firebugのインストール方法

  1. Firefoxを開きます。
  2. ツール]メニューで[アドオン]を選択します。
  3. アドオンを入手]をクリックします。
  4. 検索ボックスにFirebugと入力して、[検索]をクリックします。
  5. Firebugアイコンをクリックします。
  6. インストール]をクリックします。Firefoxから、インストールの完了後にブラウザを再起動するようメッセージが表示されます。
  7. はい]をクリックします。

Firebugの使用方法

Firebugを使用して既存のCSSを確認し、変更が必要なすべての要素を突き止めます。

  1. Firefoxを開きます。
  2. 下部のステータスバーの右側にあるFirebugアイコンをクリックします。
  3. 調査]をクリックします。
  4. 検査するページの領域の上にマウスを移動します。
  5. 領域をクリックしてその位置を維持します。
  6. Firebugコンソール内のXHTML要素の上にマウスを置きます。
  7. XHTMLノードをクリックして、XHTML要素の説明を展開または最小化します。
  8. Firebugコンソールの右側で選択した、関連するCSSクラスまたは要素のIDを表示します。
  9. クラスまたはID名を右クリックしてコピーします。
  10. クラスまたはID名をCSSエディタに貼り付けて、この要素を検索します。
  11. 適切な変更を加えます。
  12. 終了したらCSSを保存します。

テーマのCSSをダウンロードして編集する方法

CSS要素が特定されたら、テキストエディタを使用してCSSを編集できます。

  1. 管理者パネルから[ブランドとテーマ]をクリックします。
  2. テーマとパレットカタログ]をクリックします。
  3. または適当なテーマでコンテキストメニューにアクセスし、[ダウンロード]を選択します。
  4. ZIPパッケージを保存します。
  5. ZIPパッケージを開いて、コンテンツを安全な場所に展開します。
  6. テキストエディタを使用してtheme.cssファイルを開きます。
  7. 必要な変更を行い、CSSファイルを保存します。
  8. コンテンツのバックアップをZIP圧縮してローカルコンピュータに保存します。
  9. 管理者パネル]に戻り、[ブランドの初期設定]をクリックします。
  10. テーマとパレットカタログ]をクリックします。
  11. テーマの作成]をクリックします。
  12. テーマに名前と参照名を付けます。必要な場合、説明を追加します。
  13. マイコンピュータの参照]をクリックし、zipパッケージを探して選択します。
  14. 送信]をクリックします。

CSSの例

ここでは、Blackboard Learnに付属する校舎テーマの例を紹介します。ヘッダースタイルの定義と、フォントファミリ設定を示します。

* {font-family:Cursive, Georgia, Times, serif;}

/* a:focus { Removes focus outline in Firefox (Mozilla) outline:none;

} */

img { /* Centers images vertically and sets borders to 0 */

vertical-align:middle;

border:0px;

}

.hideme {

display:none!important;

}

h1 { /*Equals 19px*/

font-size:148%;

}

h2 {

font-size:123.1%;

}

h3 {

font-size:108%;

}

h1,h2,h3 {

margin:1em 0;

}

h1,h2,h3,h4,h5,h6,strong {

font-weight:bold;

}

システムテーマとコーステーマ

インストラクタが自分のコースのルックアンドフィールを変更できるコーステーマはサービスパック8で導入されました。コーステーマは、システムテーマとは別のものです。ただし、新しいシステムテーマには、システムの参照名に基づく名称のPNGサムネイル画像を指定する必要があります。このファイルが見つからない場合、コーステーマリストに、画像が見つからないことを示すシンボルがデフォルトとして表示されます。

新しいシステムテーマにこの画像を作成するための最も簡単な方法は、as_2012テーマに含まれている、as_2012.pngという画像の名前を、新しいシステムテーマの参照名に変更することです。この画像の機能はデフォルトのコーステーマが使用されていることを示すことであり、そのテーマがどのようなデザインかを示すためのものではないので、このファイルの名前を変更することで、画像が見つからないことを示すシンボルがユーザーインターフェイスに表示されることを防止できます。