リッチコンテンツエディターでのコピーと貼り付け

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間：4分

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

    要素の CSS を直接編集 してスタイリングを追加するか、コードをコピーして貼り付け、他のソースからコンテンツを移行します。

    重要:
    2025 年 5 月のリリースでは、貼り付けられたコンテンツに background-color がある場合、 background-image スタイリングで書式設定されていない限り、右側のパネルに色は表示されません。背景は、コンテンツに 背景色、 グラデーション、 および画像 を追加するレイヤーとして機能します。右側のパネルに色を表示する場合は、コード編集機能を使用して、貼り付けたスタイルを background-color から background-image CSS の対応する値に調整できます。
    ヒント:
    色の不透明度機能は新機能であり、以前のリリースではサポートされていません。

    制限事項

    • ブラウザーの機能の違いにより、ブラウザーで異なるコピー/貼り付け動作が表示される場合があります。

    • キャンバス上のコンポーネントのコピーは、ctrl+v では期待どおりに複製されないため、 コンポーネントツールバーにアクセスする必要があります。

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

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

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

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

    特定のスタイル (フォント名など) が適用されない場合、または貼り付けたコンテンツの設定を調整しても機能しない場合は、まず [フォント名] の横にある [x] を選択してスタイルをクリアしてみてください。

    図 : 2. フォント名
    フォント設定を調整できます
    • 貼り付けたコンテンツが期待どおりに表示されない場合や、正しく動作しない場合は、大きなセクションではなく小さなチャンクを一度にコピーしてみてください。
    • • 保存して再ロードする前と後で貼り付けたコンテンツの表示が異なる場合は、HTML サニタイザーによって一部のスクリプトタグが削除されたことが原因である可能性があります。

    選択が解除された領域

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

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

    図 : 3. リッチコンテンツエディターキャンバス
    選択した色の背景色に基づいてアクションを決定できます
    注:
    ハイライト表示されたテキストの切り取りと貼り付けは、テキストコンポーネント内ではサポートされておらず、ブラウザー間でエクスペリエンスの動作が異なる場合があります。Chrome で機能する動作が、Firefox や Safari では機能しない場合があります。

    追加のリッチコンテンツアクションと動作

    注:
    コンテンツマネージャーとアドミニストレーターには、画像を含む選択したキャンバス要素に背景色を適用するオプションがあります。利用可能な機能には、単色とグラデーション色の使用、および色の不透明度の調整が含まれます。これらの設定には、キャンバス要素にリッチコンテンツを追加するときに、[設定] [スタイリング] タブの右側のパネルからアクセスできます。
    キャンバスに色の不透明度を追加する機能は、利用できる便利な機能です。唯一の制限は、色が RGB または 16 進数ではなく rgba() でフォーマットされている場合、コピー&ペースト機能のスタイルが異なることです。
    • 色を 16 進コード形式で追加します (不透明度を追加する #rrggbbaa または単に #rrggbb)。
    • コードの編集モーダルを開き、コンポーネントの rgba() カラーを 16 進数コードに調整して、スタイリングを反映します。
    • 「色の不透明度」には、グラデーションとカラーのレイヤーオプションが表示されます。背景画像レイヤーが最初であるため、不透明度は関係ありません。グラデーションはデフォルトでFFFFFFとOOOOOOです。

    • キャンバス要素の背景色は、グラデーション、色、および画像の背景オプションを表示します。オンに切り替えてから、背景オプションを選択します。

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

    ソースコードの編集の詳細については、次を参照してください。 リッチコンテンツエディターでのソースコードの編集