コースカタログを組織のブランドに合わせるため、LMS365 コースカタログカードの既定のカラーを変更することができます。
ここでは、カスケーディングスタイルシート(CSS)を使用して、SharePoint および Microsoft Teams のLMS365コースカタログカードの色を変更する方法、既定の色の設定に復元する方法についてご説明します。
前提条件
この操作を行うには「コースカタログ管理者」ロールが必要です。
このメソッドはコースカタログカードの色のみをカスタマイズします。
コースやトレーニングプランページの色は変更されません。
コースカタログカードにカスタムカラーを適用するには、最初に関連するカスタムカラーを含む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 パーツ設定アイコンを選択します。コースカタログ設定パネルが開きます。
2.コースカタログ設定パネルで、コースカタログ情報の編集を展開し、説明の「編集」を選択します。
3.説明のエディターで、「View HTML」アイコンを選択します。
4.コピーしたCSSスクリプトを貼り付けて「Update」を選択します。
5.説明パネルには何も表示されていません。そのまま「OK」を選択して、説明パネルを閉じます。
6.コースカタログ設定パネルで「保存」を選択して、変更を適用します。
コースカタログのカードに変更した色が反映されます。
Teams でカードの色を変更する
Microsoft Teamsのコースカタログのカードにカスタマイズを適用するには、
Microsoft Teams の LMS365 アプリの「カタログ」タブに移動し、SharePoint でカードの色を変更する手順を行います。保存後、変更が適用されます。
既定のカラー設定に戻す
1.コースカタログのホームページで、Web パーツ設定アイコンを選択します。コースカタログ設定パネルが開きます。
2.コースカタログ設定パネルで、コースカタログ情報の編集を展開し、説明の「編集」を選択します。
3.説明のエディターで、「View HTML」アイコンを選択します。
4.CSS スクリプトを削除し、「Update」を選択します。
5.説明パネルには何も表示されていません。そのまま「OK」を選択して、説明パネルを閉じます。
6.コースカタログ設定パネルで「保存」を選択して、変更を適用します。
コースカタログカードの色は既定の色に戻ります。