アクティブなロケールおよびブランドごとにホームページを設定できます。最初に、デフォルトのブランドを設定します。
ホームページにコンポーネントを追加するには、Add Component ボタンを選択します。
上下のボタンを使用して、ページ上のコンポーネントの位置を制御します。
コンポーネントをすべてのデバイス (デスクトップ、タブレット、モバイル) に表示しない場合は、そのデバイスのチェックボックスをオフにします。
コンポーネント自体を選択して、スタイル、外観、およびコンテンツを調整します。

Objective
アクティブなロケールおよびブランドごとにホームページを設定できます。最初に、デフォルトのブランドを設定します。
ホームページにコンポーネントを追加するには、Add Component ボタンを選択します。
上下のボタンを使用して、ページ上のコンポーネントの位置を制御します。
コンポーネントをすべてのデバイス (デスクトップ、タブレット、モバイル) に表示しない場合は、そのデバイスのチェックボックスをオフにします。
コンポーネント自体を選択して、スタイル、外観、およびコンテンツを調整します。

このビデオでは、ホームページの作成方法を説明します。
Best Run デフォルトブランドのホームページの構築を開始するには、コンポーネントを追加および設定し、ページのメタデータを追加します。後の演習問題では、ページに機能を追加し、レッドブランド用のページを複製します。
| 構成品目 | イメージファイル | 代替テキスト | イメージタイプ | イメージの位置* |
|---|---|---|---|---|
購読フォーム | Subscribe.jpg | 多忙なオフィスにいる女性 | 未変更 | 上部中央 |
3 列 | 3-1_engineering.jpg | フスト・バンプ | ||
3 列 | 3-2_sales.jpg | テーブルで話す 3 人の人物 | ||
3 列 | 3-3_management.jpg | メモを取る 2 人の人物 | ||
テキスト: Dream Job | green_background.jpg | 緑の背景 | 未変更 | 中央中央 |
イメージ (大) | work_remotely.jpg | キッチンにいる男性 | 未変更 | 上部中央 |
* イメージの位置は常にイメージの中心に設定されるため、すべてのブレークポイント (デスクトップ、タブレット、およびモバイル) の画面に残ります。
CSB→Pages→Home→English→Default Brand→Home にナビゲートします。
構成品目追加ボタンを選択します。
Subscribe Form、Search Bar、3 Column Images with Caption、Text、Large Image、Google Job Map、および Video を選択します。
構成品目一覧外のを選択します。構成品目の順序を変更する必要がある場合は、上下のボタンを使用します。
購読フォームを表す灰色のボックスを選択します。
詳細タブで、ヘッダテキストの横にある T アイコンをクリックし、色を #FFFFFF に変更して、閉じるをクリックします。必要に応じて、テキストを変更することもできます。
スタイルタブを選択します。
本文の背景を選択し、 + 追加をクリックします。
Label に semi-transparent blue と入力します。
16 進数ボックスに 004990 と入力します。
ボックスの新しい半透明色を作成するには、A というラベルのボックスに 0.68 と入力します。
カラーパレットボックスの外側を選択します。次に、新しい色を選択するには、本文の背景を再度選択し、新しい色を選択します。
本文テキストを選択し、#FFFFFF を選択します。
背景イメージを選択し、上記のテーブルに一覧表示されているイメージをアップロードします。画像をアップロードする手順については、「キャリアサイトデザインリーディングプラクティスで新しい画像を追加する手順」の章を参照してください。
公開してプレビューします。
ウィンドウの上部で、Subscribe Form の横にある戻る矢印を選択して、ホームページの上部に戻ります。
下にスクロールし、3 列画像 (キャプションあり) の灰色のボックスを選択します。
列 1 タブを選択します。
リンク表示で、はいをクリックします。リンクは後で追加します。
イメージ選択を選択し、上記のテーブルに一覧表示されているこのコンポーネントの最初のイメージをアップロードします。
列 2 タブを選択します。
リンク表示で、はいを選択します。
イメージ選択を選択し、上記の表に示されているコンポーネントの 2 番目のイメージをアップロードします。
列 3 タブを選択します。
リンク表示で、はいを選択します。
イメージ選択を選択し、上記の表に示されているコンポーネントの 3 番目のイメージをアップロードします。
公開してプレビューを選択します。
ウィンドウの上部で、3 列イメージ (キャプションあり) の横にある戻る矢印を選択します。
2 つのテキストコンポーネントを区別するには、最初の Text コンポーネントまでスクロールし、単語 Text をクリックして名前を変更します。
名前ボックスに Dream Job と入力し、閉じるを選択します。
最初のテキストコンポーネントを編集するには、灰色のボックスを選択します。
詳細タブで、ヘッダテキストに Find Your Dream Job at Best Run と入力します。
ヘッダテキストの横にある T アイコンを選択し、サイズを 18 に、色を #FFFFFF に変更します。
本文に と入力します。次の大きな冒険をお探しですか? プロフェッショナルにとっての Best Run のキャリア機会を探し、刺激的で、やりがいがあり、柔軟な Uber の仕事を見つけましょう。世界を変える事さえできる。
本文テキストの上にある T アイコンを選択し、サイズを 16 に変更します。
表示ボタンで、はいをクリックします。ボタンリンクは後で追加します。
スタイルタブを選択します。
本文テキストを選択し、#FFFFFF を選択します。
背景イメージを選択し、上記のテーブルに一覧表示されているイメージをアップロードします。
公開してプレビューを選択します。
ウィンドウの上部で、テキストの横にある戻る矢印を選択します。
2 番目の Text コンポーネントまでスクロールし、Text という単語をクリックして名前を変更します。
名前ボックスにリモートワークと入力し、閉じるを選択します。
2 番目の Text コンポーネントを編集するには、灰色のボックスを選択します。
詳細タブで、ヘッダテキストに Looking for a Remote Job? と入力します。
ヘッダテキストの横にある T アイコンを選択します。サイズを 24 に変更し、色を Best Run Blue に変更します。閉じるを選択します。
表示ボタンで、はいを選択します。後でリモート求人用のカテゴリページへのリンクを追加します。
公開してプレビューを選択します。
ウィンドウの上部で、テキストの横にある戻る矢印を選択します。
下にスクロールし、[大きな画像]の灰色のボックスを選択します。
イメージ選択を選択し、上の表に記載されたイメージをアップロードします。
アップロード後、背景イメージにカーソルを合わせると、高さが 485 ピクセルであることがわかります。
コンポーネントの上下の間に余分なスペースが生じないようにするには、イメージの最大高さに 485 と入力します。
スペースの有効化で、はいを選択します。デフォルト (なし) 設定のままにします。
公開してプレビューを選択します。
ウィンドウの上部で、大きなイメージの横にある戻る矢印を選択します。
下にスクロールし、Google 求人マップの灰色のボックスを選択します。
Details タブの Predefined Map Center Options で、USA を選択します。
スタイルタブを選択し、Body of Water に対してサイトの背景色を選択します。
スペースの有効化ではいを選択し、デフォルト (なし) 設定のままにします。
公開してプレビューを選択します。
ウィンドウの上部で、Google 求人マップの横にある戻る矢印を選択します。
下にスクロールし、ビデオの灰色のボックスを選択します。
ビデオ URL または ID には、https://www.youtube.com/watch?v=l4v33pLEpe0 と入力します。ビデオタイプが定義されていることを確認します。
レイアウトで、右寄せ (テキストあり) を選択します。
ヘッダテキストに、ビジネスコンサルティングサービスのリーダーとして作業できますか? と入力します。
ヘッダテキストの横にある T アイコンを選択します。フォントを Arial Black、Gadget、sans-serif に変更し、Size を 24 に変更し、Color を Best Run Blue に変更します。閉じるをクリックします。
本文テキストに「Best Run よりも優れています!」と入力します。
本文テキストの上にある T アイコンを選択し、サイズを 24 に変更します。
スタイルタブを選択します。
本文テキストで、ベストランブルーを選択します。
スペースの有効化で、はいを選択します。テキストが左余白に近づきすぎないようにするには、Left で Medium を選択します。
公開してプレビューを選択します。
ウィンドウの上部で、ビデオの横にある戻る矢印を選択して、ホームページの上部に戻ります。
CSB のすべてのページにメタデータを入力するのがベストプラクティスです。ホームページには、グローバルに入力したメタデータと同じメタデータを使用します。
ページ→ホーム→en_US→デフォルトブランド→ホームにナビゲートします。
左上の近くにある歯車ボタンを選択し、タグを選択します。
以下の情報を入力します。
ページとメタタイトル:Best Run の求人
メタキーワード:エンジニアリング、販売、人事、管理に関する求人
メタディスクリプション:Best Run の求人にオンラインで応募:エンジニアリングの求人、営業職務、人事職種など
確認を選択します。
公開します。
注記