リッチコンテンツエディターでの画像の追加

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間:4分
  • リッチコンテンツエディターのキャンバスを使用して、コンテンツに画像を追加します。

    始める前に

    必要なロール:sn_cd.content_manager

    [新規コンテンツ] フォームのフィールドに入力します。「リッチコンテンツの作成」を参照してください。

    モジュールまたは列を使用してページレイアウトを作成します。

    このタスクについて

    リッチコンテンツエディターは以下の画像タイプをサポートしています。
    • .jpg
    • .png
    • .bmp
    • .gif
    • .jpeg
    • .ico
    • .svg
      注:
      コンテンツマネージャーとアドミニストレーターには、画像を含む選択したキャンバス要素に背景色を適用するオプションがあります。利用可能な機能には、単色とグラデーション色の使用、および色の不透明度の調整が含まれます。これらの設定には、キャンバス要素にリッチコンテンツを追加するときに、[設定] [スタイリング] タブの右側のパネルからアクセスできます。

    手順

    1. [新しいコンテンツ] フォームの [デザイン] タブから [エディターを開く] ボタンを選択して、キャンバスに移動します。
    2. [ブロック] 列から、ドラッグアンドドロップ方式で画像コンポーネントをキャンバスに移動します。
    3. ファイルピッカーのポップアップをクリックし、画像を選択します。
      または、以前に画像を選択していた場合は、 [画像を選択] ポップアップの右側で使用可能な画像から画像を選択します。リッチコンテンツエディター - 画像ポップアップ
    4. [設定] タブに移動します。
    5. 次の設定を構成します。
      注:
      画像、ビデオ、またはテキストを追加する場合、リッチコンテンツとニュース記事の作成に役立つ機能的で便利なスタイリング機能がいくつかあります。右側のパネルのオプションには、さまざまな背景、不透明度、影を有効にする機能、改善されたセルとボタン、追加の境界線設定、色と種類、追加のテキスト スタイル、色、フォント、およびリッチ コンテンツの作成時に使用可能なオプションを提供する右側のパネル プロパティ設定の改善が含まれます。
      表 : 1. 設定オプション
      設定フィールド 説明
      スタイリング
      表示 画像コンポーネントやテキストコンポーネントなど、同じ列内の複数のコンポーネントの外観を構成します。次のオプションのいずれかを選択します。
      • 上と下 (デフォルト):画像は他のコンポーネントの上に表示されます。
      • 並べて表示:画像と別のコンポーネントが並べて表示されます。
      注:
      最良の結果を得るには、コンポーネントに同じ表示を設定します。たとえば、列に画像とテキストのコンポーネントがあり、画像を左側に表示し、テキストを右側に表示する場合は、両方のコンポーネントの [表示] 設定を [並べて表示] に変更します。
      水平配置 コンテナ内で画像が表示される場所を構成します。右、中央、左のアイコンから選択します。
      詳細なスタイリング

      コンテナに画像を挿入すると、デフォルトでは画像はコンテナの全幅になり、高さは画像の寸法に基づいて自動的に調整されます。

      幅と高さ 数値を入力するか、画像の側面をドラッグして、値を指定します。
      測定単位を選択します。
      • px:ピクセル
      • %:パーセンテージ
      パディング パディングは、コンテンツと要素境界との間のスペースです。数値を入力して、上、下、右、または左のパディングの値を指定します。
      マージン マージンは、行と別の要素/キャンバス境界の間のスペースです。数値を入力して、上、下、右、または左のパディングの値を指定します。
      背景色 キャンバス要素の背景色は、グラデーション、色、および画像の背景オプションを表示します。オンに切り替えてから、背景オプションを選択します。
      注:
      「色の不透明度」には、グラデーションとカラーのレイヤーオプションが表示されます。背景画像レイヤーが最初であるため、不透明度は関係ありません。グラデーションはデフォルトで FFFFFFOOOOOO です。
      プロパティ
      代替テキスト アクセシビリティを向上させるために画像の外観または機能を説明します。
    6. [保存] または、[保存して終了] を選択します。
      [保存] を選択するとコンテンツが保存され、リッチコンテンツエディターのキャンバスに留まります。[保存して終了] を選択すると、レコードが保存され、[新規コンテンツ] フォームに戻ります。

    次のタスク

    • (オプション) コンテンツを翻訳します。

      コンテンツの言語翻訳を要求します。詳細については、「コンテンツライブラリでの多言語サポート」を参照してください。

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

      異なる言語で異なる書式設定のリッチコンテンツを作成するには、コンテンツを複製し、必要に応じて書式設定を変更します。次に、[対象者] を使用して、言語別にコンテンツの対象をユーザーに絞ります。「対象者」を参照してください。

    • [ 公開] タブからコンテンツをプレビューします。
      注:
      コンテンツのプレビューは、コンテンツの表示に関する一般的なアイデアを提供するように設計されています。コンテンツの公開後は、デバイスの解像度、テーマの違い、モバイルアプリのスタイル構成の違いにより、見た目が異なる場合があります。
    • 公開計画を構成して、コンテンツの配信先、対象者、利用可能期間を管理します:コンテンツの公開計画の作成