2015.
02.
02
20:40:13
結論から書くと、
１．テンプレートを複製する
２．管理画面上からあれやこれやとカスタマイズする
３．「２．」で足りないときはテキストエディタで直接編集する
の手順となります。
それでは詳細を書いていきます。
まず予備知識として、初期状態では
の中にHTMLの元ネタ（テンプレート）が入っています。
また
の中にCSSやJavaScript、画像ファイルが入っています。
「過去は振り返らないぜ！」という男前な人は、
これらのファイルを直接編集するのもアリかもしれませんね。
ですが、普通の人はテンプレートを複製してからあれやこれやしましょう。
まずは管理画面にログインします。
次に上のメニューから
と移動します。
そうすると、こんな画面が表示されるはずですφ（－－）
※クリックで拡大します
ここでテンプレートの右にある「ダウンロード」リンクを押して、
現在のテンプテートをローカルに保存します。
現在のテンプレートをローカルに保存したら、上のメニューから
と移動します。
そうすると、こんな画面が表示されるはずですφ（－－）
※クリックで拡大します
この画面から、先程ローカルに保存したテンプレートをアップロードします。
テンプレートコードには半角英数で任意の名前を入力してください。
この名前がテンプレートを格納するフォルダの名前になります。
テンプレート名も任意の名前を入力してください。こちらは日本語でも良いです。
テンプレート名は「テンプレート設定」画面でテンプレートを識別するための名前として使われます。
テンプレートファイルは先程ローカルに保存したファイルを指定します。
私はテンプレートコードに「test01」、テンプレート名に「テスト01」を指定し、
こんな感じにしましたφ（－－）
※クリックで拡大します
準備ができたら「この内容で登録する」ボタンを押します。
というダイアログが表示されれば、アップロード完了です。
再度、上のメニューから
と移動すると、アップロードしたテンプレートが追加されているはずです。
私の環境では、こんな感じになりましたφ（－－）
※クリックで拡大します
私はこの状態から「テスト01」を選択し「この内容で登録する」ボタンを押しました。
使用するテンプレートを「デフォルト」から「テスト01」に切り替えたのです。
これで、好き勝手にいじっても安心な状態になりました。
普段は「テスト01」が使われるので、デザインをカスタマイズするときは
「テスト01」のテンプレートに対して変更を加えます。
何かおかしくなった際には、テンプレートを「デフォルト」に切り替えれば
取りあえずは動く状態に戻る理屈です。
なお、追加したテンプレートのファイルは
の中にHTMLの元ネタ（テンプレート）が入っています。
CSSやJavaScript、画像ファイルは
の中です。
テキストエディタで直接変更を加える場合は、これらのファイルを修正することになります。
これで、下準備はバッチリです。
あとは自由にカスタマイズしてください。
メニューの「デザイン管理」からでも多くのことができますし、
テンプレートファイルを直接編集すれば、可能性は無限大ですよ。
あっ、そうそう。
携帯（モバイル）やスマホ（スマートフォン）のレイアウト変更も、やり方はPCと同じです。
テンプレートを複製して、管理画面から変更するなりファイルを直接編集するなりしてください。
注意点として、管理画面のレイアウトを変更したい場合は、
の中のHTMLの元ネタ（テンプレート）や
の中のファイル類をテキストエディタで直接編集する必要があります。
例えば、私は管理画面ログイン直後のHOME画面に表示されるお知らせがいらなかったので
を開き、27行目近辺の
を
のように変更してコメントアウトしました。
そうしたら、元々こんな感じの画面だったのがφ（－－）
※クリックで拡大します
こんな感じの画面に変わりましたφ（－－）
※クリックで拡大します
なんか左に寄ってて美しくないですね。
バランスを整えましょう。
を開き
1045行目近辺の
を
のように変更したところ、バランスが良くなりましたφ（－－）
※クリックで拡大します
これが管理画面のレイアウト変更の一例です。
その他のテンプレートを直接編集する際も、やり方は同じです。
長くなったので最後にもう一度まとめておきますね。
EC-CUBEのレイアウトの変更は、管理画面の「デザイン管理」からも行えますし
ファイルをテキストエディタ等で直接編集する形でも可能です。
ただし管理画面のレイアウト変更は、管理画面からはできません。
直接ファイルを編集する必要があります。
テンプレート関連のファイル類は、HTMLの元ネタ（テンプレート）が
の中に、CSSやJavaScript、画像ファイルが
の中に入っています。
またテンプレートを追加した場合は
配下、および
配下にテンプレートコードで指定した名前でフォルダが作成され、ファイル類はその中に保存されます。
テキストエディタ等で直接編集する際は、これらのファイル類を編集してください。
また、個人的には、レイアウトを変更する際には
を行い、元のテンプレートを複製してから変更した方が無難だと考えています。
動かなくなったら涙目ですからね。
最悪の場合でも最初の状態に戻せるようにしておいた方が良いと思いますよ。
そんな感じ＼（－－）／
１．テンプレートを複製する
２．管理画面上からあれやこれやとカスタマイズする
３．「２．」で足りないときはテキストエディタで直接編集する
の手順となります。
それでは詳細を書いていきます。
まず予備知識として、初期状態では
data\
Smarty\
templates\
admin\（←管理画面）
default\（←PC）
mobile\（←携帯）
sphone\（←スマホ）
Smarty\
templates\
admin\（←管理画面）
default\（←PC）
mobile\（←携帯）
sphone\（←スマホ）
の中にHTMLの元ネタ（テンプレート）が入っています。
また
html\
user_data\
packages\
admin\（←管理画面）
default\（←PC）
mobile\（←携帯）
sphone\（←スマホ）
user_data\
packages\
admin\（←管理画面）
default\（←PC）
mobile\（←携帯）
sphone\（←スマホ）
の中にCSSやJavaScript、画像ファイルが入っています。
「過去は振り返らないぜ！」という男前な人は、
これらのファイルを直接編集するのもアリかもしれませんね。
ですが、普通の人はテンプレートを複製してからあれやこれやしましょう。
まずは管理画面にログインします。
次に上のメニューから
デザイン管理
↓
PC
↓
テンプレート設定
↓
PC
↓
テンプレート設定
と移動します。
そうすると、こんな画面が表示されるはずですφ（－－）
※クリックで拡大します
ここでテンプレートの右にある「ダウンロード」リンクを押して、
現在のテンプテートをローカルに保存します。
現在のテンプレートをローカルに保存したら、上のメニューから
デザイン管理
↓
PC
↓
テンプレート追加
↓
PC
↓
テンプレート追加
と移動します。
そうすると、こんな画面が表示されるはずですφ（－－）
※クリックで拡大します
この画面から、先程ローカルに保存したテンプレートをアップロードします。
テンプレートコードには半角英数で任意の名前を入力してください。
この名前がテンプレートを格納するフォルダの名前になります。
テンプレート名も任意の名前を入力してください。こちらは日本語でも良いです。
テンプレート名は「テンプレート設定」画面でテンプレートを識別するための名前として使われます。
テンプレートファイルは先程ローカルに保存したファイルを指定します。
私はテンプレートコードに「test01」、テンプレート名に「テスト01」を指定し、
こんな感じにしましたφ（－－）
※クリックで拡大します
準備ができたら「この内容で登録する」ボタンを押します。
テンプレートファイルをアップロードしました。
というダイアログが表示されれば、アップロード完了です。
再度、上のメニューから
デザイン管理
↓
PC
↓
テンプレート設定
↓
PC
↓
テンプレート設定
と移動すると、アップロードしたテンプレートが追加されているはずです。
私の環境では、こんな感じになりましたφ（－－）
※クリックで拡大します
私はこの状態から「テスト01」を選択し「この内容で登録する」ボタンを押しました。
使用するテンプレートを「デフォルト」から「テスト01」に切り替えたのです。
これで、好き勝手にいじっても安心な状態になりました。
普段は「テスト01」が使われるので、デザインをカスタマイズするときは
「テスト01」のテンプレートに対して変更を加えます。
何かおかしくなった際には、テンプレートを「デフォルト」に切り替えれば
取りあえずは動く状態に戻る理屈です。
なお、追加したテンプレートのファイルは
data\
Smarty\
templates\
test01\
Smarty\
templates\
test01\
の中にHTMLの元ネタ（テンプレート）が入っています。
CSSやJavaScript、画像ファイルは
html\
user_data\
packages\
test01\
user_data\
packages\
test01\
の中です。
テキストエディタで直接変更を加える場合は、これらのファイルを修正することになります。
これで、下準備はバッチリです。
あとは自由にカスタマイズしてください。
メニューの「デザイン管理」からでも多くのことができますし、
テンプレートファイルを直接編集すれば、可能性は無限大ですよ。
あっ、そうそう。
携帯（モバイル）やスマホ（スマートフォン）のレイアウト変更も、やり方はPCと同じです。
テンプレートを複製して、管理画面から変更するなりファイルを直接編集するなりしてください。
注意点として、管理画面のレイアウトを変更したい場合は、
data\
Smarty\
templates\
admin\
Smarty\
templates\
admin\
の中のHTMLの元ネタ（テンプレート）や
html\
user_data\
packages\
admin\
user_data\
packages\
admin\
の中のファイル類をテキストエディタで直接編集する必要があります。
例えば、私は管理画面ログイン直後のHOME画面に表示されるお知らせがいらなかったので
data\
Smarty\
templates\
admin\
home.tpl
Smarty\
templates\
admin\
home.tpl
を開き、27行目近辺の
<!--{* お知らせここから *}-->
<div id="home-info">
<!--{foreach item=info from=$arrInfo}-->
<dl class="home-info-item">
<dt class="date"><!--{$info.disp_date|sfDispDBDate:false|h}--></dt>
<dt class="title"><!--{$info.title}--></dt>
<dd class="body"><!--{$info.body}--></dd>
</dl>
<!--{/foreach}-->
</div>
<!--{* お知らせここまで *}-->
<div id="home-info">
<!--{foreach item=info from=$arrInfo}-->
<dl class="home-info-item">
<dt class="date"><!--{$info.disp_date|sfDispDBDate:false|h}--></dt>
<dt class="title"><!--{$info.title}--></dt>
<dd class="body"><!--{$info.body}--></dd>
</dl>
<!--{/foreach}-->
</div>
<!--{* お知らせここまで *}-->
を
<!--{* お知らせここから *}-->
<!--{***************************
<div id="home-info">
<!--{foreach item=info from=$arrInfo}-->
<dl class="home-info-item">
<dt class="date"><!--{$info.disp_date|sfDispDBDate:false|h}--></dt>
<dt class="title"><!--{$info.title}--></dt>
<dd class="body"><!--{$info.body}--></dd>
</dl>
<!--{/foreach}-->
</div> ***************************}-->
<!--{* お知らせここまで *}-->
<!--{***************************
<div id="home-info">
<!--{foreach item=info from=$arrInfo}-->
<dl class="home-info-item">
<dt class="date"><!--{$info.disp_date|sfDispDBDate:false|h}--></dt>
<dt class="title"><!--{$info.title}--></dt>
<dd class="body"><!--{$info.body}--></dd>
</dl>
<!--{/foreach}-->
</div> ***************************}-->
<!--{* お知らせここまで *}-->
のように変更してコメントアウトしました。
そうしたら、元々こんな感じの画面だったのがφ（－－）
※クリックで拡大します
こんな感じの画面に変わりましたφ（－－）
※クリックで拡大します
なんか左に寄ってて美しくないですね。
バランスを整えましょう。
html\
user_data\
packages\
admin\
css\
admin_contents.css
user_data\
packages\
admin\
css\
admin_contents.css
を開き
1045行目近辺の
#home-main {
margin-right: 300px;
}
margin-right: 300px;
}
を
#home-main {
/* margin-right: 300px; */
margin-right: 0px;
}
/* margin-right: 300px; */
margin-right: 0px;
}
のように変更したところ、バランスが良くなりましたφ（－－）
※クリックで拡大します
これが管理画面のレイアウト変更の一例です。
その他のテンプレートを直接編集する際も、やり方は同じです。
長くなったので最後にもう一度まとめておきますね。
EC-CUBEのレイアウトの変更は、管理画面の「デザイン管理」からも行えますし
ファイルをテキストエディタ等で直接編集する形でも可能です。
ただし管理画面のレイアウト変更は、管理画面からはできません。
直接ファイルを編集する必要があります。
テンプレート関連のファイル類は、HTMLの元ネタ（テンプレート）が
data\
Smarty\
templates\
admin\（←管理画面）
default\（←PC）
mobile\（←携帯）
sphone\（←スマホ）
Smarty\
templates\
admin\（←管理画面）
default\（←PC）
mobile\（←携帯）
sphone\（←スマホ）
の中に、CSSやJavaScript、画像ファイルが
html\
user_data\
packages\
admin\（←管理画面）
default\（←PC）
mobile\（←携帯）
sphone\（←スマホ）
user_data\
packages\
admin\（←管理画面）
default\（←PC）
mobile\（←携帯）
sphone\（←スマホ）
の中に入っています。
またテンプレートを追加した場合は
data\
Smarty\
templates\
Smarty\
templates\
配下、および
html\
user_data\
packages\
user_data\
packages\
配下にテンプレートコードで指定した名前でフォルダが作成され、ファイル類はその中に保存されます。
テキストエディタ等で直接編集する際は、これらのファイル類を編集してください。
また、個人的には、レイアウトを変更する際には
現在のテンプレートをダウンロード
↓
テンプレートの追加
↓
テンプレートの追加
を行い、元のテンプレートを複製してから変更した方が無難だと考えています。
動かなくなったら涙目ですからね。
最悪の場合でも最初の状態に戻せるようにしておいた方が良いと思いますよ。
そんな感じ＼（－－）／
