Moodleで教材を作成しているときに、「この部分だけ赤字にして目立たせたい」「重要な箇所にマーカーを引きたい」と思ったことはありませんか。
しかし、Moodle 4.x の標準エディタである TinyMCE には、文字色や背景色を変更するボタンが標準では用意されていません。
この記事では、TinyMCEに文字色・背景色の機能を追加するプラグイン「Tiny Font Color」について、インストールから設定、実際の使い方までをご紹介します。
※本記事は Moodle 4.5 の環境で検証しています。
Tiny Font Colorとは
Tiny Font Color（tiny_fontcolor）は、TinyMCEエディタにテキストの文字色と背景色を設定するボタン・メニュー項目を追加するプラグインです。
最大の特徴は、使用できる色をサイト管理者があらかじめ定義できる点にあります。利用者（教師）は管理者が登録した色の中から選ぶことになるため、サイト全体でのデザインの統一が図れます。
基本情報
| 項目 | 内容 |
|---|---|
| プラグイン名 | Tiny Font Color |
| Frankenstyle名 | tiny_fontcolor |
| プラグインタイプ | TinyMCE |
| 対応バージョン | Moodle 4.1 〜 5.2 |
| 価格 | 無料 |
| メンテナ | Stephan Robotta（リードメンテナ）、Luca Bösch |
Moodle公式のプラグインディレクトリ（Moodle Marketplace）で公開されており、「自動テスト対応」「プライバシーフレンドリー」の認定に加え、Moodle 4.2 から 5.2 まで各バージョンで Early bird（新バージョン公開直後に対応したプラグインに与えられる認定）を獲得しています。継続的にメンテナンスされている、信頼性の高いプラグインといえます。
インストール方法
一般的なMoodleプラグインと同じ手順でインストールできます。
- Moodle Marketplace からZIPファイルをダウンロードする
- 「サイト管理 > プラグイン > プラグインをインストールする」からZIPファイルをアップロードする
- 画面の指示に従ってインストールを完了する
インストールが完了すると、「サイト管理 > プラグイン > テキストエディタ > TinyMCEエディタ > 一般設定」の一覧に「Tinyフォント色」が表示されます。
⚠ インストールしただけでは使えません
色が1つも登録されておらず、かつカラーピッカーも無効の状態では、エディタにボタンもメニュー項目も表示されません。そして初期状態は、「色の登録が空」「カラーピッカーは無効」という設定になっています。つまり、インストール直後は設定をしないと使えません。
「インストールしたのにボタンが出てこない」という場合は、まず設定画面で色が登録されているかを確認してください。
設定方法
設定画面は「サイト管理 > プラグイン > テキストエディタ > TinyMCEエディタ > Tinyテキスト文字色/テキスト背景色設定」から開きます。プラグイン一覧の「Tinyフォント色」行にある「設定」リンクからもアクセスできます。
設定項目は以下の6つです。
| 設定項目 | 初期値 | 内容 |
|---|---|---|
| 利用可能なテキスト色 | 空 | 文字色として選択できる色を登録する |
| 利用可能なテキスト背景色 | 空 | 背景色として選択できる色を登録する |
| テキスト文字色用カラーピッカ | 無効 | 利用者が自由に色を指定できるようにするか |
| テキスト背景色用カラーピッカ | 無効 | 同上（背景色） |
| Use colors for the table border and cell background | Yes | 表の罫線色・セル背景色にも定義した色を使用する |
| Use CSS classnames over direct color codes in HTML | No | style属性ではなくCSSクラス名で色を指定する |
後半2項目は、執筆時点では日本語に翻訳されておらず英語のまま表示されます。
カラーピッカーを有効にするかどうか
初期値は「無効」です。無効のままにすると、利用者は管理者が登録した色だけを使えます。デザインを統一したい場合はこの状態が適しています。
一方、有効にすると利用者が任意の色を自由に指定できるようになります。柔軟性は高まりますが、色の統制はできなくなります。組織の方針に合わせて選択してください。
CSSクラス名を使う設定には注意
「Use CSS classnames over direct color codes in HTML」を有効にすると、色の情報がHTMLのstyle属性ではなくCSSクラスとして書き出され、クラスの定義はテーマのSCSS設定に置かれます。
ただし公式の説明にもあるとおり、この設定を使うとコンテンツを別のMoodleサイトへ持ち出すことが難しくなります。バックアップ／リストアで他サイトへコースを移す運用がある場合は、初期値の「No」のままにしておくことをおすすめします。
色を追加する手順
実際に文字色を登録する手順を見ていきましょう。
1. 設定画面を開く
「サイト管理 > プラグイン > テキストエディタ > TinyMCEエディタ > Tinyフォント色」の「設定」をクリックします。
2. 色の名称とカラーコードを入力する
「利用可能なテキスト色」の欄に、次の2つをペアで入力します。
- 色の説明的名称：
赤青など、利用者が見てわかる名前（必須） - 色値の16進コード：
#FF0000の形式
名称は任意の文字列を設定できるため、コーポレートブルー 注意喚起 のように、自組織のデザインガイドラインで使われている呼称をそのまま使うことも可能です。この名称は、利用者が色の上にカーソルを置いた際にツールチップとして表示されます。
3. 「+」ボタンで色を追加する
入力欄の右端にある「+」ボタンを押すと、入力行が1行追加されます。必要な色の数だけ繰り返してください。
登録済みの行にある「–」ボタンを押すと、その行を削除できます。
4. 16進コードは8桁に自動変換される
説明文には #000000 という6桁の例が記載されていますが、#FF0000 のように6桁で入力して保存すると、自動的に #FF0000FF という8桁に変換されます。
末尾の2桁は不透明度（アルファ値）を表しており、FF は完全に不透明であることを意味します。6桁で入力しても問題なく動作します。
なお、16進コード欄の左側にはカラーチップが表示され、入力した色を目視で確認できます。ここをクリックするとカラーピッカーが開き、色を視覚的に選ぶことも可能です。
5. 「変更を保存する」をクリックする
保存すると、すぐにエディタへ反映されます。
実際の使い方（教師向け）
色を登録すると、TinyMCEエディタに2つの操作方法が追加されます。
ツールバーのボタンから
ツールバーに、下線の付いた「A」アイコン（テキスト前景色）と、ペンのアイコン（テキスト背景色）が追加されます。それぞれの右隣にある「∨」をクリックすると、登録された色の一覧が表示されます。
アイコン部分を直接クリックすると、直前に使った色がそのまま適用されます。
「装飾」メニューから
エディタ上部の「装飾」メニューを開くと、最下部に「テキスト前景色」「テキスト背景色」の項目が追加されています。それぞれにカーソルを合わせると、登録した色がサブメニューとして表示されます。
一覧の右端には斜線のアイコンがあり、これを選ぶと設定した色を解除できます。
文字を選択した状態で色を選ぶだけで、すぐに反映されます。
こんな組織におすすめ
Tiny Font Color の導入が特に効果的なのは、次のようなケースです。
コーポレートカラーを統一したい組織 使用できる色を管理者が定義できるため、教材のデザインをブランドガイドラインに沿って揃えられます。色名に組織独自の呼称を使える点も、この用途に適しています。
Attoからの移行で「色が使えなくなった」と言われている Moodleのバージョンアップに伴いTinyMCEへ移行した結果、文字色機能を失って困っているケースは多くあります。本プラグインで解決できます。
教師の自由度をコントロールしたい カラーピッカーの有効／無効を切り替えることで、「決まった色だけを使わせる」「自由に使わせる」を選択できます。文字色と背景色で個別に設定できるのも便利です。
アクセシビリティの観点から
色による強調を導入する際は、色だけに依存した情報伝達にならないよう注意してください。色覚特性のある学習者やスクリーンリーダーの利用者には、色の違いが伝わらない場合があります。
「重要な箇所を赤字にする」場合は、あわせて太字にする、「【重要】」と明記するなど、色以外の手段も併用することをおすすめします。また、文字色と背景色の組み合わせによっては十分なコントラスト比が確保できないことがあるため、登録する色を選ぶ段階で配慮しておくとよいでしょう。
まとめ
Tiny Font Color は、TinyMCEに不足している文字色・背景色の機能をシンプルに補うプラグインです。
- TinyMCEに文字色・背景色のボタンとメニュー項目を追加する
- 使用できる色を管理者が定義できるため、デザインの統一が可能
- カラーピッカーの有効／無効で、利用者の自由度を調整できる
- インストールしただけでは表示されない。必ず色の登録が必要
- 対応バージョンは Moodle 4.1〜5.2、無料で利用可能
教材の視認性を高めたい、しかし色使いは統制したい——そんな要望に応えられるプラグインです。まずは検証環境でお試しください。