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

更新 2022年11月21日 00:43

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

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

前提条件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

既定のカラー設定に戻す