Learn365 のテキストエディターでは、さまざまなオプションを使ってスタイルや書式を自由に設定することができます。

コースとトレーニングプランの「詳細説明」を編集することで、コースとトレーニングプランのランディングページに他とは違うブランディングされた説明文を表示することができます。
これは、エディターの書式オプションか、ソースコードオプションでカスタムコードを直接追加することで行うことができます。

ここでは、テキストエディターの「ソースコード」オプションを使って、コースやトレーニングプランの詳細説明をブランディング化する方法についてご説明します。

※ここで使用するソースコードはそのままご利用いただくことができます。適宜調整して、トレーニング ランディングページのブランディングにお役立てください。

コースの詳細説明をブランディング化する

ここでご紹介する例では、コースの詳細説明に、以下のブランディングを適用します。

カスタム背景色 / ロゴとタイトルのヘッダー / 段落 / 画像 / テキストフィールド / アイコン

以下の手順で行います。

１．新しいコースを作成するか、既存のコースを選択し、コース設定パネルの基本情報セクション＞「詳細説明」フィールドに移動します。

編集を快適に行うため、テキストエディターのツールバーにある3点アイコンを選択し、表示された拡張パネルでフルスクリーンアイコンを選択ます。

２．拡張パネルでソース コード アイコンを選択し、ソース コード パネルを開きます。

ソースコードパネルでは、HTMLコードでコンテンツを直接編集したり、<style></style>タグを使用してカスタムスタイルを適用することができます。

３．パネルにコードを記述します。

今回の例では使用するコードが、2つのコード・スニペットに分けられています。

• Style： カスタムスタイルの定義
• HTML： コンテンツ

Style

<style>
.description-content {
font-family: Arial, sans-serif;
background-color: #FEE9DD;
margin: 0;
padding: 0;
max-width: 40rem;
line-height: normal;
}
.topbar {
color: #000;
text-align: left;
padding: 20px;
}
.logo {
width: 75px;
height: 75px; 
vertical-align: middle;
}
.title {
display: inline-block;
margin-left: 10px;
font-size: 28px;
font-weight: bolder;
vertical-align: middle;
}
.content {
text-align: left;
padding: 20px;
}
.content p {
font-size: 18px;
margin: 20px 0;
}
.content img {
max-width: 100%;
height: auto;
border-radius: 20px;
}
.endQuote {
text-align: center;
padding: 20px;
}
.endQuote p {
font-size: 22px;
font-weight: bolder;
margin: 20px 0;
}
.endQuote img {
max-width: 70px;
}
hr.new {
border-top: 1px dashed white;
}
</style>

HTML

<div class="description-content">
<div class="topbar"><img class="logo" src="https://lms365.com/wp-content/uploads/2022/12/cropped-lms365-favicon-180x180.webp" alt="Logo">
<div class="title">Page Title</div>
</div>
<hr class="new">
<div class="content">
<p><b>This is where you can describe the course.</b><br><br>We recommend that you outline what the learner will be able to do after completing the course by describing the learning goals for the course.</p>
<img src="https://assets-usa.mkt.dynamics.com/9c949386-c0e0-4279-9d35-d0027dc8c8f2/digitalassets/images/17645e26-3c73-ee11-9ae7-000d3a98501d?ts=638338380797926295" alt="Image"></div>
<div class="endQuote">
<p>Happy course building!</p>
<img src="https://assets-usa.mkt.dynamics.com/9c949386-c0e0-4279-9d35-d0027dc8c8f2/digitalassets/images/8fcf2ab0-3273-ee11-9ae7-000d3a99892e?ts=638338340141222402" alt="Thumbs up icon"></div>
</div>

この例を参考に、お客様の組織に合わせてコースやトレーニングプランの説明を作成してください。

この例のコードをコピーしてご利用いただくこともできます。必要に応じて、コンテンツ、ロゴ、画像を編集することもできます。

また、外部 CSS スタイルシートのリンクが利用できる場合、それを使用することもできます。これにより、多くのコースにカスタムスタイルを簡単に適用することができます。

重要！ご紹介したコードテンプレートは、あくまでも参考として提供しています。

ご利用にあたっては以下の点にご留意ください。

• いかなる保証もいたしません：こちらで提供したコードについて、明示的または黙示的を問わず弊社はいかなる保証もいたしません。コードの適合性と機能性については、お客様の特定の環境において、お客様の責任において判断してください。
  
  
• サポートはありません：コードやその組み込みに関する技術的サポートは行っておりません。変更やカスタマイズは、お客様ご自身の責任において行ってください。
  
  
• 使用の責任は負いません：コードは「そのまま」提供されます。弊社は、このコードの使用によって生じるいかなる悪影響やその他の問題についても責任は負いません。お客様は、お客様の責任においてこのコードを使用するものとします。
  
  
• 互換性を保証するものではありません：既存のシステム、ソフトウェア、ハードウェアとの互換性は保証できません。互換性テストはお客様の責任で行ってください。
  
  
• セキュリティとコンプライアンス：コードがお客様の組織に適用されるセキュリティ、プライバシー、または法的要件に準拠していることの確認は、お客様の責任おいて行ってください。
  
  
• 責任は負いません： 本コードテンプレートの使用または使用不能から生じる直接的、間接的、特別、偶発的、または結果的な損害または損失について、当社は一切責任を負いません。

このコード・テンプレートを使用された場合、お客様はこれらの条件を承諾しこれに同意したものとみなされます。このコードの機能についてなんらかの疑念や 懸念がある場合は、専門家にご相談されることをお勧めします。コードの確認、検証、またお客様の特定の要件に適合させると共に、コードがお客様の品質およびセキュリティー基準に適合していることをご確認ください。

ご理解とご協力のほどよろしくお願いいたします。