コースカタログカードの色を変更する

  • 更新

コースカタログを組織のブランドに合わせるため、LMS365 コースカタログカードの既定のカラーを変更することができます。

ここでは、カスケーディングスタイルシート(CSS)を使用して、SharePoint および Microsoft Teams のLMS365コースカタログカードの色を変更する方法、既定の色の設定に復元する方法についてご説明します。

capture1.png

capture2.png

前提条件

この操作を行うには「コースカタログ管理者」ロールが必要です。

このメソッドはコースカタログカードの色のみをカスタマイズします。
コースやトレーニングプランページの色は変更されません。

コースカタログカードにカスタムカラーを適用するには、最初に関連するカスタムカラーを含むCSSスクリプトを作成し、そのスクリプトをコピーする必要があります。

下記はコースカタログカードのカスタムカラーテーマ用スクリプトの例です。
このスクリプトにお好みの色を適用して使用することができます。カスタマイズ可能なカラムは6つです。各カラムのスタティックカラーホバーカラーは、HTMLのカラーコードを変更することでカスタマイズ可能です。

/* #Column 1 */ .ef-callout-storage .ms-Callout .ef--color-orange.ms-Callout-beak, .ef-callout .ef--color-orange.ef-card-header, .ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-orange.ef-box-color { background-color: #D83B01!important; } .ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-orange.ef-box-color { background-color: #FF632B!important; }

<style>
/* #Column 1 */ .ef-callout-storage .ms-Callout .ef--color-orange.ms-Callout-beak, .ef-callout .ef--color-orange.ef-card-header, .ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-orange.ef-box-color { background-color: #D83B01!important; } .ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-orange.ef-box-color { background-color: #FF632B!important; }
/* #Column 2 */ .ef-callout-storage .ms-Callout .ef--color-orange-light.ms-Callout-beak, .ef-callout .ef--color-orange-light.ef-card-header, .ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-orange-light.ef-box-color { background-color: #EA4300!Important; } .ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-orange-light.ef-box-color { background-color: #FD814F!Important; } /* #Column 3 */ .ef-callout-storage .ms-Callout .ef--color-red-dark.ms-Callout-beak, .ef-callout .ef--color-red-dark.ef-card-header, .ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-red-dark.ef-box-color { background-color: #A80000!Important; } .ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-red-dark.ef-box-color { background-color: #E05D5D!Important; } /* #Column 4 */ .ef-callout-storage .ms-Callout .ef--color-red.ms-Callout-beak, .ef-callout .ef--color-red.ef-card-header, .ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-red.ef-box-color { background-color: #E81123!Important; } .ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-red.ef-box-color { background-color: #F5636F!Important; } /* #Column 5 */ .ef-callout-storage .ms-Callout .ef--color-green.ms-Callout-beak, .ef-callout .ef--color-green.ef-card-header, .ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-green.ef-box-color { background-color: #107C10!Important; } .ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-green.ef-box-color { background-color: #6DD46D!Important; } /* #Column 6 */ .ef-callout-storage .ms-Callout .ef--color-teal-dark.ms-Callout-beak, .ef-callout .ef--color-teal-dark.ef-card-header, .ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-teal-dark.ef-box-color { background-color: #004B50!Important; } .ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-teal-dark.ef-box-color { background-color: #42C3CC!Important; }</style>

SharePoint でカードの色を変更する

SharePoint のコースカタログのカードにカスタマイズを適用するには、

1.コースカタログのホームページで、Web パーツ設定アイコンを選択します。コースカタログ設定パネルが開きます。

capture3.png

2.コースカタログ設定パネルで、コースカタログ情報の編集を展開し、説明の「編集」を選択します。

capture4.png

3.説明のエディターで、「View HTML」アイコンを選択します。

4.コピーしたCSSスクリプトを貼り付けて「Update」を選択します。

capture5.png

5.説明パネルには何も表示されていません。そのまま「OK」を選択して、説明パネルを閉じます。

6.コースカタログ設定パネルで「保存」を選択して、変更を適用します。

コースカタログのカードに変更した色が反映されます。

capture6.png

Teams でカードの色を変更する

Microsoft Teamsのコースカタログのカードにカスタマイズを適用するには、

Microsoft Teams の LMS365 アプリの「カタログ」タブに移動し、SharePoint でカードの色を変更する手順を行います。保存後、変更が適用されます。

既定のカラー設定に戻す

1.コースカタログのホームページで、Web パーツ設定アイコンを選択します。コースカタログ設定パネルが開きます。

2.コースカタログ設定パネルで、コースカタログ情報の編集を展開し、説明の「編集」を選択します。

3.説明のエディターで、「View HTML」アイコンを選択します。

4.CSS スクリプトを削除し、「Update」を選択します。

5.説明パネルには何も表示されていません。そのまま「OK」を選択して、説明パネルを閉じます。

6.コースカタログ設定パネルで「保存」を選択して、変更を適用します。

コースカタログカードの色は既定の色に戻ります。