初級コース セクション3
初心者レベルのウェブサイトワールドトレーニングコースのセクション 3 へようこそ。
このセクションを完了すると、次のことができるようになります。
- ウェブサイトに表示される一般的なフォントを変更する
- ウェブサイトの特定のページのフォントを変更する
- ウェブサイトに表示される全体的な色を変更する
- ウェブサイトの特定のページの色を変更する
フォントの種類とサイズを変更する
フォントの種類とサイズの変更は、ウェブサイト全体の場合はメニューの「デザイン」オプション、個々のページの場合は各ページの「カラーとフォント」オプションから行うことができます。まずはウェブサイト全体のフォントについて見ていきましょう。「デザイン」メニューから「カラーとフォント」を選択してください。
ページを下にスクロールして、「フォント」ボックスのオプションを表示します。ここで、標準フォント、見出しフォント、フォントサイズ、行の高さを編集できます。
新しいフォントを選択するには、青いボタン「フォントを選択」をクリックします。この例では、メインフォント（一般）とフォントサイズをArial、Helvetica、URW Gothic L、sans-serif、サイズを16pxに変更します。
「カスタムフォント（メタインクルード）」というボックスも表示されます。ここにGoogle Fontsの特定のコードを貼り付けます。フォント見出しに貼り付けるコードです。貼り付けるには、ブラウザの新しいタブを開き、 Googleフォント ウェブサイトで Merriweather フォントを検索して選択すると、Google Fonts ウェブサイトに次のようなものが表示されます。
「Standard @ Import」のコードをコピーし、「Custom Fonts」ボックスに貼り付けます。「Custom Fonts」ボックスの「Edit」をクリックし、既存のコードの下に以下のコードを貼り付けます。
「変更を保存」ボタンをクリックしてエディターを閉じます。次に、フォントファミリーのテキストをコピーし、「フォント（見出し）」ボックスに貼り付けます（下の画像を参照）。「公開」をクリックして、ここまでの作業を保存します。
特定のウェブサイトページのフォントを変更する
T&C ページを開きます。ここでは、このページのみのフォントの種類とサイズを変更します。
まず、「返品ポリシー」という小見出しをハイライトし、編集ツールバーのフォントファミリーボックスの横にあるドロップダウン矢印をクリックします。現在使用しているTinyMCE3510以外のエディタを使用している場合は、表示が異なりますのでご注意ください（右上に現在のエディタ名が表示され、新しいエディタモードに切り替えることができます）。
フォントとして「Comic Sans MS」を選択すると、ハイライト表示されたテキストのみがこのフォントに変更されますが、ページの他の部分はそのままです。「返品ポリシー」のテキストをもう一度ハイライトし、今度は「フォントサイズ」の横にあるドロップダウン矢印をクリックして、「24pt」を選択します。この見出しはデフォルトでH3（見出し3）になっていることにも気づくでしょう。このページではこれで問題ありません。利用規約ページは次のようになります（赤い矢印で示されているように、小見出しが大きく、フォントも異なります）。
ウェブサイトの全体的な色を変更する
ウェブサイト全体の色を変更するには、「デザイン」タブを開き、「色とフォント」オプションを選択します。「デザインオプション」ページでは、ウェブサイト上の様々なエリアの色を編集できます。
色には16進コードまたは色番号が割り当てられているため、例えば単に「濃い青」という表現よりも具体的な色を指定できます。色を変更したい項目の横にあるボックスに16進コードを入力し、別のボックスをクリックして保存できます。または、「色を選択」ボタンをクリックし、カラーウィザードから手動で色を選択して「色を使用」ボタンを選択することもできます。
重要 - 選択した各色の16進コードを、日記やデバイス上のファイルなど安全な場所に書き留めておいてください。ウェブサイトのデザインを編集する必要がある場合に役立ちます。 （中級レベルコースのセクション 1 と同様）。
私たちが使用することを選択した色は次のとおりです。
「変更を保存」ボタンをクリックし、「公開」ボタンをクリックして作業を保存します。
個々のWebページのテキスト色を変更する
利用規約ページをもう一度開いてください。デザインオプションで選択した色に応じて、見出しの色が変更されていることがわかります。これはサイト全体の変更です。
ただし、個々のページのテキストの色を変更することも可能です。次に、その手順を説明します。「返品ポリシー」という見出しをハイライトし、「テキストの色」アイコンの横にあるドロップダウンボックスを選択します。すると、あらかじめ選択された色の一覧が表示され、そこから選択できます。また、「その他の色」オプションをクリックすると、他の色を選択することもできます。
この例では、「その他の色」オプションを選択し、カラーボックスに16進コード「#0628f8」を入力して、「適用」ボタンをクリックします。見出しの色が次のように変わります。
「変更を保存」ボタンをクリックし、「公開」ボタンをクリックして、これまでの作業を保存します。
おめでとうございます。初級レベルコースのセクション3を修了しました。次は、この初級レベルコースのセクション1、2、3で学んだスキルを活用するアセスメント「アセスメント1」です。認定資格を取得するには、このアセスメントに合格する必要があります。アセスメントは、Website Worldサポートチームのメンバーが担当します。
