リッチコンテンツエディターでのソースコードの編集

キャンバス内のすべての要素または特定の要素の HTML および CSS ソースコードを変更します。

HTML 要素を使用してレイアウトを作成し、要素の CSS を直接編集して、キャンバスインターフェイスでは利用できないスタイルを追加するか、他のソースからコードをコピーして貼り付けてコンテンツを移行します。

機能

ポータルのセキュリティの確保

[コードの編集] ウィンドウで [適用] をクリックすると、コードエディターによってインスタンスの侵害に使用される可能性のある HTML タグが削除されます。詳細については、「HTML sanitizer」を参照してください。

重要なコードの特定

編集ウィンドウでは、削除すべきでない CSS フラグメントが赤でハイライト表示されます。これは、ポータルテーマの一部である設定、または複数の要素がそのコードを使用していることを示します。

さらに、次の HTML 要素のいずれかによって参照される CSS ルールを削除すると、コードエディターによって CSS ルールが復元されます。

• 行
• セル
• キャンバス
• 仕切り
• ボタン
• リンクブロック
• タブ

不要なコードの削除

変更を保存すると、コードエディターによって未使用の CSS ルールが削除されます。

逆に、削除しようとしている CSS ルールをコードエディターが復元する場合は、その CSS コードのブロックをハイライト表示し、[CSS を削除 (Remove CSS)] ボタンをクリックしてコードエディターを上書きします。

図 : 1. [CSS を削除 (Remove CSS)] ボタンの使用例

次のビデオでは、ユーザーが Delete キーを使用して CSS ルールを削除しようとしますが、システムはコードを復元します。次に、ユーザーがコードをハイライト表示して、[CSS を削除 (Remove CSS)] をクリックすると、コードが正常に削除されます。

注:

この機能はデフォルトで使用できません。アドミニストレーターは、[コードを編集] プロパティを有効にする必要があります。「コンテンツ公開とともにインストールされるプロパティ」を参照してください。

重要な考慮事項

• カスタム HTML と CSS を追加すると、デザインが壊れる可能性があります。この機能を使用する場合は、注意して実行してください。リッチコンテンツエディターはコードエディターでの変更を追跡しないため、[元に戻す] ボタンでコードの変更を確実に元に戻すことはできません。
• HTML 要素 (div や p など) を使用して CSS ルールを定義することは、意図しない結果が生じる可能性があるため、お勧めしません。

  図 : 2. HTML 要素を使用して CSS ルールを定義する場合の予期しない結果の例

  次の例で、ユーザーはセル内の p 要素の CSS ルールを定義します。ただし、ページプレビューではスタイルルールが、フッターだけでなく、すべてのテキストボックスの p 要素に適用されます。

  

• ブラウザが異なれば、コピー/貼り付けの動作も異なる場合があります。Ctrl + V を押してもコンテンツが期待どおりに複製されない場合は、コンポーネントツールバーの複製アイコンをクリックします。
• コピーして貼り付けしたコンテンツのスタイル (フォントなど) が保持されず、設定を調整しても問題が解決しない場合は、[スタイリング (Styling)] フィールドの横にある [x] をクリックしてスタイルをクリアし、スタイルを設定します。
• 貼り付けたコンテンツが保存したものとは異なって表示される場合は、HTML サニタイザーによって一部のスクリプトタグが削除されたことが原因である可能性があります。