キャリアサイトの構築

ホームページテンプレートの作成

Objective

After completing this lesson, you will be able to ホームページテンプレートを作成します。

ホームページ

アクティブなロケールおよびブランドごとにホームページを設定できます。最初に、デフォルトのブランドを設定します。

  • ホームページにコンポーネントを追加するには、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

キッチンにいる男性

未変更

上部中央

* イメージの位置は常にイメージの中心に設定されるため、すべてのブレークポイント (デスクトップ、タブレット、およびモバイル) の画面に残ります。

タスク 1: コンポーネントの追加および設定

ステップ

  1. CSBPagesHomeEnglishDefault BrandHome にナビゲートします。

  2. 構成品目追加ボタンを選択します。

  3. Subscribe FormSearch Bar3 Column Images with CaptionTextLarge ImageGoogle Job Map、および Video を選択します。 

  4. 構成品目一覧外のを選択します。構成品目の順序を変更する必要がある場合は、上下のボタンを使用します。

  5. 購読フォームを表す灰色のボックスを選択します。

    1. 詳細タブで、ヘッダテキストの横にある T アイコンをクリックし、色を #FFFFFF に変更して、閉じるをクリックします。必要に応じて、テキストを変更することもできます。

    2. スタイルタブを選択します。

    3. 本文の背景を選択し、 + 追加をクリックします。

    4. Label に semi-transparent blue と入力します。

    5. 16 進数ボックスに 004990 と入力します。

    6. ボックスの新しい半透明色を作成するには、A というラベルのボックスに 0.68 と入力します。

    7. カラーパレットボックスの外側を選択します。次に、新しい色を選択するには、本文の背景を再度選択し、新しい色を選択します。

    8. 本文テキストを選択し、#FFFFFF を選択します。

    9. 背景イメージを選択し、上記のテーブルに一覧表示されているイメージをアップロードします。画像をアップロードする手順については、「キャリアサイトデザインリーディングプラクティスで新しい画像を追加する手順」の章を参照してください。

    10. 公開してプレビューします。

    11. ウィンドウの上部で、Subscribe Form の横にある戻る矢印を選択して、ホームページの上部に戻ります。

  6. 下にスクロールし、3 列画像 (キャプションあり) の灰色のボックスを選択します。

    1. 列 1 タブを選択します。

    2. リンク表示で、はいをクリックします。リンクは後で追加します。

    3. イメージ選択を選択し、上記のテーブルに一覧表示されているこのコンポーネントの最初のイメージをアップロードします。

    4. 列 2 タブを選択します。

    5. リンク表示で、はいを選択します。

    6. イメージ選択を選択し、上記の表に示されているコンポーネントの 2 番目のイメージをアップロードします。

    7. 列 3 タブを選択します。

    8. リンク表示で、はいを選択します。

    9. イメージ選択を選択し、上記の表に示されているコンポーネントの 3 番目のイメージをアップロードします。

    10. 公開してプレビューを選択します。

    11. ウィンドウの上部で、3 列イメージ (キャプションあり) の横にある戻る矢印を選択します。

  7. 2 つのテキストコンポーネントを区別するには、最初の Text コンポーネントまでスクロールし、単語 Text をクリックして名前を変更します。

    1. 名前ボックスに Dream Job と入力し、閉じるを選択します。

    2. 最初のテキストコンポーネントを編集するには、灰色のボックスを選択します。

    3. 詳細タブで、ヘッダテキストFind Your Dream Job at Best Run と入力します。

    4. ヘッダテキストの横にある T アイコンを選択し、サイズ18 に、#FFFFFF に変更します。

    5. 本文と入力します。次の大きな冒険をお探しですか? プロフェッショナルにとっての Best Run のキャリア機会を探し、刺激的で、やりがいがあり、柔軟な Uber の仕事を見つけましょう。世界を変える事さえできる。

    6. 本文テキストの上にある T アイコンを選択し、サイズ16 に変更します。

    7. 表示ボタンで、はいをクリックします。ボタンリンクは後で追加します。

    8. スタイルタブを選択します。

    9. 本文テキストを選択し、#FFFFFF を選択します。

    10. 背景イメージを選択し、上記のテーブルに一覧表示されているイメージをアップロードします。

    11. 公開してプレビューを選択します。

    12. ウィンドウの上部で、テキストの横にある戻る矢印を選択します。

  8. 2 番目の Text コンポーネントまでスクロールし、Text という単語をクリックして名前を変更します。 

    1. 名前ボックスにリモートワークと入力し、閉じるを選択します。

    2. 2 番目の Text コンポーネントを編集するには、灰色のボックスを選択します。

    3. 詳細タブで、ヘッダテキストLooking for a Remote Job? と入力します。

    4. ヘッダテキストの横にある T アイコンを選択します。サイズ24 に変更し、Best Run Blue に変更します。閉じるを選択します。

    5. 表示ボタンで、はいを選択します。後でリモート求人用のカテゴリページへのリンクを追加します。

    6. 公開してプレビューを選択します。

    7. ウィンドウの上部で、テキストの横にある戻る矢印を選択します。

  9. 下にスクロールし、[大きな画像]の灰色のボックスを選択します。

    1. イメージ選択を選択し、上の表に記載されたイメージをアップロードします。

    2. アップロード後、背景イメージにカーソルを合わせると、高さが 485 ピクセルであることがわかります。

    3. コンポーネントの上下の間に余分なスペースが生じないようにするには、イメージの最大高さ485 と入力します。

    4. スペースの有効化で、はいを選択します。デフォルト (なし) 設定のままにします。

    5. 公開してプレビューを選択します。

    6. ウィンドウの上部で、大きなイメージの横にある戻る矢印を選択します。

  10. 下にスクロールし、Google 求人マップの灰色のボックスを選択します。

    1. Details タブの Predefined Map Center Options で、USA を選択します。

    2. スタイルタブを選択し、Body of Water に対してサイトの背景色を選択します。

    3. スペースの有効化ではを選択し、デフォルト (なし) 設定のままにします。

    4. 公開してプレビューを選択します。

    5. ウィンドウの上部で、Google 求人マップの横にある戻る矢印を選択します。

  11. 下にスクロールし、ビデオの灰色のボックスを選択します。

    1. ビデオ URL または ID には、https://www.youtube.com/watch?v=l4v33pLEpe0 と入力します。ビデオタイプが定義されていることを確認します。

    2. レイアウトで、右寄せ (テキストあり) を選択します。

    3. ヘッダテキストに、ビジネスコンサルティングサービスのリーダーとして作業できますか? と入力します。

    4. ヘッダテキストの横にある T アイコンを選択します。フォントArial BlackGadgetsans-serif に変更し、Size24 に変更し、ColorBest Run Blue に変更します。閉じるをクリックします。

    5. 本文テキスト「Best Run よりも優れています!」と入力します。

    6. 本文テキストの上にある T アイコンを選択し、サイズ24 に変更します。

    7. スタイルタブを選択します。

    8. 本文テキストで、ベストランブルーを選択します。

    9. スペースの有効化で、はいを選択します。テキストが左余白に近づきすぎないようにするには、LeftMedium を選択します。

    10. 公開してプレビューを選択します。

    11. ウィンドウの上部で、ビデオの横にある戻る矢印を選択して、ホームページの上部に戻ります。

タスク 2: ホームページへのメタタグの追加

CSB のすべてのページにメタデータを入力するのがベストプラクティスです。ホームページには、グローバルに入力したメタデータと同じメタデータを使用します。

ステップ

  1. ページホームen_USデフォルトブランドホームにナビゲートします。

  2. 左上の近くにある歯車ボタンを選択し、タグを選択します。

  3. 以下の情報を入力します。

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

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

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

  4. 確認を選択します。

  5. 公開します。

    注記

    今後の演習問題では、特にメタタグまたは画像の代替テキストを追加するよう指示するわけではありませんが、これを行う習慣があります。

サマリ

  • ロケール/ブランド別にホームページを設定し (デフォルトブランドから開始)、複数のコンポーネントを追加し、上/下コントロールで並べ替えて、各コンポーネントを表示するデバイス (デスクトップ/タブレット/モバイル) を設定します。
  • コンポーネントのスタイル設定とコンテンツのカスタマイズ: テキストサイズ/色/フォントの調整、半透明色の作成と適用、本文/背景イメージの設定、更新後の公開/プレビューを行います。
  • ホームページのメタタグ(タイトル、キーワード、説明)を追加し、確認および公開して SEO ベストプラクティスを適用し、将来のページにメタタグや画像の代替テキストも追加する習慣を醸成します。