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

リッチコンテンツエディターのキャンバスを使用して、ページのレイアウトの定義と整理に役立つ列を作成します。

## 始める前に

必要なロール：sn_cd.content_manager

\[新規コンテンツ\] フォームを完了し (「[リッチコンテンツの作成](https://servicenow-prod.fluidtopics.net/qt~9nY2PX5PUo7L13uvQMQ "リッチコンテンツエディターを使用すると、使いやすい Web スタイルのツールで長い形式のコンテンツをビルドできます。")」を参照)、リッチコンテンツキャンバスに移動すると、リッチコンテンツを作成できます。  
1、2、または 3 つの列を追加できます。それぞれの列は、他のコンポーネントのコンテナとして機能します。各列コンポーネントは、コンポーネントを選択し、 設定でプロパティを更新することによって編集することもできます。  
注:  
列内のセルの最小高さは 75px です。セルの高さを小さくすると、セルが行からはみ出します。

## 手順

1. \[新しいコンテンツ\] フォームの \[デザイン\] タブから \[エディターを開く\] ボタンを選択して、キャンバスに移動します。
2. リッチコンテンツエディターのキャンバスから、ドラッグアンドドロップ方式で列を追加できます。  
   列は、作成するコンテンツのコンテナとして機能します。

   1 列、 2 列、または 3 列 をリッチコンテンツエディターのキャンバスにドロップすると、2 つのセパレーターが表示されます。外側のセパレーターには \[行\] のラベルが付いています。内側のセパレーターには \[セル\] のラベルが付いています。

行またはセルに背景色、最大幅、パディングなどのスタイリングを追加します。スタイリングを追加しない場合は、このページの下部にあるリンクに進むことができます。

3. 編集する行またはセルを選択します。
4. \[設定\] タブに移動します。
5. 次のいずれかのスタイリング設定を使用します。  
   {#ec-rich-content-canvas__table_zx2_tgw_jyb__entry__2}

   | 設定フィールド | 説明 |
   |-|-|
   | スタイリング ||
   | 背景色 | カラーピッカー (灰色の正方形) を使用して色を選択するか、表示する背景色を表すカラーコードを入力します。 すべての HTML カラーがサポートされています。詳細については、「[HTML カラー名](https://htmlcolorcodes.com/color-picker/)」を参照してください。 |
   | 詳細なスタイリング ||
   | 幅 | 数値を入力するか、セルの右側をドラッグして、値を指定します。 測定単位を選択します。 * px：ピクセル * %：パーセンテージ {#ec-rich-content-canvas__ul_z1t_33z_z5b} |
   | 高さ | 数値を入力するか、行の下部をドラッグして、値を指定します。 測定単位を選択します。 * px：ピクセル * %：パーセンテージ {#ec-rich-content-canvas__ul_dkg_mhw_jyb} |
   | パディング | パディングは、コンテンツと要素境界との間のスペースです。数値を入力して、上、下、右、または左のパディングの値を指定します。 |
   | マージン (行のみ) | マージンは、行と別の要素/キャンバス境界の間のスペースです。数値を入力して、上、下、右、または左のパディングの値を指定します。 |
   | 境界線 (セルのみ) | 幅、境界線のスタイル、色を定義します。 |
   | 境界線の半径 (セルのみ) | 半径を設定すると、境界線の角が丸くなります。 |
   | プロパティ ||
   | ID | HTML 要素を識別する一意の ID。 |
   | タイトル | ユーザーがコンポーネントにカーソルを合わせると表示されるツールヒントまたは情報。 |
   [表 : 1. スタイリング設定]

   {#ec-rich-content-canvas__table_zx2_tgw_jyb}
6. \[保存\] を選択します。

## 次のタスク

列をさらに追加してスタイルを設定し、ページ上のすべてのコンテンツのレイアウトを作成します。  
次に、画像、ビデオ、テキストボックス、ボタンなどのコンポーネントを追加します。

* [リッチコンテンツエディターでタブを追加する](https://servicenow-prod.fluidtopics.net/WSS~r3TR6W5ytEVlv0bQ_w "リッチコンテンツにタブを追加すると、ユーザーは、さまざまなタブを選択し、タブ内の関連付けられているコンテンツを表示できるので、効率的にナビゲーションできます。")
* [リッチコンテンツエディターでの分割線の追加](https://servicenow-prod.fluidtopics.net/krpr_MGmpGZgqvB9ULgoMw "キャンバスに水平分割線を追加して、要素を視覚的に分離したり、重要なセクションを強調表示したりします。")
* [リッチコンテンツエディターでの画像の追加](https://servicenow-prod.fluidtopics.net/e~PS3XIR1HG0s6f8Rx1yHw "リッチコンテンツエディターのキャンバスを使用して、コンテンツに画像を追加します。")
* [リッチコンテンツエディターでのビデオの追加](https://servicenow-prod.fluidtopics.net/~YYcsqrfTP6tEyQD0wH9_w "リッチコンテンツエディターのキャンバスを使用して、コンテンツにビデオを追加します。")
* [リッチコンテンツエディターでのテキストまたはテキストセクションの追加](https://servicenow-prod.fluidtopics.net/5WKu56O7gU57a07S8jWgZQ "リッチコンテンツエディターのキャンバスを使用して、コンテンツに [テキスト] または [テキストセクション] を追加できます。")
* [リッチコンテンツエディターでのリンクまたはリンクブロックの追加](https://servicenow-prod.fluidtopics.net/N~M_~r6Cn866fZzOtIgfVw "リッチコンテンツエディターのキャンバスを使用して、ユーザーを別のコンテンツまたは Web ページにリダイレクトするリンクまたはリンクブロックを追加します。[リンク] ではテキストボックスを使用でき、[リンクブロック] ではリンクとして機能する画像を追加できます。")
* [リッチコンテンツエディターでのボタンの追加](https://servicenow-prod.fluidtopics.net/PLActLJTBUm7f7fs6nvvRA "アクションをトリガーしたり、ユーザーを別のコンテンツにリダイレクトしたりするボタンを追加します。")
{#ec-rich-content-canvas__ul_ab5_2kw_jyb}