コースカタログのカード色は、組織のブランドカラーに合わせて変更することができます。

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

 

 

• 前提条件
• SharePoint でカードの色を変更する
• Teams でカードの色を変更する
• 既定のカラー設定に戻す

前提条件

必要なロール：コースカタログ管理者

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

カードにカスタム カラーを適用するには、最初にカスタムカラーを含む 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-#546e7a.ms-Callout-beak, .ef-callout .ef--color-#546e7a.ef-card-header, .ef-layout-main .ef--course-items .ef-flex-item .ef-card .ef-card-header .ef--color-#546e7a.ef-box-color {
    background-color: #107C10!Important;
}
.ef-layout-main .ef--course-items .ef-flex-item .ef-card:hover .ef--color-#546e7a.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 パーツ設定アイコンを選択します。コースカタログ設定パネルが開きます。

 

 

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

 

３．エディターで、3点アイコン＞「ソースコード」を選択します。

 

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

 

５．説明パネルのエディターには何も表示されません。そのまま「OK」を選択して閉じます。

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

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

 

 

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

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

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

 

既定のカラー設定に戻す

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

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

３．エディターで、3点アイコン＞「ソースコード」を選択します。

４．CSS スクリプトを削除し「保存」します。

５．説明パネルのエディターには何も表示されません。そのまま「OK」を選択して閉じます。

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

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