トップイメージは講習会第2回目でファイル名「 visual.jpg 」とした960×250ピクセルの画像を用意し、管理メニュー→独自レイアウト→ファイルからアップロードしました。この設定で全てのページのトップイメージを「 visual.jpg 」に変更することができました。
　今回は、ページ毎に異なったトップイメージを配置する方法を学習しました。

幅960ピクセルの画像を用意します。

高さは後述するCSSで調整するのでどんな大きさでもOKです。

ここでは、ホームページ用には300ピクセルその他のページ用には150ピクセルとしました。

管理メニュー→独自レイアウト→ファイルでアップロードします。

管理メニュー→独自レイアウト→HTMLで<img src="visual.jpg" alt="" /> と書かれた１行を削除して保存します。
　ここでは、<!-- --> で囲み無効化しました。

トップイメージは各ページのID headerと指定れたdiv要素の背景画像として配置します。管理メニュー→独自レイアウト→CSSで下記を追加します。
上記でvisual.jpgを削除したので全てのページからトップイメージがなくなります。そこで、一旦全てのページに共有の画像を設定した後、特定のページごとに画像を設定します。

（1）   指定外ページ用CSS

/* トップ画像を指定しないページのトップ画像 */
#header {
    height: 178px;
    background: url(header-2.jpg) no-repeat bottom;
    margin-bottom:0;
 }

注）
①　/* トップ画像を指定しないページのトップ画像 */はどのページの CSS かが分かるようにするコメント。CSSでのコメントは「/* ～ */」
②　height は、画像の高さと、ページの上部にある 「ホームページタイトル」部の高さを加えた高さを入力する。ここでは「ホームページタイトル」部28ピクセルに画像の高さ150ピクセルを加え178ピクセルとした。
③　header-2.jpgは画像のファイル名
④　no-repeatは背景を繰り返さない

⑤　bottomは下方に配置する
⑥　margin-bottom:0は講習会第4回目のロゴ画像挿入時に#headerのカスタマイズで設定した下方margin 10ｐｘをゼロにする。

（2）ホームページ用CSS

/* トップページのトップ画像 */
.cc-indexpage #header {
    height: 328px;
    background: url(header-1.jpg) no-repeat bottom;
    margin-bottom:0;
}

注）
cc-indexpageは当該divのクラス名
Heightは「ホームページタイトル」部28ピクセルに画像の高さ300ピクセルを加え328ピクセルとした。

（3）指定ページ用CSS

/* 教養と教育ページのトップ画像 */
#page-xxxxxxxxxx #header {
    height: 178px;
    background: url(header-3.jpg) no-repeat bottom;
    margin-bottom: 0;
}

注）
#page-xxxxxxxxxxは指定されるページの #headerを囲むdivのIDです。
デベロッパーツールからbody要素IDをコピペします。

（4）その他のページ用CSS

上記（3）を繰り返します。