1. 採用の実装
  2. キャリア・サイト・テーマの構成

キャリア・サイト・テーマの構成

外部キャリア・サイトのルック・アンド・フィールをパーソナライズして、組織のブランディングにあわせることができます。「テーマ」タブでは、企業ロゴ、背景イメージ、テキスト、フォント、色、カスタム・ヘッダー、フッター、CSSなどのグローバル要素を設定します。

「テーマ」タブのメイン・ビューには、キャリア・サイトのライブ・プレビューが含まれ、構成パネルで行った変更が表示されます。テーマ・エレメントを構成するとすぐにページ・プレビューに表示されます。デスクトップ、タブレットおよびモバイル・デバイス用のキャリア・サイトをプレビューできます。テーマに加えた変更は、公開後すぐにアクティブなキャリア・サイトに表示されます。

ノート: イメージは、認証を必要としない公開サーバーに格納する必要があります。たとえば、企業の公開Webサイトや公式にアクセス可能なWebサイトに使用するものと同じサーバーです。また、Oracle Recruiting Cloud (ORC)にイメージを格納することはできません。URLにお客様のPOD URLを含めることはできません。

オプション

説明

ロゴ

モバイル・デバイスおよびデスクトップ・デバイスのロゴとして異なるイメージを使用できます。

キャリア・サイトでロゴを使用するには、まずそのロゴを公式にアクセス可能なWebサイトにアップロードする必要があります。次に、「デスクトップ・ロゴのURLの挿入。」フィールドにイメージのURLを追加できます。ロゴは、キャリア・サイトの左隅に表示されます。ロゴの許容サイズは150 x 40ピクセルです。ロゴが大きい場合は、許容サイズにあわせて縮小されます。ロゴが小さい場合は、許容サイズに合うように拡張されません。

ソーシャル・シェアのイメージを追加しない場合は、ジョブがソーシャル・チャネルで共有されるときにデスクトップ・ロゴが使用されます。ソーシャル・メディア・サイトでジョブ・リンクを共有するときに最良のエクスペリエンスを得るには、ほとんどのソーシャル・プラットフォームでイメージのアスペクト比が1.9:1である必要があります。ソーシャル・シェアにロゴを使用する場合は、イメージをアップロードする前に、使用するプラットフォームで推奨されるアスペクト比を確認してください。

背景イメージ

背景イメージのURLをアップロードできます。キャリア・サイトのホームページに背景イメージが表示されます。画面解像度に適用されます。理想的なサイズは2560x1600ピクセルです。ファイルは1MBを超えないようにしてください。ファイルが大きい場合は、ツールを使用して圧縮します。

最小のテンプレートでは、背景イメージはキャリア・サイト・ホーム・ページにのみ適用されます。キャリア・サイト検索ページの背景色は、テーマ色4 (#ffffffなど)を使用して定義できます。

ブランド・テキスト

ブランド・テキストを入力できます。テキストはキャリア・サイトのホーム・ページに表示されます。これは、候補者がキャリア・サイトにアクセスしたときに最初に目にするものです。

グローバルのフォント

キャリア・サイトのすべてのページのフォントを選択できます。事前定義済のフォント・リストを使用できます。

新しいフォントを追加するには、「追加」をクリックしてフォント名を入力し、woff URLまたはwoff2 URLを追加します。たとえば:

  • https://www.xxxxx.com.hk/fonts/noto-sans-v12-latin-regular.woff
  • https://www.xxxxx.com.hk/fonts/noto-sans-v12-latin-regular.woff2
ノート: ブラウザでフォントを正しくレンダリングするには、そのフォントがオペレーティング・システムにインストールされている必要があります。

テーマ色

キャリア・サイトで使用する色を構成できます。テーマの色(エレメントのグループに適用される色のセット)を選択します。色は、選択したテンプレートによって異なります。ヘッダー、フッター、ボタン、テキスト、背景、パネル、メニュー、フィルタ、タイルなどの複数のUI要素の色を定義することもできます。「色のリセット」をクリックして、テンプレートのデフォルト色を復元します。

グローバル・ヘッダー

グローバルまたはキャリア・サイトの特定のページで使用できる様々なヘッダー設計スタイルを作成できます。

  • ヘッダー・オプション: 水平ナビゲーションまたはハンバーガ・ナビゲーションを選択できます
  • ロゴの非表示: このオプションを選択すると、ロゴは表示されません。
  • 「従業員です」ボタン・アイコンの非表示: このオプションを選択すると、「私は従業員です」テキストの横のアイコンは表示されません。
  • 従業員ですテキスト: 表示するテキストを入力します。テキストを表示しない場合は、フィールドを空白のままにします。
  • 「プロファイル」ボタン・アイコンの非表示: このオプションを選択すると、「プロファイルの管理」アイコンは表示されません。
  • プロファイル・テキスト: 表示するテキストを入力します。テキストを表示しない場合は、フィールドを空白のままにします。
    ノート: 「従業員ですテキスト」フィールドと「プロファイル・テキスト」フィールドにカスタム・テキストを入力した場合は、「翻訳」タブでテキストを翻訳できます。

カスタム・ヘッダー

企業のブランディングに合わせてカスタム・ヘッダーを作成できます。カスタム・ヘッダーはテンプレート・ヘッダーの上部に表示されます。カスタム・ヘッダーを作成するには、HTMLコードを指定します。

カスタム・フッター

企業のブランディングに合わせてカスタム・フッターを作成できます。カスタム・フッターを作成するには、HTMLコードを指定します。アクティブなフッターは1つのみです。テンプレート・フッターを使用する場合、カスタム・フッターは使用できません。

カスタムCSS

Cascading Style Sheets (CSS)を追加して、外部キャリア・サイトのルック・アンド・フィールを制御できます。パネル内のCSSコードを編集できますが、エディタを別のウィンドウで開くこともできます。

ジョブ求人詳細ページのメディア・セクションにイメージが追加されている場合は、キャリア・サイトでジョブを表示するときにイメージの側にグレーのバーが表示されないように、次のカスタムCSSをキャリア・サイトに追加します。

.media-slider__item-content {
  background-size: cover !important;
}

カスタムJavaScript

JavaScriptをキャリア・サイトに追加して、サードパーティ分析ツールを使用可能にすることができます。HTMLスクリプトではなくJavaScriptを追加する必要があります。ただし、HTMLは動的にロードできます。

ファビコン

外部キャリア・サイトにパーソナライズされたファビコンを追加できます。詳細は、「キャリア・サイトへのパーソナライズされたファビコンの追加」および「キャリア・サイト事業所検索の構成」を参照してください。

ここでは、元のGoogle Analyticsトラッキング・コードがどのように変換されるかの例を示します。

元のトラッキング・コード

キャリア・サイトに入力する変換済コード 


<!--Global site tag (gtag.js) - Google Analytics-->

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-9"><script>

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-12345678-9');

</script>
 

var script = document.createElement('script');
script.src = 'https://www.googletagmanager.com/gtag/js?id=UA-12345678-9';
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-12345678-9');

Google Tag Managerでは、次のコードを使用できます。サンプル内のXXXXXは、使用する必要があるタグに置き換える必要があります。

Google Tag Managerのトラッキング・コード 

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');