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

  • 更新

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

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

colors of course catalog card1.png

下矢印.png

colors of course catalog card2.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-#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 パーツ設定アイコンを選択します。コースカタログ設定パネルが開きます。

colors of course catalog card3.png

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

colors of course catalog card4.png

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

colors of course catalog card5.png

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

colors of course catalog card6.png

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

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

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

colors of course catalog card7.png

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

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

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

既定のカラー設定に戻す

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

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

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

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

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

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

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