---
sourceDocument: Yokohama 従業員サービス管理 (ESM)
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/yokohama/employee-service-management

 Release :

    - yokohama

ft:locale :

    - ja-JP

ft:publication_title :

    - Yokohama 従業員サービス管理 (ESM)

ft:clusterId :

    - emplsm

bundleId :

    - emplsm

workflow :

    - Employee


---

# リッチコンテンツエディターでメニューを追加

# リッチコンテンツエディターでメニューを追加 {#ariaid-title1}

* リリースバージョン: Yokohama
* 
* 更新日 2025年01月30日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：7分

キャンバスにメニューコンポーネントを追加して、展開または折りたたむことができるコンテンツをデザインします。

## 始める前に

必要なロール：sn_cd.content_manager

\[新規コンテンツ\] フォームのフィールドに入力します。「[リッチコンテンツの作成](https://servicenow-prod.fluidtopics.net/qt~9nY2PX5PUo7L13uvQMQ "リッチコンテンツエディターを使用すると、使いやすい Web スタイルのツールで長い形式のコンテンツをビルドできます。")」を参照してください。  
モジュールまたは列を使用してページレイアウトを作成します。

* モジュールは、ヘッダー、パラグラフテキスト、および画像で構成される事前定義されたコンテンツレイアウトです。「[リッチコンテンツエディターを使用した事前定義されたコンテンツレイアウトの追加](https://servicenow-prod.fluidtopics.net/317WiQJCz3F2BDaWRtJaug "モジュールを使用すると、ヘッダー、パラグラフテキスト、および画像を含む新しいコンテンツレイアウトを簡単に追加できます。縦向きのカード 3 枚、横向きのカード 3 枚で構成されるレイアウト、またはテキストブロックの右側に画像が配置された並列構成から選択します。")」を参照してください。
* 列は、カスタムレイアウトを定義できるコンテナです。「[リッチコンテンツエディターでの列の追加](https://servicenow-prod.fluidtopics.net/SVBNmfezGKgDBcBZpLAY2g "リッチコンテンツエディターのキャンバスを使用して、ページのレイアウトの定義と整理に役立つ列を作成します。")」を参照してください。
{#ec-rich-content-editor-accordion__ul_jzv_qft_wxb}

## 手順

1. \[新しいコンテンツ\] フォームの \[デザイン\] タブから \[エディターを開く\] ボタンを選択して、キャンバスに移動します。
2. メニューコンポーネントをキャンバスにドラッグアンドドロップします。

メニューコンポーネントの動作と切り替え/ボタンのデザインを構成し、パネルを追加します。

3. 移動先: 設定プロパティ アコーディオンコンポーネントを構成するセクション:  
   {#ec-rich-content-editor-accordion__table_qf1_vlw_cdc__entry__2}

   | 設定フィールド | 説明 |
   |-|-|
   | パネルの動作 ||
   | ロード時に最初のパネルを展開 | このオプションを選択すると、最初のパネルのコンテンツが表示された状態でメニューがロードされます。 このオプションの選択を解除すると、すべてのパネルを閉じた状態でメニューがロードされます。 |
   | 複数のパネルを展開することを許可 | このオプションを選択すると、従業員は一度に複数のパネルを展開できます。 このオプションの選択を解除すると、従業員がパネルを展開すると、現在展開されているパネルが自動的に閉じます。 |
   | ボタンのデザイン ||
   | スタイル | 従業員がパネルを展開したり閉じたりするためにクリックするメニューボタンまたは切り替えのスタイルを選択します。 |
   | サイズ | 上向き矢印と下向き矢印を使用して、ボタンのサイズを調整します。 |
   | 配置 | ボタンをメニュータイトルの左または右のどちらに表示するかを指定します。 |
   | 色 | カラーピッカー (チェック柄の正方形) を使用して色を選択するか、表示する色を表すカラーコードを入力します。 すべての HTML カラーがサポートされています。詳細については、「[HTML カラー名](https://htmlcolorcodes.com/color-picker/)」を参照してください。 |
   [表 : 1. メニュープロパティ設定]

   {#ec-rich-content-editor-accordion__table_qf1_vlw_cdc}
4. アコーディオンにさらにパネルを追加するには、にある \[項目を追加\] をクリックします。 設定プロパティ.

背景色や境界線などのメニュースタイルを構成します。外側のコンポーネントコンテナ (メニュー) をクリックして、すべてのパネルを一度に構成します。個々のパネルを構成するには、それぞれのコンテナをクリックします。

5. \[設定\] パネルに移動して、次のスタイリング設定を構成します。  
   {#ec-rich-content-editor-accordion__table_zx2_tgw_jyb__entry__2}

   | 設定フィールド | 説明 |
   |-|-|
   | スタイリング ||
   | 背景色 | カラーピッカー (チェック柄の正方形) を使用して色を選択するか、表示する背景色を表すカラーコードを入力します。 すべての HTML カラーがサポートされています。詳細については、「[HTML カラー名](https://htmlcolorcodes.com/color-picker/)」を参照してください。 |
   | 詳細なスタイリング ||
   | 幅 | 数値を入力するか、セルの右側をドラッグして、値を指定します。 測定単位を選択します。 * px：ピクセル * %：パーセンテージ {#ec-rich-content-editor-accordion__ul_z1t_33z_z5b} |
   | パディング | パディングは、コンテンツと要素境界との間のスペースです。数値を入力して、上、下、右、または左のパディングの値を指定します。 |
   | マージン | マージンは、行と別の要素/キャンバス境界の間のスペースです。数値を入力して、上、下、右、または左のパディングの値を指定します。 |
   | ボーダー | ボタンの外側の境界を編集します。 注: 境界はボタンの周囲の輪郭です。 幅：上向き矢印と下向き矢印を使用して、境界線の幅を調整します。幅と高さの場合と同じように、上向き矢印と下向き矢印の左側にある単一の下向き矢印キーを選択して、希望する測定単位を選択できます。 スタイル：ボタンの周囲の境界線の形式。ドロップダウンを選択して、ボタンの周囲の境界線のタイプを選択します。 色：ボタンの周囲の境界線の色。背景色の選択と同様に、カラーパレットとスライドバーを使用して、ボタンの色を選択します。 |
   | 境界半径 | 上向き矢印と下向き矢印を使用して、境界線の半径を調整します。幅と高さの場合と同じように、上向き矢印と下向き矢印の左側にある単一の下向き矢印キーを選択して、希望する測定単位を選択できます。 |
   [表 : 2. スタイリング設定]

   {#ec-rich-content-editor-accordion__table_zx2_tgw_jyb}

メニュータイトルテキストを書式設定します。

6. メニュータイトルテキストを書式設定するには、\[ メニュータイトル \] コンテナをクリックし、 設定スタイリング セクション。  
   {#ec-rich-content-editor-accordion__table_pm1_w4w_cdc__entry__2}

   | 設定フィールド | 説明 |
   |-|-|
   | スタイリング ||
   | テキストスタイル | 事前に書式設定された選択肢を選択することで、テキストの外観をすばやく変更できます。さまざまな見出しまたは段落スタイルを選択できます。 見出し 1 ～ 6 は h1 ～ h6 の HTML タグに対応しています。 |
   | テキストの色 | このドロップダウンを使用して、テキストの色を変更できます。 選択肢は次のとおりです。 * プライマリ：ポータルテーマで定義されたプライマリ色。 * ミュート：ポータルテーマで定義された色。 * 白：テキストの色を白に変更します。これは、白以外の背景色を使用する場合に便利です。 {#ec-rich-content-editor-accordion__ul_mfb_k5h_vvb} テキストの色は、テキストの色に事前定義された CSS クラスをアサインします。 |
   | 表示 | 画像コンポーネントやテキストコンポーネントなど、同じ列内の複数のコンポーネントの外観を構成します。次のオプションのいずれかを選択します。 * 上と下 (デフォルト)：画像は他のコンポーネントの上に表示されます。 * 並べて表示：画像と別のコンポーネントが並べて表示されます。 {#ec-rich-content-editor-accordion__ul_f4z_hxk_gvb} 注: 最良の結果を得るには、コンポーネントに同じ表示を設定します。たとえば、列に画像とテキストのコンポーネントがあり、画像を左側に表示し、テキストを右側に表示する場合は、両方のコンポーネントの \[表示\] 設定を \[並べて表示\] に変更します。 |
   | 配置 | テキストの水平配置を決定します。以下から選択します。 * 左揃え (Left justify) * 中央揃え (Center justify) * 右揃え (Right justify) * 両端揃え (Justify) (テキストを両方のマージンに揃える) {#ec-rich-content-editor-accordion__ul_j3v_plj_bvb} |
   | 詳細なスタイリング ||
   | パディング | パディングは、コンテンツと要素境界との間のスペースです。数値を入力して、上、下、右、または左のパディングの値を指定します。 |
   | マージン | マージンは、行と別の要素/キャンバス境界の間のスペースです。数値を入力して、上、下、右、または左のパディングの値を指定します。 |
   | フォント名 | 文字の表示に使用するフォントを定義します。 別のフォントを選択するには、ドロップダウン矢印をクリックします。 |
   | フォントサイズ | フォントのサイズを設定します。 |
   | フォントの太さ | テキストをどのぐらい太くまたは細く表示するかを決定します。 別の太さを選択するには、ドロップダウン矢印をクリックします。 |
   | 行の高さ | 2 行のテキスト間の垂直距離を設定します。 |
   | フォントの色 | ポータルテーマのフォントの色を上書きします。 色を選択するには、16 進数コードを入力するか、カラーピッカー (フォント色の右側にある灰色の四角形) をクリックしてカラーパレットから色を選択します。 |
   [表 : 3. メニュータイトルのスタイリング設定]

   {#ec-rich-content-editor-accordion__table_pm1_w4w_cdc}
7. パネルに画像、ビデオ、テキスト、またはリンクを追加して、メニューコンテンツを構築します。
8. \[保存\] または、\[保存して終了\] を選択します。  
   \[保存\] を選択するとコンテンツが保存され、リッチコンテンツエディターのキャンバスに留まります。\[保存して終了\] を選択すると、レコードが保存され、\[新規コンテンツ\] フォームに戻ります。

## 次のタスク

* (オプション) コンテンツを翻訳します。コンテンツの言語翻訳を要求します。詳細については、「[コンテンツライブラリでの多言語サポート](https://servicenow-prod.fluidtopics.net/XA2wXwXaDN~pGZBSdyMXIg "コンテンツライブラリには、コンテンツの翻訳 (コンテンツ翻訳ワークフロー) と言語の切り替え (インターフェイス言語の変更) という、多言語コンテンツを作成するための 2 つの機能が含まれています。")」を参照してください。{#ec-rich-content-editor-accordion__p_vtc_nfg_h1c}

  注:  
  コンテンツの変更が完了した後にのみ、コンテンツを翻訳してください。最良の結果を得るために、翻訳後にコンポーネントを追加または削除したり、書式設定を変更したりすることはお勧めしません。

  異なる言語で異なる書式設定のリッチコンテンツを作成するには、コンテンツを複製し、必要に応じて書式設定を変更します。次に、\[対象者\] を使用して、言語別にコンテンツの対象をユーザーに絞ります。「[対象者](https://servicenow-prod.fluidtopics.net/FI0nO0lVvmlMk2Gsl2K7IQ "対象者レコードを使用して、ポータルコンテンツおよびライフサイクルイベントアクティビティの対象者を特定の対象者に設定します。")」を参照してください。
* \[公開 (Publish)\] タブからコンテンツをプレビューします。  
  注:  
  コンテンツのプレビューは、コンテンツの表示に関する一般的なアイデアを提供するように設計されています。コンテンツの公開後は、デバイスの解像度、テーマの違い、モバイルアプリのスタイル構成の違いにより、見た目が異なる場合があります。
* 公開計画を構成して、コンテンツの配信先、対象者、利用可能期間を管理します：[コンテンツの公開計画の作成](https://servicenow-prod.fluidtopics.net/yFA2aZ9PlQ9R_dxMxfMAWw "コンテンツライブラリにコンテンツを作成した後、1 つ以上の公開計画を追加して、コンテンツの配信先、対象者、およびコンテンツを利用できる期間を管理します。")
{#ec-rich-content-editor-accordion__ul_ogf_pv5_nyb}