クイックホームページメーカーやWebサイト作成に関する情報サイト。QHM専門のリンク集・デザインカスタマイズを中心に情報を公開中！

メニュー部分を右から左に移動

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

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

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

サクラエディタの起動

１、サクラエディタを起動します
　　※インストールされていない方はコチラのページからダウンロード・インストールをしてください

２、一旦、縮小しておくか、邪魔にならない位置に移動させておいてください

FFFTPの準備１（ＰＣ側）

１、FFFTPを起動させます

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

※方法は２つあります。

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

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

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

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

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

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

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

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

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

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

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

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

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

CSSの編集

参考画像

CSS編集手順

関連項目
float
左または右に寄せて配置する指定を行います
width
横幅の指定を行います

基本手順２　（アップロード）

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

２、次に「すべて上書き保存」をクリック

３、FFFTPを開きます

４、FFFTPウィンドウの「表示を更新」をクリックします
　※FFFTPの概要説明では「５データの更新」となっています

５、さきほど編集した「layout.css」が最新のものになりました

６、「layout.css」を一度クリックします

７、FFFTPウィンドウの「アップロード」をクリックします

８、編集した「layout.css」がサーバー側に移動しました

９、編集されたかブラウザを開いて確認してください

１０、これで一連の作業は以上になります。
　
　CSSの編集をこれ以上行わない時は「サクラエディタ」「FFFTP」は終了してください