キャリアサイトの構築

ヘッダの登録

Objective

After completing this lesson, you will be able to ヘッダを登録します。

ヘッダ

表示スタイルヘッダーから、言語およびブランドごとに設定します。詳細ページでは、複数のオプションが設定されています。

デスクトップデバイスでヘッダを常に表示するかどうかを選択し、ロゴが表示される場所を選択して、ヘッダをサイトの全幅に拡張するか、中央揃えにするかを決定します。

ヘッダスタイルから、カスタムヘッダの設定を選択できます。詳細については、このセクションの後半で説明します。

カスタムヘッダが選択されていない場合は、ウィジェットおよびローカルセレクタで符号も有効化します。

カスタムヘッダが選択されていない場合は、詳細ページで、ウィジェットおよびローカルセレクタオプションで符号を有効化します。
言語ドロップダウンリストに Deutsch (Deutschland)、英語 (米国)、および Espanol (Espana) オプションが表示されている Web ページの例。

ヘッダロゴ

ロゴページから、ヘッダのロゴをアップロードします。

候補者がロゴをクリックすると、キャリアサイトのホームページに戻ります。クリック URL (href) 項目では、相対リンク (/) を使用して "ホーム" を表すことをお奨めします。

ロゴタグで、ヘッダのロゴをアップロードし、タイトルおよび代替テキストを入力します。

ヘッダメニュー

メニューページから、ヘッダのリンクを構築します。

メニュータブで、ドラッグ & ドロップ機能を使用してヘッダのリンクを構築します。

ヒント

リンクを並べ替えるには、ドラッグ & ドロップします。

ヘッダリンク

ヘッダリンクを追加するには、追加を選択し、追加するリンクのタイプを選択します。

  • カテゴリリンク - 既存のカテゴリページへのリンク。

  • コンテンツ - 既存のカテゴリページへのリンク。

  • Cookie Consent Manager - Cookie Consent Manager を開きます。

  • 外部 - 外部サイトまたはキャリアサイトのその他のページへのリンク。

  • ホームページ - 既存のホームページへのリンク。ブランドが有効化されている場合、ホームページリンクにより、ユーザーはそのブランドのホームページに移動します。

  • 一覧 - ドロップダウンリンクが表示されます。

  • TC Join – 購読ページへのリンク(人材コミュニティに参加)。

  • トップジョブ - フッタでのみ使用されます。トップ求人ページには、キャリアサイトにユーザーを誘導した上位求人検索に対応するシステム生成ページが含まれています。

  • すべてのジョブを表示 - 追加設定なしの設定はフッタでのみ使用されます。

[リンクの設定] ダイアログボックスで、ドロップダウンリストからリンクのタイプを選択します。

外部リンクタイプ

外部タイプを使用して、外部サイトまたは Career Site Builder サイトの他のページにリンクします。

外部サイトにリンクする場合は、常に新規セッションではを選択します。これにより、ページが新しいウィンドウで開きます。

CSB キャリアサイトの別のページにリンクするには、新規セッションに対していいえを選択します。詳細については、すべてのジョブを表示を参照してください。

リンク設定ダイアログボックスで、新規セッショントグルをオンにして、新しいタブでジョブヘッダを表示できるようにします。
Link Setup ダイアログボックスで New Session トグルをオフにして、All Jobs Header Links not Open in a New Tab を表示します。

相対リンク

キャリアサイトの別のページにリンクする場合は、可能な限り相対リンクを使用して、サイトをステージから本稼動に移動する際に URL を置き換える必要がないようにします。

相対リンクの例として、以下が挙げられます。

  • / = ホームページ: 異なるブランドページに配置する場合に、ヘッダー、フッター、およびロゴによく使用されます。

    • /Red/ = レッドブランドのホームページ

  • /search/ = すべてのジョブを表示: ヘッダ、注目ジョブコンポーネントで使用

    • /Red/search/ = レッドブランドのみのすべてのジョブを表示

Link Setup ダイアログボックスで、相対リンク (/ または /Red/) を指定します。

上の図の最初の画面キャプチャは、デフォルトのブランドホームページへのヘッダリンクを作成する方法を示しています。2 番目の画面には、赤色のホームページにリンクする方法が表示されます。

ロケールは固定されているため、相対リンクの使用時にロケールを呼び出す必要がないことに注意してください。

リストリンクタイプ

リストリンクタイプを選択すると、ドロップダウンリストがヘッダに表示されます。任意のタイプリンクを選択して、この一覧の下に追加することができます。

たとえば、リストタイプを使用して "キャリアの機会" をヘッダーリンクとして追加し、 + 追加を選択して、カテゴリタイプリンクを選択します。すべてのカテゴリページが表示され、ドロップダウンリストに追加することができます。

もう 1 つの例として、Why Work Here リストリンクがあります。+ 追加を選択してコンテンツタイプを選択すると、選択対象の一覧に既存のすべてのコンテンツページが表示されます。

Best Run Web サイトのヘッダリンクと、それらが作成されたリンク設定ページの例。

すべての求人のリンクタイプの表示

すべてのジョブを表示リンクタイプは、フッタでのみ使用されることに注意してください。ヘッダまたはホームページですべての求人 (テキストコンポーネントまたはおすすめの求人コンポーネントのすべての求人を表示ボタンなど) を表示するためのリンクを追加するには、すべての求人を表示オプションではなく、外部リンクを使用します。新しいセッションでは開かず、相対リンク /search/ を使用します。

Web サイトでの [すべての求人の表示] リンクと、それが設定された [リンクの設定] ページの例。

ランディングページリンク

ほとんどのお客様は、サイト内からキャリアサイトのランディングページにリンクしていません。このため、ランディングページのリンクタイプは提供されないため、相対リンクを使用することはできません。外部リンクタイプを使用し、ランディングページ URL に直接リンクします。

ソース項目で指定されたランディングページへのリンク。

注記

サイトを本稼動に移動する場合は、ステージ環境からの非相対リンク (ランディングページへのリンクなど) をマニュアルで置き換える必要があります。

カスタムヘッダ

ユーザは、詳細ページからヘッダスタイル: カスタムを選択して、ヘッダの追加カスタマイゼーションオプションを選択することができます。ブランドおよびロケール、デスクトップ、およびモバイルデバイスごとに異なるヘッダレイアウトを設定することができます。お客様は、キャリアサイトにカスタムヘッダースタイルとデフォルトヘッダースタイルを組み合わせることができます。

ヘッダの追加カスタマイズオプションを選択するには、詳細ページからヘッダスタイル - カスタムを選択します。

この例では、顧客がロゴを左上に右のメニューオプションとともに表示するよう要求しました。その下には、ページの全幅に線が追加された。行の下に、ページ中央にテキストボックスが追加され、右側に [サインイン] および [言語] コンポーネントが追加されました。

Best Run 会社のカスタムヘッダーの例。

このカスタムヘッダを作成するために、3 行が追加されました。各行には、最大 4 つの構成品目を保持できます。この例では、ヘッダメニューが 3 つのスロットを埋めるように拡張され、ラインは 4 つのスロットすべてにまたがり、テキストコンポーネントは中央の 2 つのスロットにまたがっています。一度作成すると、現在は行および構成品目を移動できないため、設定を開始する前にヘッダを慎重に計画してください。

図 "カスタムヘッダエディタ: デスクトップレイアウト" を表示して、例がどのように設定されたかを確認します。

カスタムヘッダエディタ: 上記のようにデスクトップレイアウトを使用します。

カスタムヘッダ設定

カスタムヘッダに追加できるコンポーネントは以下のとおりです。

  • イメージ

  • 折れ線

  • メニュー

  • サインインおよび言語

  • テキスト

カスタムヘッダにコンポーネントを追加します。イメージ、ライン、ロゴ、メニュー、サインインと言語、およびテキストから選択します。

サインインおよび言語コンポーネントが必要です。一部のコンポーネントには、スタイルメニューがあります。図 "カスタムヘッダ: スタイルタブ" を参照してください。このタブには、メニューコンポーネントのスタイルメニューから利用可能なオプションが表示されます。

カスタムヘッダのロゴは、ロゴコンポーネントまたはイメージコンポーネントから追加することができます。さまざまな表示設定 (デスクトップやモバイルなど) 向けに最適化されたロゴを使用するには、ロゴコンポーネントを使用します。

カスタムヘッダ、スタイルタブで利用可能なオプション。

サマリ

  • ヘッダーが設定され、コア設定される場所: 表示 → スタイル → ヘッダーでは、ヘッダーは言語およびブランドごとに設定されます。詳細ページで、デスクトップの表示、ロゴの配置、ヘッダの全角か中央揃えかなどのオプションを選択します。カスタムヘッダを使用しない場合は、組み込みのサインインウィジェットおよびロケールセレクタを有効化することができます。
  • ロゴ + メニューリンクおよび URL ベストプラクティス: ロゴをアップロードし、相対リンク / を使用してそのクリック URL をキャリアサイトのホームに設定します。Category、Content、External、Home Page、List (ドロップダウン)、TC Join、Cookie Consent Manager などのリンクタイプを使用して、ヘッダーナビゲーションリンク (ドラッグ & ドロップで並べ替え) を構築します。相対リンク (/、/Red/、/search/、/Red/search/ など) を使用して、ステージから本稼動に移行する際や、ロケールが "スティッキーである" ため、変更を回避します。外部サイトを新しいセッションで開きますが、内部リンクは同じセッション内に保持します。
  • カスタムヘッダーと制限: ヘッダースタイルの選択: カスタムでは、ブランド/ロケール別およびデスクトップ/モバイル別に行 (1 行あたり最大 4 コンポーネント) を使用してさまざまなヘッダーレイアウトを設計することができます。コンポーネントには、イメージ、行、メニュー、テキスト、サインインおよび言語 (必須) が含まれます。行/コンポーネントは作成後に移動できないため、慎重に計画してください。デバイスごとに最適化されたロゴの場合は、ロゴコンポーネント (単純なロゴの場合はイメージ) を使用します。