最終階の4回目はEC-CUBEカスタマイズ編です。

第一回の入門編、第二回の準備編は下記リンクからどうぞ！
EC-CUBEを使ってネットショップ作り – 入門編
EC-CUBEを使ってネットショップ作り – 準備編
EC-CUBEを使ってネットショップ作り – 導入編

目次

1. HTMLの変更
2. CSSの変更と追加
3. 画像の追加と表示
4. まとめ
5. EC-CUBEシリーズの総まとめ

HTML（tplファイル）の変更

変更方法は大きく分けて、2つあります。

• 管理画面から変更
• tplファイルを直接変更

管理画面からの方が簡単にできますが、
慣れてくると管理画面からいちいち変更するのは面倒くさくなるかもしれません。

などで両方ご紹介！

管理画面から変更

1.管理画面にログイン

2.上部メニュー「デザイン管理」にカーソルを合わせると更にメニューが出てくる。「PC」→「ページ詳細設定」をクリック。

3.ページ下部へ行くと、編集可能なページが出ていので、編集したいページの「ページ詳細」の「編集」をクリック。

4.ソースコードが出てくるので変更して、「登録する」をクリック。

ページではなく、フッターやヘッダー、ブロックなどを変更したい場合は、
2の時に変更したい物を選択する。

tplファイルを直接変更

1.FTPソフトで変更したいtplファイルをダウンロードする。場所は・・・
data/Smarty/templates/default/

2.tplファイルを開き変更・保存する

3.アップロードする。

HTMLの変更は、●●.tplファイルを変更します。
どこにあるかというと・・・・

にあります。

ページ上部へ

CSSの変更

CSSを変更する場合もHTML（tplファイル）を変更するとき同様、2つの変更方法があります。

管理画面から変更

管理画面から変更する際は、
前章の管理画面から変更の2で、「CSS設定」を選択して下さい。

CSS変更する場合は、変更したいCSSの「編集」をクリックして編集して下さい。

CSSを追加する場合は、ページ下部の見出し「編集可能なCSSをファイル」の下にある、
「CSSを新規入力」をクリックして下さい。

【CSSファイル名】には、お好きなCSS名を入力
【CSSファイ内容】には、追加するCSSを入力

入力が終わったら、「この内容で登録する」をクリックし登録して下さい。

CSSファイルを直接変更

1.FTPソフトで変更したいtplファイルをダウンロードする。場所は・・・
user_data/packages/default/css/

2.CSSファイルを開き変更・保存する

3.アップロードする。

CSSファイルを直接追加

1.FTPソフトで追加したいCSS、ファイルをアップロードする。場所は下記
user_data/packages/default/css/

2.import.cssをダウンロード

3.impot.cssを開き、下記を追加

@import url("./■■.css");

4.アップロード

import.cssでまとめてcssを読み込んでいるので、
cssファイルを新しく追加する場合は、下記をimport.cssに追記する必要があります。

ページ上部へ

画像の追加と表示

FTPソフトで画像をアップロードします。
保存されている場所は、
user_data/packages/default/img/

使用する部分によって、画像の保存場所がフォルダ分けされています。
commonだったり、buttonだったり・・・。

新しくフォルダを作って、自分で作った画像がわかるようにしたり等、
そのへんはうまくやって下さいｗ

画像を表示させる時は・・・

<img src="<!--{$TPL_URLPATH}-->/img/保存したフォルダ名/▲▲.jpg">

これで表示ができます。

http://ec-cube.im-goto6.com/user_data/packages/default/img/保存したフォルダ名（なくても可）/▲▲.jpg

なんて書かなくても、

<!--{$TPL_URLPATH}-->

でスパっとimg手前まで表示してくれるのです！

ページ上部へ

まとめ

今回はものすごく基本的なカスタマイズをご紹介しました。
機能的なカスタマイズも掲載しようと思いましたが、一つの章（1つのカスタマイズ）が長くなりそうなので、機会があれば一つ一つ詳しくご紹介できたらと思います。

しかし、今回ご紹介した知識のみで機能的な変更は難しいですが、これさえ出来ればデザインの変更などは可能です。
あとは、HTMLとcssを駆使して変更してみて下さい。

実際に触って、壊して、学んでいく事をおすすめします。
そのほうが数倍早く身につきますし、壊し方や直し方まで学べます。

壊れたって、一回消して再インストールすればいいんですからｗ

ページ上部へ

EC-CUBEシリーズの総まとめ

これでEC-CUBEでネットショップシリーズは終わりです。

基礎の基礎くらいしかご紹介していませんが、後はいじっていじり倒して、学んで下さい。

そのほうが早いかと思いますｗ

EC-CUBEに関するカスタマイズは、応用編（機能的なカスタマイズ）などまだまだあるので、
機会があればご紹介いたします。

私自身も更に勉強を重ね、更にレベルアップして行きたいと考えてます！
それでは。

ページ上部へ