サイトをカスタマイズする

メモ

日本語で受講されている方へ
このバッジの Trailhead ハンズオン Challenge は英語で受講していただく必要があります。英語の意味についてはかっこ内の翻訳をご参照ください。必ず英語の値をコピーして貼り付けてから、Trailhead Playground の言語を [English] に、ロケールを [United States] に切り替えてください。こちらの指示に従ってください。

翻訳版の Trailhead を活用する方法については、自分の言語の Trailhead バッジをご覧ください。

アクセシビリティ

この単元ではスクリーンリーダーのユーザー向けに指示が追加されている部分があります。この単元の詳細なスクリーンリーダー版を表示するには、以下のリンクをクリックしてください。

Trailhead スクリーンリーダー版を開く。

前のステップで、各自のポートフォリオの土台となる基本的なサイトを作成しました。ここで「各自の」と述べるのは、Salesforce エコシステムに参加する Trailblazer にとって特に重要な点の 1 つが「自分らしくあること」であるためです! 自分らしさを示す最適な方法は、各自のホームページをカスタマイズすることです。ホームページは、あなたの公開サイトにアクセスしたすべての人々が最初に目にするところです。

そのため、自分の人となり、価値観、関心のある事項を伝える画像を作成します。自分の個性を表す画像を選びますが、プロフェッショナルであるよう心がけます。使い慣れた画像や写真の編集アプリケーションを使用して処理します。

次のガイドラインに従います。

個人の写真や自分で作成した独創的なグラフィックを使用します。
画像を適切にフォーマットします。画像にテキスト (自分の名前など) を書き込む場合は、テキストが背景に埋もれず、はっきり読み取れるようにします。
自分のもの以外の画像を使うときは、必ず許可を取り付けます。
画像をページ全体に表示する場合は、横 1,800 ピクセル × 縦 200 ピクセルにします。この例のように、画像とテキストを組み合わせることもできます。
ファイルに portfolio_header という名前を付け、種別が「jpg」であることを確認します。

独自の画像を作成しない場合は、この画像をダウンロードして使用できます。

ポートフォリオのヘッダーを作成する

[Setup (設定)] の [All Sites (すべてのサイト)] ページが開いていない場合は、[Quick Find (クイック検索)] に Digital Experiences (デジタルエクスペリエンス) と入力して、[All Sites (すべてのサイト)] を選択し、リストから各自のサイトを選択します。

[Builder (ビルダー)] をクリックします。 新しいタブにエクスペリエンスビルダーが起動します。
ページの既存の画像にカーソルを置き、画像のリッチコンテンツエディターをクリックします。
ポップアップウィンドウの [Edit Content (コンテンツの編集)] をクリックします。
画像を強調表示して、Delete キーを押します。
リッチテキストエディターのメニューバーにある画像アイコンをクリックして、portfolio_header.jpg という画像をアップロードします。
画像がページ全体に表示されない場合は、「My Online Portfolio (私のオンラインポートフォリオ)」などのテキストを追加します。

お疲れさまでした。ページに明快な新しいバナーが表示されます。どのように表示されるか確認する場合は、[Preview (プレビュー)] をクリックします。ここまでの作業に満足したら、[Back to Builder (ビルダーに戻る)] をクリックします。

Web サイトのヘッダー画像

色を選ぶ

続いて、テーマを各自の好きな配色に更新します。テーマカラーを決めることでブランドが際立ちます。各自のポートフォリオをどのように見せるか検討します。ヘッダー画像が引き立つ配色にします。

エクスペリエンスビルダーで、[Theme (テーマ)] パネルを開き、[Colors (色)] をクリックします。
[Action Color (アクションの色)]、[Detail Text Color (詳細テキストの色)]、[Page Background Color (ページ背景色)] の色を変更します。

[Action Color (アクションの色)] に応じて、タイルメニューのタブの色が変化します。このモジュールの後半でタブを作成しますが、必要に応じて後から色を変更できます。

言語オプションを確認する

サイトを母国語で作成していますか? 各自のサイトの言語が、選択した言語をサポートするよう設定されていることを確認します。

[Settings (設定)] パネルを開いて [Languages (言語)] をクリックします。
このプロジェクトでは、[English (US) (英語 (米国))] をデフォルト言語のままにします。

言語をインポートして、ユーザーが Web ページ翻訳ツールを使用してコミュニティの一部を翻訳する方法を管理できます。

ポートフォリオをプレビューする

コンテンツを公開する前に、すべてが望んだとおり整然と表示されることを確認します。

[Preview (プレビュー)] をクリックします (ブラウザーウィンドウによってはアイコンで表示されている場合があります)。
プレビューしたら、[Back to Builder (ビルダーに戻る)] をクリックします。

変更を公開する

変更は常に保存され、いつ公開するかは各自が決定できます。世間一般に自己紹介する心構えはできていますか?

[Publish (公開)] をクリックします (ブラウザーウィンドウによってはアイコンで表示されている場合があります)。
もう一度 [Publish (公開)] をクリックします。
[Got It (了解)] をクリックします。