背景を画像に変更

※FFFTPによるQHMの階層構成の概要をもとに説明しますので、
　一度目を通しておいて下さい。

※すべてのデザインカスタマイズに基本手順１・２は書かれていますので、２回目以降の方や、見なくても問題なくFFFTPを操作できる方は基本手順を飛ばして「CSSの編集」だけを見てください

背景を画像に変更

基本手順１　（ダウンロード）

サクラエディタの起動

１、サクラエディタを起動します
　　※インストールされていない方はコチラのページからダウンロード・インストールをしてください
２、一旦、縮小しておくか、邪魔にならない位置に移動させておいてください

FFFTPの準備１（ＰＣ側）

１、FFFTPを起動させます

２、FFFTPの左側のウィンドウ（あなたのＰＣ側）の「ファイル移動」をクリックします

３、「フォルダの変更」というウィンドウが開いたら「・・・」をクリックしてください

４、「フォルダの参照」というウィンドウが開きますので「デスクトップ」をクリックしてください

５、「フォルダの変更」というウィンドウに戻りますので「ＯＫ」をクリックしてください

６、「バックアップ」と書いてあるフォルダをダブルクリックしてください

７、PC側の受け入れ準備が完了しました

FFFTPの準備２（サーバー側）

１、FFFTPの右側のウィンドウ（サーバー側）の作業に移ります。
　　「skin」と書いてあるフォルダをダブルクリックする

２、「hokukenstyle」と書いてあるフォルダをダブルクリックする

３、「テンプレート名（ここでは”g_flower01”で説明）」と書いてあるフォルダをダブルクリックする

４、「color.css」を一度だけクリックする

５、FFFTPウィンドウの｛ダウンロード｝ボタンをクリックする

６、ダウンロードが完了するとＰＣ側のウィンドウに「color.css」が移動します

※、FFFTPはCSSの編集が終わるまで、終了させないでください

関連項目
FFFTPによるQHMの階層構成の概要

サクラエディタでダウンロードした「color.css」を開く

※方法は２つあります。

■　１つ目（ドラッグアンドドロップで開く方法）

１、サクラエディタを拡大または見える位置に移動させます

２、ＰＣ側に移動した「color.css」を一度クリックします

３、クリックしたままサクラエディタに持って行き、離します

４、サクラエディタにデータが反映されれば成功です

５、次の「CSSの編集」に進んでください

■　２つ目（サクラエディタから直接開く方法）

１、サクラエディタを拡大または見える位置に移動させます

２、サクラエディタウィンドウの「ファイル」をクリック

３、次に「開く」をクリックします

４、さきほどダウンロードした「color.css」を探します
　　※だいたいは「デスクトップ」→「バックアップ」フォルダの中にあります

５、サクラエディタにデータが反映されれば成功です

６、次の「CSSの編集」に進んでください

CSSの編集

参考画像

背景を画像に変更

CSS編集手順

※画像変更方法は２つあります
１つ目の方法は（もともと画像が適用されている場合の変更）で説明
２つ目の方法は（画像ではなく背景色が適用されている場合の変更）で説明

※もともと画像が適用されている場合の変更（全方向リピート）

１、３行目〜８行目body内の
　　　background-image:url("body_bg.png"); をオリジナル画像の名前に変更します

２、例えばオリジナルの画像が（"body_sample.png"）という場合は
　　　background-image:url("body_bg.png"); を
　　　background-image:url（"body_sample.png"）に変更します

３、さらにオリジナルの画像である（"body_sample.png"）をFTPを使用し
　　　「color.css」と「layout.css」と同じ階層にアップロードします

※画像ではなく背景色が適用されている場合の変更（全方向リピート）

１、３行目〜８行目body内に
　　　background-image:url("○○○");を追加します
　　　※○○○はオリジナル画像の名前にする

２、例えばオリジナルの画像が（"body_sample.png"）という場合は
　　　background-image:url("○○○"); を
　　　background-image:url（"body_sample.png"）に変更します

３、さらにオリジナルの画像である（"body_sample.png"）をFTPを使用し
　　　「color.css」と「layout.css」と同じ階層にアップロードします

４、留意点
　　　画像はできる限り小さくしましょう。できれば１００バイト以下が好ましいです。
　　　非常に小さな画像を全方向リピートさせるのであれば、
　　　拡張子は[　 gif　 ]でも問題ありません。

５、応用
　　　リピートの有無でさまざまな応用が可能になります。
　　　例えば一枚絵の背景にすることもできますし、縦方向だけ、横方向だけ、
　　　全方向にリピートなど色々できます。
　　　自分の理想のデザインになるよう色々応用してみましょう
　　　リピート指定CSSコードは関連項目を参考にしてください

関連項目
background
背景に関する指定をまとめて行います
background-image
背景画像の指定を行います
background-position
背景画像の表示開始位置の指定を行います
background-repeat
背景画像のリピートの指定を行います