コースカタログのカード色は、組織のブランドカラーに合わせて変更することができます。
ここでは、カスケード スタイル シート (CSS) を使用して、SharePoint と Microsoft 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 のコースカタログのカードにカスタマイズを適用します。
1．コースカタログのホームページで、Web パーツ設定アイコンを選択します。コースカタログ設定パネルが開きます。
2．コースカタログ設定パネルで、コースカタログ情報の編集を展開し、説明の「編集」を選択します。
3．エディターで、省略メニューアイコン＞「ソースコード」を選択します。
4．作成した CSS スクリプトをコピーして貼り付け、ソースコードを「保存」します。
5．ソースコードを保存すると、説明パネルに戻ります。ここにはコードは表示されません。そのまま「OK」を選択して説明パネルを閉じます。コースカタログ設定パネルに戻ります。
6．コースカタログ設定パネルで「保存」を選択して、変更を適用します。
コースカタログのカードに変更した色が反映されます。
Teams でカードの色を変更する
Microsoft Teams のコースカタログのカードにカスタマイズを適用するには、
Microsoft Teams の Learn3655 アプリでカタログを開き、SharePoint でカードの色を変更すると同じ手順を行います。保存後、変更が適用されます。
既定の色に戻す
以下の手順で、カードの色を既定の色に戻します。
1．コースカタログホームページで、Web パーツ設定アイコンを選択します。コースカタログ設定パネルが開きます。
2．コースカタログ設定パネルで、説明の「編集」を選択します。
3．エディターで、省略メニューアイコン＞「ソースコード」を選択します。
4．CSS スクリプトを削除し「保存」します。
5．説明パネルの「OK」を選択して閉じます。
6．コースカタログ設定パネルで「保存」を選択して、変更を適用します。
コースカタログカードの色は既定の色に戻ります。