EC-CUBE Ver.2 - 2

2008年9月11日(木) 11:39 JST

投稿者: Admin

ローカル環境でレイアウト調整が出来ない場合、WEB上でCSSを編集する方法

対象:main.css
場所:デザイン管理-CSS編集
デフォルト状態では独自のCSSをここに定義すれば全ページに反映されますが全体のレイアウト(main.css)を直接編集する事は出来ません。

初期状態
@charset "utf-8";
@import url("../packages/default/css/import.css");
です。

ここにmain.cssをコピーして貼り付けて直接編集を出来るようにします。

デフォルト状態でのmain.css保存フォルダは、usr_data/packages/default/cssに格納されています。
そのmain.css最初の
@charset "utf-8";
を除きすべてを管理-CSS編集に貼り付けます。

@charset "utf-8";

@import url("../packages/default/css/import.css");

/* main.cssの挿入 */ 
main.css を挿入

次にインポートしているimport.cssのファイルからmain.cssをインポートから外します。
対象:import.css
この作業はローカルにて行いFTPでアップします。

@import url("main.css");を
/*@import url("main.css");*/
のようにコメントアウトしておきます。
main.cssは無効になります。

これでWEB上から直接main.cssを管理-CSS編集で行う事が出来ます。
編集する前の注意点main.cssを移動した事によりパスが変わります。
背景・画像のすべてのパスを最初に変更してください。
例:
ヘッダーロゴ部
デフォルト:background: url("img/header/bg.gif") no-repeat;
変更後:background: url("../packages/default/img/header/bg.gif") no-repeat;

変更が終わりましたら「この内容で登録する」ボタンでこの内容を登録しサイトチェックをしてみてください。
問題なく表示されたら管理-CSS編集画面で自由にレイアウトしてみてください。
レイアウトについて、縦の変更は容易に出来ますが幅に関してはmain.cssだけでなく他のCSSを編集しないとならないようですので幅についての変更はおすすめできません
当サイトでのテスト結果問題なくレイアウトする事が出来ましたが実際どのような影響がでるかちょっと解りません、 このやり方で問題など出ても当サイトでは一切責任はもてませんので自己責任の元で行ってください。
また、レイアウトがすべて終了したらmain.cssを元に戻してください。

管理-CSS編集からmain.cssを外します。
外す時に背景・画像のすべてのパスを元に戻してください。
例:
ヘッダーロゴ部
変更部分:background: url("../packages/default/img/header/bg.gif") no-repeat;
デフォルトに戻す:background: url("img/header/bg.gif") no-repeat;

その外したmain.cssをローカルにあるmain.cssに
@charset "utf-8";以下にコピーして保存します。
インポートしているimport.cssでコメントアウトしたmain.css 元に戻します。(/* */外す)
この2点のCSSをFTPにてアップし
終わりましたら管理-CSS編集「この内容で登録する」で保存サイトチェックをしてみてください。
最後にファイルmain.cssのデフォルトファイルを万が一のため別ファイル名で保存して置けばいつでも元の状態に戻せます。

※ 内容について分からない事、または間違い等ありましたら投稿お願いします。

コメント (0件)


KNTS-WEB
http://www.knts.net/~suite/article.php/20080911113901389