箇条書き（画像）の変更
※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 ul.list1内の
list-style-image:url("list_list1.png"); をオリジナル画像の名前に変更します
- ２、例えばオリジナルの画像が（"sample.png"）という場合は
list-style-image:url("list_list1.png"); をlist-style-image:url"sample.png"に変更します
- ３、さらにオリジナルの画像である（"sample.png"）をFTPを使用し
「color.css」と「layout.css」と同じ階層にアップロードします
※箇条書き（画像）２（--）の変更
- １、２２６行目〜２３０行目#body ul.list2内の
list-style-image:url("list_list2.png"); に影響を与えますが、コード変更は不要です
- ２、例えばオリジナルの箇条書き画像にしたい場合は
作成した画像を"list_list1.png"と名前を付け、
「color.css」と「layout.css」と同じ階層にアップロードします
- ３、元画像が消えてしまうので要注意です
「※箇条書き（画像）１（-）の変更」との違いは画像の名前を
"list_list1.png"にするかしないかの違いだけです。
※箇条書き（画像）３（---）の変更
- １、２３１行目〜２３５行目#body ul.list3内の
list-style-image:url("list_list3.png"); で変更できます
- ２、上記の２つの方法の内、自分がやりやすい方で実践しましょう
（１つ目は箇条書き（画像）１（-）の変更で説明
（２つ目は箇条書き（画像）２（--）の変更で説明 - ３、作業は以上になります。
関連項目
list-style-image
マーカー画像の指定を行います
list-style-position
マーカーの表示位置の指定を行います
基本手順２ （アップロード）
１、サクラエディタウィンドウの「ファイル」をクリック
２、次に「すべて上書き保存」をクリック
３、FFFTPを開きます
４、FFFTPウィンドウの「表示を更新」をクリックします
※FFFTPの概要説明では「５データの更新」となっています
５、さきほど編集した「color.css」が最新のものになりました
６、「color.css」を一度クリックします
７、FFFTPウィンドウの「アップロード」をクリックします
８、編集した「color.css」がサーバー側に移動しました
９、編集されたかブラウザを開いて確認してください
１０、これで一連の作業は以上になります。
CSSの編集をこれ以上行わない時は「サクラエディタ」「FFFTP」は終了してください
