---
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年04月25日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：4分

キャンバス内の要素の HTML と CSS のソースコードをコピーして貼り付けます。

要素の [CSS](https://servicenow-prod.fluidtopics.net/ZQ3yB3hduJ8Yg_z3O3bQMg "キャンバス内のすべての要素または特定の要素の HTML および CSS ソースコードを変更します。") を直接編集してスタイリングを追加するか、コードをコピーして貼り付けて他のソースからコンテンツを移行します。  
重要:  
2025 年 5 月のリリースでは、貼り付けたコンテンツに 背景色がある場合、 背景画像スタイルでフォーマットされていない限り、右側のパネルにその色は表示されません。背景は、 コンテンツに背景色、 グラデーション、 画像 を追加するためのレイヤーとして機能します。右側のパネルに色を表示したい場合は、コード編集機能を使用して、貼り付けたスタイルを background-color から background-image CSS の対応する値に調整できます。  
ヒント:  
色の不透明度機能は新機能であり、以前のどのリリースでもサポートされていません。

## 制限事項 {#rce-copy-paste-source-code__section_ts5_4lp_52c}

* ブラウザーの機能の違いにより、ブラウザーで異なるコピー/貼り付けの動作が表示される場合があります。
* キャンバス上のコンポーネントのコピーは、ctrl+v では想定どおりに複製されないため、 コンポーネントツールバーにアクセスする必要があります。

{#rce-copy-paste-source-code__ul_c1g_rlp_52c} 図 : 1. コンポーネントツールバー ![コンポーネントツールバーから追加の選択肢を提供します]()  
注:  
キャンバスに色の不透明度を追加することもできます。ただし、制限の 1 つは、色が rgb または hex ではなく rgba() でフォーマットされている場合、コピー/ペーストですべてのスタイルが転送されないことです。

* ハイライト表示されたテキストの貼り付けはテキストコンポーネント内ではサポートされていないため、Chrome で機能する動作が Firefox や Safari では機能しない場合があります。

* 貼り付けたコンテンツの色を 16 進数コード 形式で追加することをお勧めします (#rrggbbaa して不透明度を追加するか、 #rrggbb を使用できます)。

  * ハッシュタグ (#) は必須です。
  * 16 進数コードはポンド記号またはハッシュタグ (#) で始まり、色の不透明度がない場合は 6 文字、色の不透明度がある場合は 8 文字が続きます。
  * 8 文字の構文は、コード編集機能を使用して要素 CSS に追加された場合にのみ機能します。右側のパネルの色入力フィールドでは、6 文字の構文のみを使用できます。
  {#rce-copy-paste-source-code__ul_gmh_rjn_bfc}
* コードの編集モーダルを開いて、コンポーネントの rgba() 色を 16 進コードに調整して、スタイリングを反映することもできます。

{#rce-copy-paste-source-code__ul_cjv_2yg_bfc}

特定のスタイルが適用されない場合 (フォント名など)、または貼り付けたコンテンツの設定の調整が機能しない場合は、まず \[フォント名\] の横にある \[x\] を選択してスタイルをクリアしてみてください。
図 : 2. フォント名 ![フォント設定を調整できます]()
* 貼り付けたコンテンツが期待どおりに表示されない場合や、正しく動作しない場合は、一度に大きなセクションではなく、小さなチャンクをコピーしてみてください。
* • 保存と再ロードの前後で貼り付けたコンテンツの表示が異なる場合は、HTML サニタイザーによって削除されたスクリプトタグが原因である可能性があります。
{#rce-copy-paste-source-code__ul_zbz_rkn_bfc}

## 選択が解除された領域 {#rce-copy-paste-source-code__section_b3g_m4p_52c}

* ピンクの領域を選択すると、キャンバス上で選択されているコンポーネントの選択が解除されます。

* 緑色の領域を選択すると、現在のコンポーネントが選択されたままになります。

{#rce-copy-paste-source-code__ul_hrv_s4p_52c} 図 : 3. リッチコンテンツエディターキャンバス  
注:  
ハイライト表示されたテキストの切り取りと貼り付けは、テキストコンポーネント内ではサポートされておらず、ブラウザー間でのエクスペリエンスの動作が異なる場合があります。Chrome で動作する動作が、Firefox や Safari では動作しない場合があります。

## 追加のリッチコンテンツのアクションと動作 {#rce-copy-paste-source-code__section_sdx_ywt_52c}

キャンバスに色の不透明度を追加する機能は、利用できる便利な機能です。唯一の制限は、色が rgb または hex ではなく rgba() でフォーマットされている場合、コピーアンドペースト関数のスタイリングが異なることです。

* 16 進数コード形式で色を追加します (`#rrggbbaa` して不透明度を追加するか、単に `#rrggbb` します)。
* コードの編集モーダルを開き、コンポーネントの rgba() 色を 16 進コードに調整して、スタイリングを反映します。
{#rce-copy-paste-source-code__ul_hld_hsd_w2c}  
注:  
コンポーネントが選択されていない場合、コンテンツはキャンバスの最後に貼り付けられます。

* コンポーネントを選択すると、その下にコンテンツが貼り付けられます。
* コンポーネントが編集中の場合は、次の貼り付け動作が発生します。
  * ソースがプレーンテキストの場合、コンテンツは現在のコンポーネントに貼り付けられ、貼り付けたテキストが宛先のスタイルと一致します。
  * ソースがフォーマットされている場合は、最新のコンポーネントの下に追加されます。
  * コンポーネントでネストされたコンポーネント (タブ、メニュー、行など) が有効になっている場合、コンテンツは親コンテナ内に追加されます。
  {#rce-copy-paste-source-code__ul_gmh_3xt_52c}
* キャンバスの外でコンポーネントが選択されているときに選択が解除されている場合は、ソースの書式設定で貼り付けることができます。
{#rce-copy-paste-source-code__ul_w1h_bxt_52c}

ソースコードの編集の詳細については、 [リッチコンテンツエディターでのソースコードの編集](https://servicenow-prod.fluidtopics.net/ZQ3yB3hduJ8Yg_z3O3bQMg "キャンバス内のすべての要素または特定の要素の HTML および CSS ソースコードを変更します。")