---
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) 所要時間：4分

リッチコンテンツにタブを追加すると、ユーザーは、さまざまなタブを選択し、タブ内の関連付けられているコンテンツを表示できるので、効率的にナビゲーションできます。

## 始める前に

必要なロール：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-tabs__ul_jzv_qft_wxb}

## このタスクについて

画像、ビデオ、テキスト、テキストセクション、リンク、リンクブロック、ボタンなどの他のコンポーネントをタブに追加できます。\[タブ\] コンポーネントをキャンバスにドロップすると、タブの下に、他のコンポーネントをドロップできるエリアが表示されます。  
注:  
\[タブ\] 機能が有効になっていない場合は、コンテンツ公開 アプリケーションを再インストールしてください。

## 手順

1. \[新しいコンテンツ\] フォームの \[デザイン\] タブから \[エディターを開く\] ボタンを選択して、キャンバスに移動します。
2. リッチコンテンツエディターのキャンバスから、ドラッグアンドドロップ方式でタブを追加できます。  
3. タブを追加するには、タブコンポーネント全体を選択し、 設定プロパティ.  
4. キャンバスに追加したタブを選択します。
5. タブの色を変更するには、まずカラーパレットをクリックします。
6. \[設定\] タブで、\[スタイリング\] を選択します。
7. 表示する色を表すカラーコードを入力します。  
   すべての HTML カラーがサポートされています。詳細については、「[HTML カラー名](https://htmlcolorcodes.com/color-picker/)」を参照してください。
8. または、\[背景色 \] フィールドの右側にあるカラーピッカー (灰色の正方形) を選択することもできます。  
   ![リッチコンテンツエディター - カラーセレクター]()
9. 表示されるカラーパレットをクリックします。  
10. カラーパレットから色を選択した後、右側のスライドバーを使用して色を微調整します。  
    バーを上下にスライドさせます。

11. 下部のスライドバーを使用して、色を明るくしたり暗くしたりします。  
    注:  
    変更をプレビューしてタブを選択すると、タブの色または輪郭にポータルテーマのデフォルトの色が表示される場合があります。
12. \[タブタイトル\] をハイライト表示して上書きすることで、タブに表示されるテキストを編集または変更できます。
13. タブを選択して \[詳細なスタイリング\] を選択すると、各タブのサイズと \[タブタイトル\] のフォントを編集できます。
14. キャンバスに追加したタブの下のエリアに他のコンポーネントをドロップできます。  
    {#ec-rich-content-tabs__table_vdh_dqy_5vb__entry__2}

    | フィールド | 説明 |
    |-|-|
    | 幅 | 各タブを選択し、\[幅\] ドロップダウンを使用して、その幅を編集します。選択肢は次のとおりです。 * 自動：サイズはタブ内のコンテンツに基づきます。タブに追加のテキストを入力すると、幅が自動的に大きくなります。 * px：測定単位としてピクセルを使用します。 * %：測定単位としてパーセンテージを使用します。 {#ec-rich-content-tabs__ul_sfv_ydz_5vb} |
    | 高さ | 各タブを選択し、\[高さ\] ドロップダウンを使用して、その高さを編集します。選択肢は次のとおりです。 * 自動：サイズはタブ内のコンテンツに基づきます。タブに追加のテキストを入力すると、幅が自動的に大きくなります。 * px：測定単位としてピクセルを使用します。 * %：測定単位としてパーセンテージを使用します。 {#ec-rich-content-tabs__ul_pc3_c2z_5vb} |
    | フォント名 | ドロップダウンを選択して特定のフォントを選択します。 |
    | フォントサイズ | 数字を入力してフォントサイズを変更するか、上下の矢印を使用してフォントを縮小または拡大します。 |
    | フォントの太さ | ボタンのテキストを太くまたは細くする方法を決定します。別の重み付けを選択するには、ドロップダウン矢印を選択します。 |
    | 行の高さ | テキストの行間の距離を決定します。上下の矢印を使用して、行の高さを増減します。 |
    | フォントの色 | フォントの色を定義します。 \[フォントの色\] フィールドの右側にあるカラーピッカー (灰色の正方形) を選択します。 カラーパレットをクリックし、必要な色を選択します。 右下のスライドバーを使用して、色を微調整します。 注: 変更をプレビューしてタブを選択すると、テキストの色としてポータルテーマのデフォルトの色が表示される場合があります。 |
    [表 : 1. 詳細なスタイリング]

    {#ec-rich-content-tabs__table_vdh_dqy_5vb}
15. \[プロパティ\] の下の \[タイトル\] フィールドを編集します。  
    入力したテキストはタブのホバーテキストとして表示され、スクリーンリーダーがそれを読み上げます。
16. \[保存\] または、\[保存して終了\] を選択します。  
    \[保存\] を選択するとコンテンツが保存され、リッチコンテンツエディターのキャンバスに留まります。\[保存して終了\] を選択すると、レコードが保存され、\[新規コンテンツ\] フォームに戻ります。

## 次のタスク

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

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

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