Learn365 のテキストエディターでは、受講者向けのコンテンツのスタイル設定やフォーマットを自由にカスタマイズできます。

コンテンツエディターで作成したコンテンツのスタイルは、ソースコードに直接スタイルを追加することで設定できます。この方法で追加したスタイルは、そのコンテンツにのみ適用されます。

背景色、ブランド ロゴ、その他のブランディング要素のスタイル設定など、複数のモジュールやコースのコンテンツで同じスタイルを適用したい場合は、外部スタイル シートドキュメントを使用したほうが簡単です。

外部スタイルシートドキュメントを使用するには、必要なスタイルコードを含む CSS ファイルを作成し、その CSS ファイルをオンライン上に置きます。

このファイルは、SharePoint フォルダーまたはファイルのアップロードとホスティングができる他のオンライン ストレージに置くことができます。CSS ファイルはコースにアクセスされるたびに使用されるため、受講者にはそのファイルの保存先に対して「閲覧」権限が必要です。

以下の手順に沿って、外部 スタイル シートドキュメントを使用して、学習コンテンツにスタイルを適用します。

Step 1

最初に、CSSファイルを作成します。コーディング アプリ、またはシンプルな Note などを使用します。作成したファイルは必ず「.css」ファイル形式で保存します。

作成した CSS ファイルは受講者がアクセスできる場所に置きます。

この説明では、「style_demo.css」というファイルを作成し、SharePoint フォルダー置いています。

つぎのステップでこれをコンテンツ エディターに組み込みます。

Step 2

既存のラーニング モジュールを開くか、新しいラーニング モジュールを作成し、コンテンツ エディターを追加します。

省略メニューアイコン＞「ソースコード」を選択して、ソース コード パネルを開きます。

Step 3

ソースコードパネルに、次のコードを入力し CSSファイルを追加します。

<style>
@import url('YOUR LINK TO THE CSS FILE');
</style>

Step 4

次に、HTMLコードを記述し、追加した CSS ファイルのスタイルを参照します。

 以下のコードはこの例で使用されたものです.。

css ファイル

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

@import url('YOUR LINK TO THE CSS FILE');
</style>

HTML フォーマット

<style>
@import url('YOUR LINK TO THE CSS FILE');
</style>

<div class="description-content">
<div class="topbar">
<div class="title">Engage365</div>
</div>
<hr class="new">
<div class="content">
<p><b>Welcome to our Engage365 for Users course! </b></p>
<p>In just 5 minutes, you'll delve into the essential features of Engage365, designed to enhance employee engagement and communication.</p>
<p>Whether you're a new Engage365 customer or a Learn365 user, this course is tailored to help you grasp the core uses of Engage365 in your daily interactions with managers.</p>
<p>By watching a video, reading descriptive content, and taking a quick quiz, you'll uncover the benefits of employee check-ins, master the art of completing a check-in, and discover how this tool can revolutionize communication with your manager.</p>
</div>
<div class="endQuote">
<p>Get ready to elevate your engagement game with Engage365!</p>
</div>

これで、複数のコースやカタログに同じブランディングを適用することが簡単になりました。ブランディングを変更する必要が生じた場合、CSSでスタイリングされた色やコンテンツをすばやく簡単に置き換えることができます。
そのファイルに加えられたすべての変更は、そのファイルが適用されているすべての作品に影響します。

免責事項：Learn365 はお客さまのコーディングを行う責務はございません。このガイドは、お客様自身でコーディングを適用する際のチュートリアルとしてご利用ください。また、Learn365は、誤ったコーディングに対していかなる責任も負いかねます。