キャリアサイトの構築

キャリアサイトでの初期設定の有効化

Objective

After completing this lesson, you will be able to キャリアサイトで初期設定を有効化します。

JavaScript

ヘッダおよびフッタ JavaScript 領域から、サードパーティ分析 (Google Analytics など)、チャットボット、またはサーベイ (Qualtrics など)、ランディングページ最適化などのカスタム JavaScript を入力することができます。

Java Script ボックスには他の情報を入力しないでください。その他の使用はサポートされていません。

SAP SuccessFactors では、JavaScript コードのサポートは提供されていません。顧客が問題を報告し、CSB に JavaScript コードがある場合は、JavaScript コードを削除して、問題が解消されないかどうかを確認するように求められます。

グローバル設定で JavaScript タブを選択します。

グローバルスタイル

表示スタイルからグローバルスタイルにアクセスします。

グローバルスタイルページの主要セクションは以下のとおりです。

  • グローバルスタイル

  • ヘッダ

  • フッター

ブランドおよびロケールが有効化されている場合は、一覧を展開して表示することができます。

グローバルスタイルを展開してブランドを設定し、キャリアサイト全体で色と背景画像をカスタマイズします。

システムでブランドが認識されない場合は、デフォルトブランドが表示されることに注意してください。キャリアサイトビルダーでページを構築する場合は、最初にデフォルトブランドのページを作成してから、それを他のブランドに複製し、必要な変更を行います。

グローバルスタイルタブでは、キャリアサイト全体で色と背景画像をカスタマイズすることができます。

キャリアサイト全体でカスタマイズされた色および背景画像の例。

さらに、サイトに設定された各ブランドには、カスタムの色と画像を含む独自のヘッダーまたはフッターを含めることができます。

カスタム色とイメージを使用した、カスタマイズされたヘッダまたはフッタの例。

たとえば、顧客がデフォルトブランドとサブブランドを設定している場合、それぞれのブランドの色と画像を使用して、それぞれのブランドを独自の外観にすることができます。グローバルスタイルメニューでヘッダーまたはフッターを選択し、ロケールとブランドを選択します。

グローバルスタイルメインタブでブランドの色を設定します。

メインスタイル

メインタブでは、キャリアサイトの主要領域の色を調整し、サイト全体およびメインコンテンツ領域の画像をアップロードすることができます。

カラーパレットメニューで、キャリアサイトの主要領域の色を調整します。
  • [カラーパレット] メニューを開くには、既存の色のいずれかをクリックします。パレットに新しい色を追加するには、カラーパレットメニューの上部にある追加アイコンを使用します。上部のアーカイブ済みボタンをクリックして、以前に削除された色を表示します。サイトで使用されている色は削除できないことに注意してください。

  • リーディングプラクティスは、色のラベルを入力することです。カラーピッカーグリッドを使用するか、RGB、HSV、または 16 進コード値を入力することで、新しい色を作成します。色のグラデーションを作成するには、[グラデーションの色] ボックスをオンにして、グラデーションを作成する 2 つの色を選択します。

  • 既存の色を置き換えるには、色をクリックし、編集アイコンをクリックします。色メニューでは自動保存されることに注意してください。CSB サイト全体で色を置き換える予定がない場合は、[追加]をクリックして開始します。 

  • 上部のアーカイブ済みボタンをクリックして、以前に削除された色を表示します。サイトで使用されている色は削除できないことに注意してください。

  • 下のスライドを使って、サイトの色がどれだけ不透明になるか(つまり、塗りつぶし色なのか、透けて見えるのか)を調整する。

  • グラデーションまたは透明度を使用する色に常にラベルを付けます。

  • コンテンツスタイルドロップダウンから、中央揃えまたはフルを選択します。ヘッダとフッタに対して同じオプションが表示され、一致する必要がないことに注意してください。(つまり、ヘッダとフッタがページの横方向に配置され、コンテンツがページの中央に配置されるように選択した顧客もいます)。

  • メインページを使用して、サイトおよびコンテンツページのイメージをアップロードすることができます。サイトの背景画像としてアップロードされた画像は、サイト全体の背景として機能します。コンテンツの背景画像としてアップロードされた画像は、コンテンツページの背景として機能します。

  • 各ブランドのお気に入りアイコンをアップロードすることができます。ファビコンは、ブランド識別/ロゴの小さなレンダリングであり、最も頻繁に Web サイトに適用され、ページ URL アドレスの横にあるブラウザアドレスバーに表示されます。また、候補者がページをブックマークするときにブックマークの一覧でページ名の横にも表示されます。

グローバルスタイルメインタブのお気に入りアイコンをアップロードします。

ソーシャルメディア投稿のメタイメージ

ソーシャルメディア投稿にメタイメージを使用する場合は、以下の点を考慮してください。

  • お客様は、グローバルスタイルメインページからメタ画像を追加して、ソーシャルメディア投稿でキャリアサイトに関連付けることができます。
  • Facebook、LinkedIn、Twitter などの一部のサードパーティサイトでは、キャリアサイトのリンクおよび情報を投稿する際に画像を関連付けることができます。
  • メタ画像設定では、キャリアサイト内のブランドページに同じメタ画像が含まれるように、ブランドごとに 1 つの画像を指定することができます。
メタ画像を変更または削除できます。

注記

現在、LinkedInとFacebookが回復するには約1週間かかる。
URL を Microsoft Teams にペーストした後のお気に入りアイコンの例。
URL を LinkedIn に貼り付けた後のお気に入りアイコンの例。

その他のグローバルスタイル設定

  • 検索フォームオプションと検索エクスペリエンスオプションについては、キャリアサイト検索エクスペリエンスの設定の章で説明します。

  • ヘッダタブでは、サイトヘッダの一部の要素の色をカスタマイズすることができます。

  • [行フッタ] タブと [列フッタ] タブでは、サイトフッタの一部の要素の色をカスタマイズできます。フッタのリンクは、単一行または関連リンクの列として設定することができます。両方のフッタメニュータイプを設定し、それらにスタイルを個別に適用することもできます。フッタに行メニューと列メニューの両方を設定すると、行メニューが列の上に表示されます。

ツールのヒント

以下のセクションでは、キャリアサイトビルダーツールを使用するためのいくつかのヒントについて説明します。

キャリアサイトビルダーへのアクセス

バックエンドアプリケーション Command Center にアクセスできるユーザーは、クイックリンクを使用して Career Site Builder を開きます。

顧客管理者は、SAP SuccessFactors管理センターからキャリアサイトビルダーにアクセスします。必要な役割ベースの権限については、このコースのサイト設定セクションで説明しています。

検索エンジンで、人事コーディネーターとして Manage Career Site Builder と入力します。

CSB のヘルプオプション

ヘルプテキストは、一部のページで提供されています。

? を選択します右上の [] をクリックすると、そのページに関する全体的な情報が表示されます。? を選択しますフィールドの横にある、そのフィールドの完了に関する情報。

? を選択します。項目の横にある、その項目の入力に関する情報 (ビデオ URL または ID、ビデオタイプ、レイアウトなど)。

CSB での作業に関するヒント

最初にデフォルトブランドページを作成してから、他のブランドおよびロケール用に複製します。複製機能を使用するには、コピー元のページから開始します。

CSB ツールで変更を行った後、保存を選択します。保存間の変更が多すぎないようにしてください。

右上隅のプレビューを選択して、実際のサイトがどのように表示されるかをプレビューすることができます。これにより、作業中のページが起動し、必要に応じて他のページにナビゲートしてプレビューすることができます。

元に戻すボタンはありません。

実際のサイトの外観をプレビューするには、右上隅のプレビューボタンを選択します。

さまざまなデバイスでのページの表示

さまざまなデバイス (モバイル、タブレット、またはデスクトップ) のページの外観を制御することができます。コンポーネントごとに目的のデバイスの横にあるチェックボックスを有効にします。デバイスごとに有効化されているコンポーネントを確認するには、(コンポーネント追加の横にある) 右上隅にあるデバイス名を選択します。

さまざまなデバイス (モバイル、タブレット、またはデスクトップ) のページの外観を制御するには、コンポーネントごとに目的のデバイスの横にあるチェックボックスを有効化します。

ホームページからコンポーネントを削除するには、ごみ箱アイコンを選択します。

別のページまたはメニューにナビゲートするには、ページ上部の戻る矢印を使用します。

Navigation Back Arrows。

バージョン管理とドラフト

ページを変更するときに、ドラフト保存を選択してページをドラフトとして保存することができます。これにより、ユーザまたは別のユーザがページに戻って編集することができます。

ドラフトページをプレビューできます。

更新されたページを顧客サイトに表示するには、公開を選択します。ページが公開されると、バージョンが保存されます。最大 10 バージョンを保存できます。

ドラフトバージョンを保存または公開することができます。

ページの左上にある歯車アイコンをクリックして、ページの以前のバージョンを表示することができます。次に、公開された改訂の表示を選択します。ここには、以前に公開されたページのバージョン、公開日時、およびそれらを公開したユーザーが表示されます。

編集を選択して、ページの以前のバージョンを改訂します。プレビューを選択して、顧客サイトでのページの表示方法を表示します。

これにより、以前のバージョンに戻すことができます。以前に公開されたバージョンに戻す場合は、そのバージョンを選択して編集し、必要な調整を行ってからページを公開します。

編集を選択して、ページの以前のバージョンを改訂します。ページ、メタタグ、公開された改訂の表示、または公開済みの改訂の編集を複製することができます。

バージョン管理とドラフト: 例

以下は、バージョニングおよびドラフトの使用ケースの例です。

  • Paula にはコンテンツページを編集する権限があります。

  • 彼女は CSB にアクセスし、公開されたコンテンツページの 1 つを編集します。

  • Paula は Olivia に自分の作品をレビューしてもらうため、Save Draft を選択します。

  • オリビアはCSBにアクセスし、ポーラが編集したページに移動する。

  • そのページには公開版とドラフト版があるため、デフォルトでは公開されたバージョンがオリビアに見られる。Olivia は歯車アイコンを選択し、Edit Published を選択して Paula のドラフトページを表示します。

  • 以下の図に示すメッセージがオリビアに表示され、はいを選択します。まだ変更を行っていないため、変更は上書きされません。

  • Olivia は Paula のコンテンツページを表示および公開できるようになります。または、変更を行い、ドラフトを保存または公開することができます。

公開済を編集ダイアログボックスで、はいを選択し、未公開の変更が保存されないことを確認します。

グローバル設定およびグローバルスタイルに対する変更の入力

ビジネスの例

Best Run の企業用色に更新し、カスタムフォントを追加し、サイト全体のメタデータを追加します。以下の手順を参照して、新しい色を追加します。

  1. 既存の色のボックスを選択します。
  2. カラーパレット画面の上部で、 + 追加をクリックします。
  3. 画面キャプチャで示されている場合は、ラベルを入力します。
  4. 16 進ボックスまでスクロールし、画面キャプチャに表示される新しい色の値を入力します。
  5. カラーパレット画面外を選択します。新しい色がパレットに追加されます。
  6. 再度、既存の色のボックスを選択します。
  7. 先ほど追加した色を選択します。元の色に代わるものです。
  8. 保存します。

イメージを参照して、Best Run の企業用色を設定します。上部のタブ名を参照してください。

グローバルスタイルページで、メインタブを選択します。

注記

サイトの背景の一次色の場合は、上部のグラデーションの色を選択します。サイト背景の 2 番目の色には 1A4E80 を使用します。
グローバルスタイルページで、検索フォームタブを選択します。
グローバルスタイルページで、ヘッダタブを選択します。
グローバルスタイルページで、行フッタタブを選択します。
グローバルスタイルページで、列フッタタブを選択します。

タスク 1: Best Run の企業色の更新

このビデオでは、企業の色を更新して変更を入力する方法を示します。

ステップ

  1. CSB表示スタイルグローバルスタイルデフォルトブランドに移動します。

  2. メインタブをクリックし、メインタブイメージに示されている変更を行います。

  3. そのタブの色で終了したら、保存をクリックします。

  4. [検索フォーム] タブをクリックし、表示された画像のように色を置き換えます。保存します

  5. ヘッダタブをクリックし、色を置き換えます。保存します

  6. 行フッタタブをクリックし、色を置き換えます。保存します

タスク 2: カスタムフォントのアップロード

このビデオでは、カスタムフォントをアップロードして変更を入力する方法について説明します。

ステップ

  1. コースの一部として提供されたファイルから、Hand Drawn Shapes.ttf を見つけます。

  2. ファイルを開き、インストールをクリックします。

  3. CSBAppearanceGlobalSite にナビゲートします。

  4. カスタムフォントエディタを開くをクリックします。

  5. + ボタンをクリックします。

  6. コースファイルで .ttf ファイルにナビゲートして選択します。

  7. 閉じるをクリックします。

  8. グローバル設定サイトページのフォントフィールドで、ドロップダウン矢印をクリックし、アップロードしたフォントを選択します。

  9. 保存してプレビューします。

    注記

    ページのすべてのフォントが置換されるわけではありません。フォントが個々のコンポーネントに対して上書きされている場合、グローバル設定は適用されません。この設定は、ヘッダ、フッタ、および検索コンポーネントに適用されます。
  10. サイトメニューのフォントを使用可能な任意のフォントに変更します。Arial、Helvetica、sans-serif は人気のある選択です。

  11. 保存します。

タスク 3: サイトメタデータの設定

このビデオでは、サイトメタデータの設定方法を説明します。

ステップ

  1. CSB設定サイト設定サイト情報で、以下のメタデータを入力します。

    • ページタイトル: Best Run の求人

    • メタキーワード:販売、エンジニアリング、人事、管理に関する求人

    • メタディスクリプション:Best Run の求人にオンラインで応募:エンジニアリングの求人、営業の求人、人事ジョブなど

  2. 保存します。

  3. サイト情報ページの上部付近にあるサイト URL の横にある移動リンクを使用して、サイトをプレビューします。ブラウザタブに Jobs at Best Run というラベルが表示されます。

    個々のページのメタデータは、後で置き換えられます。

サマリ

  • 表示 → スタイル (グローバルスタイル) を使用して、サイト全体のルックアンドフィール (色、背景) を設定し、ブランド/ロケール固有のヘッダおよびフッタを作成します。
  • ラベルおよびグラデーション/透明性のサポートを使用してカラーパレット (追加/編集/アーカイブ) を管理します。編集の自動保存と色の置換は、サイト全体に影響します。
  • サイト/コンテンツの背景画像、ブランドごとのファビコン、ソーシャルプラットフォーム(LinkedIn/Facebook/X など)でリンクが共有される際のブランドごとの画像などのグローバル画像を設定します。
  • 多くの場合、保存するには、プレビューおよびデバイス固有の表示コントロールを使用し、バージョニング付きのドラフト/公開 (最大 10 件) を使用して、公開された改訂をレビューまたは元に戻します。