・デザイン変更は【style】フォルダ内の画像入替えとスタイルシート（index.css、pic.css）の編集で行います。
（以下文章中のCSSファイルとは【style】フォルダ内の index.css 又は pic.css を示します。）
・CSSファイルはスタイルシート編集機能のあるＨＴＭＬ作成ソフトかテキストエディタで編集してください。
・
編集後の確認に （ ＣＳＳ確認用.html ） を利用してください。
※スタイルが適用されない場合はCSSファイル内の日本語のコメント文（/*〜*/)が原因の場合があります。この場合はコメント文を削除してください。
■トップページのデザイン変更について
- 表示幅を変更する
・index.cssのクラス『.table-main』、『.album-all 』のwidth値を変更します。
・ピクセルで指定する場合は px 、ページに対する割合を指定する場合は % を指定してください。
.table-main {
width: 600px; ←表示幅を指定
margin-top: 5px;
}
.album-all {
width: 600px; ←表示幅を指定
margin-top: 5px;
}
- ページタイトルの画像を変更する
・【style】フォルダ内の top.gif を任意の画像に入替えてください。
・index.cssのクラス『.page-title』を編集します。
.page-title {
background-image: url(top.gif); ←画像名を変更した場合は変更
background-repeat: no-repeat;
height: 40px; ←画像の高さを指定
background-position: center center; ←配置位置（横位置 縦位置）
:
:
- 背景画像を変更する
・【style】フォルダ内のbg.gif を任意の画像に入替えてください。
・index.cssのの要素『body』を編集します。
body {
background-image: url(bg.gif); ←画像名を変更した場合は変更
background-color: #FFFFFF; ←背景色
background-repeat: repeat; ←背景画像の繰返し設定
background-attachment: fixed; ←背景画像のスクロール設定
background-position: left top; ←背景画像の配置位置
}
- 枠画像を変更する
・
【style】フォルダ内のframe1.gif 〜frame9.gif の9個の画像を入替えます
（画像の拡張子は gif のみになります。ファイル名も変更しないで下さい）
・入替える画像のサイズは縦横10ピクセル以上にしてください。
| ■画像の位置 |
frame2.gif ↓ |
|
| frame1.gif → |
|
← frame3.gif |
frame4.gif → |
← frame6.gif |
frame7.gif → |
← frame9.gif |
| |
frame8.gif ↑ |
|
- 「ホーム」「ログイン」画像を変更する
・【style】フォルダ内の home.gif 、 login.gif 画像を入替えてください。
（画像の拡張子は gif のみになります。ファイル名も変更しないで下さい）
- ヘッダーフッタ領域の枠、色を変更する
・index.cssのクラス『header1、2』を編集します。
・各領域へのスタイル対応は（ＣＳＳ編集用,html）を参考にしてください。
.header1 {
font-size: 12px; ←文字サイズ
color: #666666; ←文字色
text-align: center; ←文字配置
padding: 5px; ←枠内空間
background-color: #FFFFFF; ←枠内背景色
border: 1px solid #666666; ←枠線種、枠線色
}
- 文字のサイズ,色を変更する
・index.cssの変更するクラスを編集してください。
・各領域へのスタイル対応は（ＣＳＳ編集用,html）を利用してください。
.album-title {
font-size: 12px; ←文字サイズ
color: #666666; ←文字色
vertical-align: top; ←文字配置
padding: 3px; ←枠内空間
font-weight: bold; ←ボールド指定
}
.album-comment {
font-size: 12px; ←文字サイズ
color: #666666; ←文字色
vertical-align: top; ←文字配置
padding: 3px 3px 3px 15px; ←枠内空間
}
- アルバム画像の位置やサイズを変更する
・アルバム画像の位置やサイズは管理画面で設定します。
- トップページの表示位置を右（左）によせて表示する
・
トップページのページに対しての表示位置（左、中央、右）は管理画面で設定します。
・スタイルシートのBODY要素での指定はしないで下さい。
■ポップアップページのデザイン変更について
- 背景色、背景画像を変更する
・index.cssのクラス『.body-x』、『.body-yl』を編集します。
・背景画像は 横長画像の場合 と 縦長画像の場合 の2種類を設定する必要があります。
.body-x {
background-color: #000000; ←背景色
margin: 0px;
background-attachment: fixed; ←背景固定
background-image: url(bg-x.gif); ←背景画像のファイル名
background-repeat: no-repeat; ←背景画像の繰返し設定
background-position: right bottom; ←背景画像の配置位置
}
.body-y {
background-color: #000000;
margin: 0px;
background-attachment: fixed;
background-image: url(bg-y.gif); ← 〃
background-repeat: no-repeat;
background-position: right bottom;
}
文字のサイズ,色を変更する
・index.cssのクラス『.pic-title』、『.pic-comment』を編集します。
・各領域へのスタイル対応は（ＣＳＳ編集用,html）を利用してください。
.pic-title {
font-size: 12px; ←文字サイズ
color: #666666; ←文字色
vertical-align: top; ←文字配置
padding: 3px; ←枠内空間
font-weight: bold; ←ボールド指定
}
.pic-comment {
font-size: 12px; ←文字サイズ
color: #666666; ←文字色
vertical-align: top; ←文字配置
padding: 3px 3px 3px 15px; ←枠内空間
}
|
