HTMLエディタ

概要

内蔵のHTMLエディタを使用すると、講師、教師、管理者は、コース、メッセージ、ウィジェットなどの中でコンテンツを直接作成および編集できます。

この記事では、エディターのさまざまな要素にアクセスして使用し、魅力的で美しいコンテンツを作成する方法を解説します。

ビジネスプラットフォームではデフォルトで「コース」という用語が使用され、アカデミアプラットフォームではデフォルトで「クラス」という用語が使用されることにご注意ください。この記事では、 「コース」と「クラス」という用語は同義語として扱われます。

ツールバーメニュー

HTMLエディタは、コース、メッセージ、ウィジェットなどのコンテンツを編集する際に表示されます。ツールバーはメニューバーとアイコンで構成されており、セクション内のコンテンツを編集できます。

この記事のスクリーンショットはコースセクション内で表示されていますが、ツールバーの機能はコース、メッセージ、ウィジェットのいずれにおいても同様に動作します。ツールバーの左側にあるコンテンツビルダーは、コース編集時のみ利用可能です。

上部のメニューバーは7つのメニューで構成されており、それらについては以下で詳しく説明します。

ファイル

ファイルメニューには、以下の操作が含まれます。

タイトル	説明
新しいドキュメント	テキストウィンドウ内のすべてのテキスト、画像、リンクを消去します。
プレビュー	ポップアップウィンドウを開くと、公開されたコンテンツのプレビューが表示されます。
印刷	テキストウィンドウに表示されている内容を印刷します。

編集

編集メニューには、以下の操作が含まれます。

タイトル	説明
元に戻す	直近の操作を取り消します。
やり直し	直近の操作をやり直してください。
カット	選択したテキスト／画像を削除し、クリップボードに保存します。
コピー	選択したテキスト／画像をコピーしてクリップボードに保存します。
ペースト	クリップボードからテキスト/画像を貼り付けます。
テキストとして貼り付け	クリップボードの内容をテキストのみで貼り付けてください。書式は適用しないでください。
すべて選択	テキストウィンドウ内のすべてのコンテンツを選択/ハイライト表示します。
検索と置換	単語またはフレーズを見つけて、新しい単語またはフレーズに置き換えてください（該当する場合）。

ビュー

「表示」メニューには、テキストウィンドウ内のテキストや文字を表示するための以下の操作が含まれています。

タイトル	説明
ソースコード	テキストウィンドウでソースコードを表示／編集します。
見えない文字を表示する	スペースやソフトリターンなどの目に見えない文字を表示します。
ブロックを表示	テキストウィンドウ内に段落ブロックを表示します。
プレビュー	ポップアップウィンドウを開くと、公開されたコンテンツのプレビューが表示されます。

入れる

「挿入」メニューには、画像、動画、表、リンクなどを挿入するための以下の操作が含まれています。

タイトル	説明
リンク	URLへのハイパーリンクを挿入します。
メディア	メディアを挿入／埋め込む。
テーブル	テーブルを挿入して作成します。
特別なキャラクター	特殊文字を挿入してください。
絵文字	絵文字を挿入してください。
水平線	水平線を挿入します。
ページ区切り	新しいページを開始するには、改行を挿入してください。
非破壊スペース	ページを分割しない範囲でスペースを挿入してください。
アンカー	アンカー/ブックマークを任意の位置に挿入します。
テンプレートを挿入	保存済みのテンプレートを挿入します。
テンプレートとして保存	ハイライトしたテキストをテンプレートとして保存します。
日時	ドロップダウンメニューから日付または時刻のオプションを選択してください。
方程式を編集する	ハイライト表示されている数式をクリックすると編集できます。
画像をアップロード	クリックして画像をアップロードしてください。
ファイルをアップロード	クリックしてファイルをアップロードしてください。
ウェブ会議を作成する	クリックすると、テキストにウェブ会議機能を追加できます*。
音声を録音する	テキストウィンドウ内で直接音声を録音するには、ここをクリックしてください。
ビデオを録画する	テキストウィンドウ内でクリックすると、直接ビデオを録画できます。

* Web会議の作成オプションを表示するには、まずアプリセンターからWeb会議アプリをインストールする必要があります。

形式

「書式」メニューには、テキストの書式設定を行うための以下の操作が含まれています。

タイトル	説明
大胆な	選択したテキストを太字にします。
イタリック	選択したテキストを斜体にする。
下線	選択したテキストに下線を引いてください。
取り消し線	選択したテキストに取り消し線を引きます。
上付き文字	選択したテキストを上付き文字として書式設定します。
添字	選択したテキストを下付き文字としてフォーマットします。
コード	選択したテキストをコードとしてフォーマットします。
ブロック	ドロップダウンメニューから適切なブロック書式を選択してください。
フォント	ドロップダウンメニューから別のフォントを選択してください。
フォントサイズ	ドロップダウンメニューからフォントサイズを選択してください。
整列	ドロップダウンメニューからテキストの配置スタイルを選択してください。
行の高さ	ドロップダウンメニューから行の高さを選択してください。
インデントを増やす	テキストまたは段落を右にインデントしてください。
インデントを減らす	テキストまたは段落を左に移動します。
テキストの色	ドロップダウンメニューから希望のテキストカラーを選択してください。
背景色	ドロップダウンメニューから背景色を選択してください。
明確な書式設定	選択したテキストの書式設定を解除します。

ツール

「ツール」メニューには、以下の操作が含まれています。

タイトル	説明
ソースコード	ソースコードを表示／編集する。
単語数	単語数と文字数を表示します。

テーブル

「テーブル」メニューには、テーブルを挿入したり、テーブル構造を変更したりするための以下の操作が含まれています。

タイトル	説明
テーブル	表を挿入します。
細胞	ドロップダウンメニューから選択したセルに対する変更オプション。
行	ドロップダウンメニューから選択した行のオプションを変更、削除、または追加します。
カラム	ドロップダウンメニューから選択した列のオプションを変更、削除、または追加します。
テーブルプロパティ	テーブルの幅、高さ、境界線などのプロパティを表示および変更できます。
テーブルを削除	選択したテーブルを削除します。

ツールバーのセカンダリメニュー

メインメニューの下には、追加の書式設定を行うための、アクセスしやすいドロップダウンオプションとアイコンで構成されたツールバーがあります。

元に戻すとやり直し

前の操作を取り消すには、元に戻すアイコンをクリックしてください。
前のアイコンをやり直すには、やり直しアイコンをクリックしてください。

段落と見出しのスタイル

見出しスタイルのドロップダウンメニューをクリックして、テキストに書式とスタイルを適用します。

フォントスタイル

テキストのフォントを変更するには、フォントのドロップダウンメニューをクリックしてください。

フォントサイズ

フォントサイズのドロップダウンメニューをクリックして、テキストのサイズを変更してください。

フォント形式

太字アイコンをクリックすると、テキストが太字になります。
斜体アイコンをクリックすると、テキストが斜体になります。
下線アイコンをクリックすると、テキストに下線が引かれます。

テキストの色

テキストカラーアイコンをクリックすると、フォントの色を選択／変更できます。

テキストの配置

テキストを整列させるには、整列アイコンをクリックしてください。

箇条書き

箇条書きアイコンをクリックすると、箇条書きを作成および書式設定できます。

番号付きリスト

箇条書きまたは番号付きリストを作成および書式設定するには、番号付きリストのアイコンをクリックします。

画像をアップロードし、ファイルをアップロードします。

画像をアップロードするには、画像アップロードアイコンをクリックしてください。
ファイルをアップロードするには、アップロードファイルアイコンをクリックしてください。

明確な書式設定

コピー＆ペーストしたコンテンツに付随する可能性のあるスタイルを削除するには、「書式設定のクリア」アイコンをクリックしてください。

背景色

テキストや画像にハイライトを追加するには、背景色アイコンをクリックしてください。

高度なツールバー

追加機能については以下をご覧ください。

「もっと見る」をクリックしてください詳細ツールバーを表示するアイコン。

詳細ツールバーはセカンダリツールバーの下に表示され、以下で説明する追加オプションが含まれています。

インデントと水平線

テキストのインデントを減らすには、「インデントを減らす」アイコンをクリックしてください。
テキストをインデントするには、「インデントを増やす」アイコンをクリックしてください。
水平線を挿入するには、水平線アイコンをクリックします。

絵文字

絵文字をクリックしてください絵文字キーボードを開くアイコン。
絵文字をクリックして挿入してください。

特別なキャラクター

特殊文字をクリック特殊文字ポップアップを開くためのアイコン。
特殊文字をクリックして挿入してください。

高度なアイコン

リンクの挿入/編集アイコンをクリックします。任意のURLへのリンクを挿入する。
メディアの挿入/編集アイコンをクリックします。任意のURLへのリンクを挿入/埋め込む。
挿入/編集数式アイコンをクリックします。任意のURLへのリンクを挿入/埋め込む。
テンプレート挿入アイコンをクリックしますテンプレートを挿入する。
ソースコードアイコンをクリックします。現在のページのソースコードを表示するには。
音声録音アイコンをクリックします。コースページに直接音声を録音する。
ビデオ録画アイコンをクリックしますコースページに直接動画を録画する。

ウェブ会議の作成アイコンをクリックします。ドロップダウンメニューのいずれかを使用して、ウェブ会議リンクを作成します。

注：お使いのプラットフォームにインストールされているウェブ会議アプリのみが表示されます。

ベストプラクティス

これらのベストプラクティスを活用して、エディターを最大限に活用しましょう。

新しい段落ではなく改行を挿入するには、Shiftキーを押しながらEnterキーを押します。
HTMLウィジェットを埋め込む際は、まずソースコード内のテキストウィンドウを確認してください。

「表示」ドロップダウンをクリックしてください。
< > ソースコードをクリックしてください。

書式設定エラーを避けるため、サードパーティのコンテンツはプレーンテキストとして貼り付けてください。
テーブルの境界線を非表示にするには：

テーブルを選択してください。
「テーブルのプロパティ」をクリックします。
ポップアップの「一般」タブで、「境界線の幅」を「0」に設定します。
「詳細設定」タブで、境界線のスタイルを「非表示」または「なし」に選択します。

スペルチェッカー

エディターにはスペルチェッカーが搭載されており、スペルミスのある単語には赤い線が表示されます。スペルミスを修正するには：

CTRLキーを押してください + マウスの右クリック。
候補リストから正しいスペルを選択してください。

埋め込み変数

{{変数名}}形式を使用すると、レッスンページに変数を埋め込むことができます。これにより、ユーザーやコースごとにコンテンツをカスタマイズできます。

コンテンツページでは、以下の変数を使用できます。

{{class_custom_field_1}}
{{class_custom_field_2}}
{{class_finish_date}}
'{class_id}} は、{{class_id}} が示すようにクラスIDが異なります。
教室の場所
名クラス名
{{class_name_with_link}}
{{class_start_date}}
{{completed_at_utc}}
{{course_code}}
{{クレジット}}
{{授業日数}}
{{days_left}}
{{deactivate_students_after}}
{{organization_id}}
{{organization_name}}
{{section_code}}
{{site_name}}
{{サイト名とURL}}
{{教師名}}
{{teacher_name_with_link}}
ユーザー名_メールアドレス
ユーザー名（user_first_name）
{{user_full_name}}
{{user_full_name_with_link}}
{{ユーザーID}}
{{user_last_name}}
{{user_prefered_contact_method}}
{{user_ssn}}
{{ユーザーID}}
{{なぜ}}

サイズ選びの動画

HTMLエディタで動画をリンクとして追加する場合、以下のHTMLコードを使用して動画のサイズを設定できます。

<a width='100' height='700'>リンク</a>。

動画のサイズを自動調整したい場合は、幅または高さのいずれかの値を省略できます。
パーセント値を使用してビデオのサイズを設定することもできます。たとえば、<width='100%' > のように指定します。

画像編集

エディターには、アップロードされた画像を編集するためのさまざまなオプションが用意されています。画像を編集するには：

画像をクリックしてください。
オプションメニューが表示されます。

アイコン	説明
	画像を反時計回りに回転させる
	画像を時計回りに回転させる
	画像を水平方向に反転する
	画像を垂直方向に反転する
	画像の切り抜き
	画像プロパティを編集する