--- 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) 所要時間：10分 スタイルコンテンツタイプを使用してバナー、ブロック/お知らせ、またはビデオを作成し、テキストの色、テキストの配置、リンク、背景色、 従業員センタープロ上の画像などの設定をカスタマイズします。 ## 始める前に 必要なロール：sn_cd.content_manager ビデオコンテンツを作成する場合、まずビデオをアップロードする必要があります ([他のコンテンツソースへのリンクの追加または変更](https://servicenow-prod.fluidtopics.net/MhmTxnHp_R_nEtDhRVzp5w "コンテンツのリンクを使用して、URL リンクまたはビデオリンクを作成します。これらのリンクは、従業員センター、キャンペーン、または Communities (Communities がインストールされている場合) で使用できます。"))。 ## このタスクについて このコンテンツタイプには、次の 3 つのオプションがあります。 * バナー：ページ上部に表示されます。 * ブロック：ページ上のウィジェットに表示されます。 * ビデオ：バナーの代わりにページの上部など、ページのどこにでも表示できます {#ec-content-library-portal-styled__ul_cvc_bx1_myb} スタイルコンテンツを使用してバナーを作成または編集する場合は、外部で画像を編集してからインポートするのではなく、背景画像を表示して編集できます。 フォームの左上にあるフォームコンテキストメニュー (![フォームコンテキストメニュー]()) を使用すると、コンテンツを作成するときにタスクをすばやく実行できます。アイコンを選択すると、次の選択肢が表示されます。 * クローン：コンテンツレコードを複製します。 * 削除：コンテンツレコードおよび関連するスケジュール設定済みコンテンツレコードを削除します。 * コンテンツレコードを表示：コンテンツレコードにアクセスして表示します。 {#ec-content-library-portal-styled__ul_efj_4ts_5sb} 注: フォームコンテキストメニューの選択をアクティブ化する前に、基礎となるコンテンツレコードを保存する必要があります。 ## 手順 1. 移動先 コンテンツ公開コンテンツライブラリ新規作成. 2. \[プラットフォームを選択\] 列で \[ポータル\] を選択します。 3. \[コンテンツ形式を選択 (Choose a content format)\] セクションで \[スタイルコンテンツ\] を選択します。 4. \[続行\] を選択します。 5. \[新規コンテンツ\] フォームのフィールドに入力します。 {#ec-content-library-portal-styled__table_nc1_ttv_frb__entry__2} | フィールド | 説明 | |-|-| | コンテンツ名 | 作成または編集するコンテンツを説明する名前。 | | 順序 | ポータルとスタイルコンテンツが \[コンテンツ\] リストに表示される順序を示す番号。 | | アクティブ | コンテンツがアクティブで使用できることを示します。 | | コンテンツスタイル | コンテンツが次のいずれであるかを識別します。 * バナー * ブロック * ビデオ {#ec-content-library-portal-styled__ul_hq1_1sh_dsb} | | コンテンツ || | ユーザー参照テーブル | ブロックコンテンツのテキストのパーソナライズに使用可能な変数を決定します。 sn_hr_core_profile テーブルから変数を選択するには \[HR プロファイル\] を選択します。 注: ヒューマンリソース (HR) スコープ対象アプリ：コア (com.sn_hr_core) プラグインをアクティブ化すると、\[HR プロファイル\] のみが表示されます。 sys_user テーブルから変数を選択するには \[ユーザー\] を選択します。 | | 見出し | コンテンツに表示するタイトル。 バナーにグラフィックのみを表示する場合は、このフィールドは必要ありません。 注: このフィールドは、\[コンテンツエクスペリエンス\] ウィジェットが使用されている場合にのみ表示されます。 | | 見出しのテキスト | 見出しに追加情報やわかりやすさを提供するテキスト。 | | 本文 | バナーに表示する詳細なメッセージです。 | | ユーザー列 | HR プロファイル \[sn_hr_core_profile\] テーブルと一緒に、条件を評価するときにユーザーをフィルターします。 このフィールドは、\[ユーザー参照テーブル\] フィールドから \[HR プロファイル\] を選択した場合にのみ表示されます。 | | テキストの色 | 本文テキストをダークで表示するかライトで表示するかを示します。 注: バナーコンテンツスタイルでは、ダークとライトの両方がサポートされています。ブロックコンテンツスタイルでは、\[背景上のテキスト\] フィールドがアクティブ (緑色) の場合、ライトのみがサポートされます。 | | テキストの配置 | テキストの表示方法を示します。左揃え、中央揃え、または右揃えを選択できます。 | | アイコン | アイコンを表示するかどうかを決定します。右にスライドしてアイコンを選択します。 \[コンテンツスタイル\] から \[ブロック\] を選択した場合にのみ表示されます。 | | アイコンを選択 | 表示するアイコンを選択します。 このフィールドは、\[アイコン\] フィールドを緑色にした場合にのみ表示されます。 | | アイコンサイズ | アイコンのサイズを示します。 このフィールドは、\[アイコン\] フィールドを緑色にした場合にのみ表示されます。 アイコンの推奨サイズは次のとおりです。 * トピックアイコン：56 x 56 px * サブトピックアイコン：28 x 28 px {#ec-content-library-portal-styled__ul_pqy_y24_hsb} | | アクションへのコール | ボタンまたはリンクを表示する場合に選択します。 | | ボタンのタイトル | ボタンの上に表示されるテキスト。 このフィールドは \[ボタン\] を選択した場合にのみ表示されます。 | | ボタンのリンク | ボタンを選択したときのユーザーの移動先リンク。 下向き矢印を選択して、リンクのリストを表示します。 このフィールドは、\[アイコン\] フィールドを緑色にした場合にのみ表示されます。 | | リンクのタイトル | リンクに表示されるテキスト。 このフィールドは \[リンク\] を選択した場合にのみ表示されます。 | | リンク | リンクを選択したときのユーザーの移動先リンク。 下向き矢印を選択して、リンクのリストを表示します。 このフィールドは \[リンク\] を選択した場合にのみ表示されます。 | | ビデオリンク | ポータルに表示するビデオへのリンク。 このフィールドは \[コンテンツスタイル\] で \[ビデオ\] を選択した場合にのみ表示されます。 注: 現時点では、YouTube と Vimeo のビデオのみがサポートされています。埋め込みビデオリンクを使用してください。 | | 背景 (BACKGROUND) || | 背景色 | バナーまたはブロックテキストの背景色です。色を定義するために、次を使用できます。 * 16 進数のカラーコード 注: 16 進数カラーコードのリストについては、[16 進数のカラーコード](https://www.color-hex.com/)を参照してください。 * CSS カラー値であり、色のキーワード、名前、RGB 10 進数、または RGB 16 進数が含まれます。 注: 詳細については、「[HTML カラー名 (W3CSchools)](https://www.w3schools.com/tags/ref_colornames.asp)」を参照してください。 {#ec-content-library-portal-styled__ul_wpc_nwl_lrb} | | 背景画像 | 画像を背景として表示することを示します。右にスライドすると、追加の画像フィールドが表示されます。 | | 画像ファイル \[画像をアップロード\] | 画像を追加するリンクを選択します。 このフィールドは、\[背景画像\] をアクティブ化した場合にのみ表示されます。 バナーの推奨サイズは次のとおりです。 * ホームページバナー：1440 x 400 px * トピックページ：1258 x 300 px {#ec-content-library-portal-styled__ul_jsg_3f4_hsb} | | ![画像を編集ボタン]() | コンテンツライブラリモジュール内で背景画像を編集できます。 このフィールドは、背景画像のアップロード後にのみ表示されます。\[画像エディターモード\] フォームで画像に切り取りボックスが表示されます。 切り取りボックスは、枠線を内側や外側にドラッグして画像のどの部分を表示するかを指定して使います。 画像エディターを開くと、デフォルトのモードは \[切り取り (crop)\] になります。 .svg ファイルをアップロードして編集すると、.png ファイルとして保存されます。 注: .gif ファイルはサポートされていません。 画像の編集に役立つ次のアイコンとボタンが表示されます。 ![画像編集アイコン]() 各アイコンを使用して、インポートした画像を編集できます。 * 元の状態にリセット ![元の状態にリセットアイコン]() * 画像の編集後にアクティブ化されます。 * 選択すると、\[元の状態にリセットしますか？\] ポップアップが表示されます。\[画像をリセット\] ボタンを選択して、画像に加えた編集を取り消します。 注: \[保存\] を選択すると、画像をリセットできなくなります。編集内容に満足できない場合は、画像を再度アップロードする必要があります。 * 編集内容を保持しない場合は、\[キャンセル\] を選択します。 {#ec-content-library-portal-styled__ul_f4j_tfv_tsb} * 画像移動モード ![画像移動モードアイコン]() * 切り取りボックスの外側の任意の場所で画像を選択し、マウスで画像を移動します。 * ポイントを使用して画像のサイズを変更します。 * マウスボタンを長押しして切り取りボックスを移動します。 {#ec-content-library-portal-styled__ul_jmj_mhv_tsb} * 画像切り取りモード ![画像切り取りモードアイコン]() * 選択すると、カーソルが切り取りに設定されます。 * マウスボタンを押したままドラッグして、新しい切り取りボックスを作成します。 * マウスボタンを長押しして切り取りボックスを移動します。 * ポイントを使用して切り取りボックスのサイズを変更します。 {#ec-content-library-portal-styled__ul_o2y_gmq_5sb} * ズームイン ![ズームインアイコン]() * クリックすると、画像が大きくなり、近くなります。 * さらにクリックすると、画像が段階的に拡大されます。 {#ec-content-library-portal-styled__ul_aq5_pfs_5sb} * ズームアウト ![ズームアウトアイコン]() * クリックすると、画像が小さくなり、遠くになります。 * さらにクリックすると、画像が段階的に縮小されます。 {#ec-content-library-portal-styled__ul_fdw_zfs_5sb} * 10 ピクセル左に移動 ![移動アイコン]() * クリックすると、画像が左に 10 ピクセル移動します。 * さらにクリックすると、画像が 10 ピクセル単位で左に移動します。 {#ec-content-library-portal-styled__ul_uqm_cgs_5sb} * 10 ピクセル右に移動 ![移動アイコン]() * クリックすると、画像が右に 10 ピクセル移動します。 * さらにクリックすると、画像が 10 ピクセル単位で右に移動します。 {#ec-content-library-portal-styled__ul_a5m_ggs_5sb} * 10 ピクセル上に移動 ![上に移動アイコン]() * クリックすると、画像が上に 10 ピクセル移動します。 * さらにクリックすると、画像が 10 ピクセル単位で上に移動します。 {#ec-content-library-portal-styled__ul_obd_3gs_5sb} * 10 ピクセル下に移動 ![下に移動アイコン]() * クリックすると、画像が下に 10 ピクセル移動します。 * さらにクリックすると、画像が 10 ピクセル単位で下に移動します。 {#ec-content-library-portal-styled__ul_rfp_jgs_5sb} * 左に 45 度回転 ![回転アイコン]() * クリックすると、画像が反時計回りに 45 度回転します。 * さらにクリックすると、画像が 45 度ずつ反時計回りに回転します。 {#ec-content-library-portal-styled__ul_kml_2hs_5sb} * 右に 45 度回転 ![回転アイコン]() * クリックすると、画像が時計回りに 45 度回転します。 * さらにクリックすると、画像が 45 度ずつ時計回りに回転します。 {#ec-content-library-portal-styled__ul_hnv_pjs_5sb} * 切り取り：短い長方形 ![切り取り：短い長方形アイコン]() * クリックすると、切り取りツールが短い長方形に変わります。 * 長方形の四角い点を使用して、さらに画像を切り取ることができます。 {#ec-content-library-portal-styled__ul_p3p_g1r_wsb} * 切り取り：長い長方形 ![切り取り：長い長方形アイコン]() * クリックすると、切り取りツールが長い長方形に変わります。 * 長方形の四角い点を使用して、さらに画像を切り取ることができます。 {#ec-content-library-portal-styled__ul_qnm_gbr_wsb} * 切り取り：正方形 ![切り取り：正方形アイコン]() * クリックすると、切り取りツールが正方形に変わります。 * 正方形の四角い点を使用して、さらに画像を切り取ることができます。 {#ec-content-library-portal-styled__ul_lk3_zbr_wsb} * カスタム ![カスタムの切り取りと回転]() * クリックすると、\[詳細編集\] ポップアップが表示されます。 * 切り取りツールのサイズと画像のサイズをピクセル単位で定義できます。 * 画像を回転させる角度を指定することもできます。 {#ec-content-library-portal-styled__ul_eht_fcr_wsb} * プレビュー ![プレビューアイコン]() * 選択すると、編集した画像のプレビューが表示されます。 * コンテンツを公開するときと同様の場所情報を入力します。これによって、表示したい場所に画像を表示できます。フィールドの詳細については、「[コンテンツの公開計画の作成](https://servicenow-prod.fluidtopics.net/yFA2aZ9PlQ9R_dxMxfMAWw "コンテンツライブラリにコンテンツを作成した後、1 つ以上の公開計画を追加して、コンテンツの配信先、対象者、およびコンテンツを利用できる期間を管理します。")」を参照してください。 {#ec-content-library-portal-styled__ul_vkf_rjs_5sb} * キャンセルと保存 ![キャンセルと保存ボタン]() * 変更を保存せずに画像の編集を終了するには、\[キャンセル\] を選択します。 * 画像に加えた編集を保存するには、\[保存\] を選択します。\[切り取って続行\] を選択すると、編集を続けることができます。 注: \[保存して続行\] を選択すると、編集が保存され、編集を取り消すことはできません。 {#ec-content-library-portal-styled__ul_ug2_tms_5sb} {#ec-content-library-portal-styled__ul_agn_31g_tsb} | | 画像サイズ | 画像をどのように表示するかを指定します。 * 塗りつぶし幅：コンテナ全体が収まるように画像のサイズを変更します。この場合、画像は拡大されたり端が切れたりすることがあります。 * 幅に合わせる：全体が表示されるように画像のサイズを変更します。 * 元のサイズ：画像の元のサイズを使用します。 {#ec-content-library-portal-styled__ul_uvq_ntw_frb} このフィールドは、\[背景画像\] をアクティブ化した場合にのみ表示されます。 | | イメージ位置 | 画像を表示する位置です。画像の位置を定義するボックスを選択します。 このフィールドは、\[背景画像\] をアクティブ化した場合にのみ表示されます。 | | 背景上のテキスト | テキストを背景画像の上に表示することを示します。オフのままにした場合、テキストは画像の下に表示されます。 右にスライドして、背景のグラデーションを選択します。 | | グラデーションを追加 | テキストを読みやすくするためにテキストに色のグラデーションを含めることを示します。 \[背景上のテキスト (Text over background)\] フィールドをアクティブ化した場合にのみ表示されます。 | [表 : 1. デザイン] {#ec-content-library-portal-styled__table_nc1_ttv_frb} 6. \[保存\] を選択してレコードを保存し、\[デザイン\] タブにとどまります。 7. または \[保存して続行\] を選択してレコードを保存し、\[公開\] タブに移動します。 ## 次のタスク * (オプション) コンテンツを翻訳します。コンテンツの言語翻訳を要求します。詳細については、「[コンテンツライブラリでの多言語サポート](https://servicenow-prod.fluidtopics.net/XA2wXwXaDN~pGZBSdyMXIg "コンテンツライブラリには、コンテンツの翻訳 (コンテンツ翻訳ワークフロー) と言語の切り替え (インターフェイス言語の変更) という、多言語コンテンツを作成するための 2 つの機能が含まれています。")」を参照してください。{#ec-content-library-portal-styled__p_vtc_nfg_h1c} 注: コンテンツの変更が完了した後にのみ、コンテンツを翻訳してください。最良の結果を得るために、翻訳後にコンポーネントを追加または削除したり、書式設定を変更したりすることはお勧めしません。 異なる言語で異なる書式設定のリッチコンテンツを作成するには、コンテンツを複製し、必要に応じて書式設定を変更します。次に、\[対象者\] を使用して、言語別にコンテンツの対象をユーザーに絞ります。「[対象者](https://servicenow-prod.fluidtopics.net/FI0nO0lVvmlMk2Gsl2K7IQ "対象者レコードを使用して、ポータルコンテンツおよびライフサイクルイベントアクティビティの対象者を特定の対象者に設定します。")」を参照してください。 * \[公開 (Publish)\] タブからコンテンツをプレビューします。 注: コンテンツのプレビューは、コンテンツの表示に関する一般的なアイデアを提供するように設計されています。コンテンツの公開後は、デバイスの解像度、テーマの違い、モバイルアプリのスタイル構成の違いにより、見た目が異なる場合があります。 * 公開計画を構成して、コンテンツの配信先、対象者、利用可能期間を管理します：[コンテンツの公開計画の作成](https://servicenow-prod.fluidtopics.net/yFA2aZ9PlQ9R_dxMxfMAWw "コンテンツライブラリにコンテンツを作成した後、1 つ以上の公開計画を追加して、コンテンツの配信先、対象者、およびコンテンツを利用できる期間を管理します。") {#ec-content-library-portal-styled__ul_ogf_pv5_nyb}