トップイメージの変更 その2

ページ毎に異なったトップイメージを配置する方法です。

1.画像の準備

1. 幅960ピクセルの画像を用意します。
2. 高さは後述するCSSで調整するのでどんな大きさでもOKです。
3. ここでは、ホームページ用には300ピクセルその他のページ用には150ピクセルとしました。

2.アップロード

1. 管理メニューからデザインを選択します。
2. 独自レイアウトで「ファイル」タブを選択します。
3. 上記1.で準備した画像をでアップロードします。

3.既存トップ画像の削除

1. 独自レイアウトで「HTML」タブを選択します。
2. <img src="visual.jpg" alt="" /> と書かれた１行を削除します。
   ここでは、<!-- --> で囲み無効化しました。

4.トップ画像の設定

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

（1）全てのページに共有の画像

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

注）

• /* トップ画像を指定しないページのトップ画像 */はどのページの CSS かが分かるようにするコメント。CSSでのコメントは「/* ～ */」
• height は、画像の高さと、ページの上部にある 「ホームページタイトル」部の高さを加えた高さを入力する。ここでは「ホームページタイトル」部45ピクセルに画像の高さ150ピクセルを加え195ピクセルとした。
• header-2.jpgは画像のファイル名
• no-repeatは背景を繰り返さない
• bottomは下方に配置する
• margin-bottom:0は講習会第4回目のロゴ画像挿入時に#headerのカスタマイズで設定した下方margin 10ｐｘをゼロにする。

（2）ホームページ用CSS

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

注）

• cc-indexpageは当該divのクラス名
• height は、「ホームページタイトル」部45ピクセルに画像の高さ300ピクセルを加え345ピクセルとした。
• header-1.jpgは画像のファイル名

（3）指定ページ用CSS

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

注）

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