自分だけのZenCartを作ろう

正直いってZenCartもともとのデザインってイマイチですよね、そのままショップを運営ができなくはないけど出来るなら自分だけのデザインでショップをアピールしたいものです。

だけど「ZenCartのデザインカスタマイズって難しそう」「PHPわかんない」ってあきらめている方も多いのでは？

でも大丈夫！HTMLとCSSをちょっとかじった方ならPHPなんて知らなくても手軽な方法でZenCartを自分だけのデザインに仕上げることが出来ます。

下のBefore→Aftrerを見てください。そんなに難しいことをしなくても、ここまでデザインを変えることができちゃうんです！

わかりやすい解説動画も用意していますので、どんどん挑戦してみましょう！

(1) ZenCartを動かすための準備

まずは自由にカスタマイズできるZenCartを用意しないといけません。最近ではZanCartが利用出来るレンタルサーバーもたくさんありますが、FTPでいちいちファイルをアップロードしないといけなかったりめんどくさいですよね、それにレンタル料金もかかってしまいますよね。

そこで普段使っているパソコン内でZenCartを動かしてしまいましょう、しかも無料で！！

ZenCartを動かすために必要なソフトをワンパッケージにした「XAMPP」というフリーソフトがあります、XAMPPを利用すればいつでも好きなだけZenCartをカスタマイズできます。XAMPPのインストールはとっても簡単です。難しい説明は抜きにして解説動画を見てXAMPPをインストールしてみましょう。

別ウィンドウで再生します(再生時間 03:45)

(2) ZenCartのインストール

さあ準備完了！これでZenCartを動かすための環境の出来上がりです。

次はいよいよZenCartをインストールしますよ。このインストールが終われば自由自在にZenCartを動かすことが出来ちゃいます。

さっそく解説動画を見て始めましょう。

今回は動画が2種類あるので順番に見てくださいね！

動画1

別ウィンドウで表示します(再生時間 05:08)

動画2

別ウィンドウで表示します(再生時間 06:20)

(3)ZenCartのセキュリティ設定

ZenCartのインストールが完了しました。

続いて「ZenCartのセキュリティ設定」をしましょう。

この設定をすることで不正なアクセス・攻撃からショップを守ることができ安全対策がバッチリです！

別ウィンドウで表示します(再生時間 03:18)

(4)ショップのデザイン変更

実際にZenCartのショップを見てどう思われましたか？

最初のほうでも触れましたが、正直なんだかイマイチですよね。

「もっとカッコいいショップをつくりたい！」「自分好みのデザインにしたい！！」そう思ったのではないでしょうか？

まず手始めに簡単なデザインの変更をしてみましょう。

自分専用のテンプレートを作ろう

ZenCartには「classic」「template_default」という2つのテンプレートセットが用意されています。これらのテンプレートを使ってショップを作ることも出来ますが、自分専用のテンプレートを作るために必要なデータなので手を加えず大切に取っておきましょう。今回は「template_default」のデータを利用し自分専用のテンプレートを作っていきます。「なんでワザワザ自分専用のテンプレートを作るの？」「最初からあるやつでいいんじゃないの？」と疑問に思いますよね。その答えは「失敗を最小限にするため」です。もし失敗した場合でも元のデータが残っているので、何度でも新しいテンプレートを作ることができ、やり直しができるんです！

1. フォルダの作成

テンプレート作りに必要なデータを入れておくフォルダを作りましょう。今回はフォルダ名を「myshop」とします。

ローカルディスク(C)\xampp\htdocs\myshop\includes\templatesに新しいフォルダ「myshop」を作成します。

2. データをコピー

「template_default」の中からフォルダ「css」と「template_info_php」をコピーします。

フォルダ「myshop」に貼り付けましょう。

3. データの編集

コピーした「template_info_php」の内容を自分専用のテンプレート用に書き換えましょう。

フォルダ「myshop」の「template_info_php」を開きます。

ファイル　→　開きなおす　→　「EUC」にチェックを入れます。

「template_info.php」の11行目から15行目にかけてを変更します。

変更前

        $template_name = 'Default Template';
        $template_version = 'Version 1.0';
        $template_author = 'Zen Cart Team (c) 2003';
        $template_description = 'This template set (中略) required; logo.jpg, header_bg.jpg, and tile_back.jpg.';
        $template_screenshot = 'scr_template_default.jpg';

変更後

        $template_name = 'MyShop専用のテンプレート';
        $template_version = 'Version 1.0';
        $template_author = '私の名前';
        $template_description = 'テンプレートの説明文';
        $template_screenshot = 'myshop_template.jpg';

4. フォルダの作成

デザイン変更時に使う画像を保存するフォルダを作りましょう。フォルダ「myshop」にフォルダ「images」を作成します。

5. 確認

ちゃんとテンプレートが作成されているかZenCartの管理画面へアクセスし確認してみましょう。 http://localhost/myshop/admin/ へアクセスしログインして管理ページを開きます。

追加設定・ツールの「テンプレートの設定」をクリックします。

「myshop専用のテンプレート」が作成されています。

6. テンプレートの設定

今は「classicテンプレート」が設定されているので「myshop専用のテンプレート」を設定しましょう。編集をクリックします。

テンプレート名の「myshop専用のテンプレート」を選択し、更新をクリックします。

更新されました。

オンラインショップを見て「myshop専用のテンプレート」が表示されている確認しましょう。オンラインショップをクリックします。

「myshop専用のテンプレート」が表示されています。

サイドボックスを表示しよう

先程オンラインショップを見ても分かるように、今のままでは物足りないですよね。図のオレンジ枠内にサイドボックスを表示しZenCartの特徴でもある「多彩なトップページ」にしましょう。

1. 設定画面を開く

設定画面を開きサイドボックスを表示するように設定を変更しましょう。

管理画面を開きます。

追加設定・ツール　→　サイドボックスの表示設定をクリックします。

設定画面が開きました。リセットボタンをクリックします。

2. 確認

サイドボックスが表示されたか確認してみましょう。オンラインショップをクリックします。

サイドボックスが表示されました。

CSSを準備しよう

次の手順からCSSの出番です！ZenCartのデザインカスタマイズには欠かせない存在ですね。

1. ファイルを開く

「自分専用のテンプレートをつくろう」手順2で作成したフォルダ「CSS」の中の「stylesheet.css」を開きましょう。開くときは「EUC」に対応しているテキストエディタで開いてください。Go!Go!ZenCartでは「Peggy Pad」というエディタを使用しました。

2. ファイルを開きなおす

「ファイル→開きなおす」の「EUC」にチェックを入れます。

サイト全体の幅・配置を変えよう

CSSを使ってデザインを変えていきましょう！

先ほど準備したCSSとオンラインショップ画面を表示しておきましょう。

サイト全体の幅を変えてみましょう。今の段階では画面の横幅いっぱいになるよう指定されています。

1. ソースの書き換え

CSSの166行目「#mainWrapper」で横幅が「width: 100%;」と指定されています。これを「width: 750px;」と書きかえ上書き保存します。

変更前

    #mainWrapper {
    	background-color: #ffffff;
    	text-align: left;
    	width: 100%;
    	vertical-align: top;
    	}

変更後

    #mainWrapper {
    	background-color: #ffffff;
    	text-align: left;
    	width: 750px;
    	vertical-align: top;
    	}

2. オンラインショップで確認

ブラウザの更新をクリックし確認しましょう。横幅が750pxになりました。

3.

ヘッダー内の文字が収まっていませんので直しましょう。

CSSの237行目の「#navMain ul li, #navSupp ul li, #navCatTabs ul li」に「white-space: nowrap;」と記述されています。これを「/*white-space: nowrap;*/」と書きかえ上書き保存します。

変更前

    #navMain ul li, #navSupp ul li, #navCatTabs ul li {
    	display: inline;
    	white-space: nowrap;
    	}

変更後

    #navMain ul li, #navSupp ul li, #navCatTabs ul li {
    	display: inline;
    	/*white-space: nowrap;*/
    	}

4. オンラインショップで確認

ブラウザの更新をクリックし確認します。

文字が収まりました。

ヘッダーのデザインを変えよう

画像のオレンジ枠内の部分に背景画像を表示しましょう。

ヘッダーナビに背景画像を表示しよう

ヘッダーナビの背景には「#9a9a9a」という色が指定されています。画像を指定する記述を加え背景に画像を表示しましょう。

1. 画像を用意

幅750×高さ25の画像（header_1.gif）をフォルダ「images」用意します。（画像は全て「自分専用のテンプレートを作ろう」の手順4で作成したフォルダ「images」に保存してくださいね。）

2. ソースの書き換え

CSSの220行目「#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper」とあります。今のままですとヘッダーナビ（#navMainWrapper）以外も一緒に指定されているので3つを個別に書きかえます。

変更前

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}

変更後

#navMainWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}
	
#navSuppWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}
	
#navCatTabsWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}

次にCSSの220行目「#navMainWrapper」に画像（header_1.gif）を指定する記述「background: url(../images/header_1.gif) left top no-repeat;」を加え上書き保存します。

変更前

#navMainWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}

変更後

#navMainWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	background: url(../images/header_1.gif) left top no-repeat;	
	｝

3. オンラインショップで確認

ブラウザの更新をクリックし確認します。ヘッダーナビに背景画像が表示されました。　

カテゴリタグに背景画像を表示しよう

カテゴリタグにの背景には「#9a9a9a」という色が指定されています。画像を指定する記述を加え背景に画像を表示しましょう。

1. 画像を用意

幅750×高さ25の画像（header_2.gif）をフォルダ「images」用意します。

2. ソースの書き換え

CSSの239行目「#navCatTabsWrapper」に画像（header_2.gif）を指定する記述「background: url(../images/header_2.gif) left top no-repeat;」を加え上書き保存します。

変更前

#navCatTabsWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}

変更後

#navCatTabsWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	background: url(../images/header_2.gif) left top no-repeat;
	}

3. 確認

ブラウザの更新をクリックし確認します。背景画像が表示されました。

EZページナビに背景画像を表示しよう

EZページナビの背景には「#ffff33;」という色が指定されています。画像を指定する記述を加え背景に画像を表示しましょう。

1. 画像を用意

幅750×高さ23の画像（header_3.gif）をフォルダ「images」に用意します。

2. ソースの書きかえ

CSSの300行目「#navEZPagesTop」に画像（header_3.gif）を指定する記述「background: url(../images/header_3.gif) left top no-repeat;」を加え上書き保存します。

変更前

#navEZPagesTop {
	background-color: #ffff33;
	}

変更後

#navEZPagesTop {
	background-color: #ffff33;
	background: url(../images/header_3.gif) left top no-repeat; 
	}

3. 確認

ブラウザの更新をクリックし確認します。背景画像が表示されました。

パンくずリストのデザインを変えよう

パンクズリストの背景には「#cc9900」という色が指定されています。背景色の指定（background-color: #cc9900;）をコメントアウトし表示しないようにしましょう。

1. ソースの書きかえ

CSSの296行目「#navBreadCrumb 」で背景色が「background-color: #cc9900;」と指定されています。これを「/*background-color: #cc9900;*/」書き換え上書き保存します。

変更前

#navBreadCrumb {
	background-color: #cc9900;
	}

変更後

#navBreadCrumb {
	/*background-color: #cc9900;*/
	}

2. 確認

ブラウザの更新をクリックし確認します。背景色の表示がなくなりました。

サイドボックスのデザインを変えよう

画像のオレンジ枠内に画像を表示しデザインを変えましょう。

サイドボックスタイトルに背景画像を表示しよう

背景色の表示をなくそう

画像のオレンジ枠内のようにサイドボックスタイトルに色が付けられています。

これはスタイルシートの定義をわかりやすくするためで、背景画像を設定するときには不要です。背景色の指定をコメントアウトし表示しないようにしましょう。

1. ソースの書きかえ

CSSの488行目の「.leftBoxHeading, .centerBoxHeading」で左サイドボックスとセンターボックスが一括で指定されています。これを個別に指定できるように書き変えましょう。

変更前

.leftBoxHeading, .centerBoxHeading  {
	margin: 0em;
	background-color: #FF6699;
	padding: 0.5em 0.2em;
	}

変更後

.leftBoxHeading {
	margin: 0em;
	background-color: #FF6699;
	padding: 0.5em 0.2em;
	}

.centerBoxHeading {
	margin: 0em;
	background-color: #FF6699;
	padding: 0.5em 0.2em;
	}

CSSの488行目の「.leftBoxHeading」で左サイドボックスタイトルの背景色が「background-color: #FF6699;」と指定されています。これを「/*background-color: #FF6699;*/」と書きかえ上書き保存します。

変更前

.leftBoxHeading {
	margin: 0em;
	background-color: #FF6699;
	padding: 0em 0.2em;
	}

変更後

.leftBoxHeading {
	margin: 0em;
	/*background-color: #FF6699;*/
	padding: 0.5em 0.2em;
	}

左サイドボックスの「スポンサー」の部分は個別に指定されています。画像 CSSの554行目「#bannerboxHeading」で背景色が「background-color: #0000CC;」と指定されています。これを「/*background-color: #0000CC;*/」と書き換え上書き保存します。

変更前

#bannerboxHeading {
	background-color: #0000CC;
}

変更後

#bannerboxHeading {
	/*background-color: #0000CC;*/
}

CSSの行目の「.rightBoxHeading」で右サイドボックスの背景色が「background-color: #663366;」と指定されています。これを「/*background-color: #663366;*/」と書き換え上書き保存します。

変更前

.rightBoxHeading {
	margin: 0em;
	background-color: #663366;
	padding: 0.5em 0.2em;
	}

変更後

.rightBoxHeading {
	margin: 0em;
	/*background-color: #663366;*/
	padding: 0.5em 0.2em;
	}

2. 確認

ブラウザの更新をクリックし確認します。サイドボックスタイトルの背景色の表示がなくなり別の背景色が表示されています。ここは後ほど説明しますので今は気にしないでおきましょう！

背景画像を表示しよう

次に画像を指定し背景画像を表示しましょう。

1. 画像を用意

幅150×高さ23の画像（sidebox.gif）を用意します。

2. ソースの書きかえ

CSSの488行目「.leftBoxHeading」で左サイドボックスに画像を（sidebox_1.gif）を指定する記述「background: url(../images/sidebox_1.gif) left top no-repeat;」を加え上書き保存します。

変更前

.leftBoxHeading {
	margin: 0em;
	/*background-color: #FF6699;*/
	padding: 0.5em 0.2em;
	}

変更後

.leftBoxHeading {
	margin: 0em;
	/*background-color: #FF6699;*/
	padding: 0.5em 0.2em;
	background: url(../images/sidebox_1.gif) left top no-repeat;
	}

3. 確認

ブラウザの更新をクリックし確認します。左サイドボックスタイトルに背景画像が表示されました。

4. ソースの書きかえ

CSSの516行目「.rightBoxHeading 」に右サイドボックスに画像（sidebox_1.gif）を指定する記述「background: url(../images/sidebox_1.gif) left top no-repeat;」を加え上書き保存します。

変更前

.rightBoxHeading {
	margin: 0em;
	background-color: #663366;
	padding: 0.5em 0.2em;
	}

変更後

.rightBoxHeading {
	margin: 0em;
	/*background-color: #663366;*/
	padding: 0.5em 0.2em;
	background: url(../images/sidebox_1.gif) left top no-repeat;
	}

5. 確認

ブラウザの更新をクリックし確認します。右サイドボックスタイトルに背景画像が表示されました。

画像を表示しましたが余計な背景色が表示されていますので表示しないようにしましょう。

6. ソースの書きかえ

CSSの312行目「#navColumnOne」で左サイドボックスの背景色が「background-color: #cc9900;」、CSSの316行目「#navColumnTwo」で右のサイドボックスの背景「background-color: #00BFBF;」がそれぞれ指定されています。コメントアウトし表示しないようにしましょう。

変更前

#navColumnOne {
	background-color: #FFCC99;
	}

#navColumnTwo {
	background-color: #00BFBF;
	}

変更後

#navColumnOne {
	/*background-color: #FFCC99;*/
	}

#navColumnTwo {
	/*background-color: #00BFBF;*/
	}

7. 確認

ブラウザの更新をクリックし確認します。背景色の表示がなくなりました。

サイドボックスに枠を入れよう

サイドボックスを枠で囲みましょう。

1. 画像を用意

幅150×高さ（サイドボックス内のメニューが収まる高さ）の画像（sidebox_2.gif）を用意します。

2. ソースの書きかえ

「.sideBoxContent」内で背景色が指定されています。この背景色が表示されたままですと、画像を張り付けたとき色に隠れて表示されなくなってしまいますので、背景色の指定をコメントアウトし表示しないようにしましょう。画像 CSSの506行目「.sideBoxContent」で背景色が「background-color: #ffffff;」と指定されています。これを「/*background-color: #ffffff;*/」と書きかえ上書き保存します

変更前

.sideBoxContent {
	background-color: #ffffff;
	padding: 0.4em;
	}

変更後

.sideBoxContent {
	/*background-color: #ffffff;*/
	padding: 0.4em;
	}

CSSの501行目「.leftBoxContainer」に画像を指定する記述を加えるのですが、今のままでは左サイドボックスしか指定されていません。右サイドボックスも一緒に指定できるようにしましょう。画像 CSS行目「.leftBoxContainer」に右サイドボックスを指定す「.rightBoxContainer 」を加えます。

変更前

.leftBoxContainer {
	border: 1px solid #ffffff;
	margin-top: 1.5em;
	}

変更後

.leftBoxContainer,
.rightBoxContainer {
	border: 1px solid #ffffff;
	margin-top: 1.5em;
	}

CSSの501行目「.leftBoxContainer,.rightBoxContainer 」に画像を（sidebox_2.gif）指定する「background: url(../images/sidebox_2.gif) left bottom no-repeat;」を加え上書き保存します。

変更前

.leftBoxContainer,
.rightBoxContainer {
	border: 1px solid #ffffff;
	margin-top: 1.5em;
	}

変更後

.leftBoxContainer,
.rightBoxContainer {
	border: 1px solid #ffffff;
	margin-top: 1.5em;
	background: url(../images/sidebox_2.gif) left bottom no-repeat;
	}

4. 確認

ブラウザの更新をクリックし確認します。画像が表示されました。それと同時に右のサイドボックスのマージンが左サイドボックスと一緒になりました。これは「.leftBoxContainer」に内に右サイドボックスを指定したのでマージントップが左と同じように「1.5em」空いたからです。

センターブロックのデザインを変えよう

センターブロックの背景には「#FF6699」」という色が指定されています。画像を指定する記述を加え背景に画像を表示しましょう。

1. 画像を用意

幅434×高さ30の画像（centerbox.gif）をフォルダ「images」に用意します。

2. ソースの書きかえ

CSSの495行目「.centerBoxHeading 」に画像（centerbox.gif）を指定する記述「 background: url(../images/centerbox.gif) left top no-repeat;」を加え上書き保存します。

変更前

.centerBoxHeading {
	margin: 0em;
	background-color: #FF6699;
	padding: 0.5em 0.2em;
	}

変更後

.centerBoxHeading {
	margin: 0em;
	background-color: #FF6699;
	padding: 0.5em 0.2em;
	background: url(../images/centerbox.gif) left top no-repeat;
	}

3. 確認

ブラウザの更新をクリックし確認します。画像が表示されました。

フッターのデザインを変えよう

フッタの背景には「#FF6699」」という色が指定されています。画像を指定する記述を加え背景に画像を表示しましょう。

1. 画像を用意

幅750×高さ55の画像（footer.gif）をフォルダ「images」に用意します。

2. ソースの書きかえ

CSSの230行目「#navSuppWrapper」に画像（footer.gif）を指定する記述「background: url(../images/footer.gif) left top no-repeat;」を加え上書き保存します。

変更前

#navSuppWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}

変更後

#navSuppWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	background: url(../images/footer.gif) left top no-repeat;
	}

3. 確認

ブラウザの更新をクリックし表示を確認します。画像が表示されました。

ロゴ・メイン画像のデザインを変えよう

ショップの印象を左右するロゴとメイン画像を変えてみましょう！

ロゴを表示しよう

ロゴはショップの顔！ショップに似合う素敵なロゴを用意しましょう。

ロゴはフォルダ「images」に画像を用意するだけで自動的に表示するようになっています。

1. 画像を用意

幅192×高さ68のロゴ画像（logo.gif）をフォルダ「images」に用意します。

2. 確認

ブラウザの更新をクリックし確認します。自動的にロゴが表示されています。

メイン画像を表示しよう

ショップのメインとなる画像。一目見てショップの雰囲気が伝わるような画像を用意するといいですね。

1. 画像を用意

幅750×高さ100のメイン画像（main.gif）を用意します。

2. ソースの書きかえ

メイン画像を指定するためのセレクタがないので新たに作ります。 CSSの一番下に新たなセレクタ「#logoWrapper」記述する。

#logoWrapper {
	}

「#logoWrapper」に画像（main.gif）を指定する記述「background: url(../images/main.gif) left top no-repeat;」を加え上書き保存します。

変更前

#logoWrapper {
	}

変更後

#logoWrapper {
	background: url(../images/main.gif);
	}

3. 確認

ブラウザの更新をクリックし確認します。画像が表示されました。

表示はされたものの上の部分しか見えてないですよね。画像に合った高さを指定すれば大丈夫ですよ。今回メイン画像は高さ100pxですのでそれに合わせます。

4. ソースの書きかえ

「#logoWrapper」に高さを指定をする「line-height: 100px;」を加え上書き保存します。

変更前


#logoWrapper {
	background: url(../images/main.gif);
	}

変更後

#logoWrapper {
	background: url(../images/main.gif);
	line-height: 100px;
	}

5. 確認

ブラウザの更新をクリックし確認します。高さが指定され、メイン画像がちゃんと表示されました。メイン画像の下に空白がありますので、これをなくしましょう。

6. ソースの書きかえ

CSSの132行目「.clearBoth 」に「height: 0;」「line-height: 0;」と加え上書き保存します。

変更前

.clearBoth {
	clear: both;
	}

変更後

.clearBoth {
	clear: both;
	height: 0;
	line-height: 0;
	}

７. 確認

ブラウザの更新をクリックし確認します。空白がなくなりました。

文字の色を変えよう

画像の貼り付けが終わりましたよ！どうですか？最初に比べ大分雰囲気が変わりましたね。

それに合わせて文字の色も変えていきましょう。

文字の色といっても、クリックされていない、クリック済み、マウスが上に乗った状態、クリックした瞬間とさまざまです。

バランスを考えて配色していきましょう！

基本の文字色を変えよう

ページの基本(画像の黒文字部分)となる文字色を変えましょう。

1. ソースの書きかえ

CSSの11行目「body」で文字色が「color: #000000;」と指定されています。これを「color: #696969;」と書きかえ上書き保存します。

変更前

    body {
    	margin: 0;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 62.5%;
    	color: #000000;
    	background-color: #e5edf5;
    	}

変更後

    body {
    	margin: 0;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 62.5%;
    	color: #696969;
    	background-color: #e5edf5;
    	}

2. 確認

ブラウザの更新をクリックし表示を確認します。基本となる文字色が変わりました。

カテゴリ・タグメニュー、フッダーの文字色を変えよう

カテゴリ・タグメニュー、フッタの文字色（画像のオレンジ枠内）を変えましょう。

1. ソースの書きかえ

CSSの265行目「#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a」で文字色が「color: #ffffff;」と指定されています。これを「color: #696969;」と書きかえ上書き保存します。

変更前

    #navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
    	text-decoration: none;
    	padding: 0em 0.5em;
    	margin: 0;
    	color: #ffffff;
    	}

変更後

    #navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
    	text-decoration: none;
    	padding: 0em 0.5em;
    	margin: 0;
    	color: #696969;
    	}

2. 確認

ブラウザの更新をクリックし確認します。

文字の色が変わりました。

リンクのある文字の色を変えよう

クリックしていない状態、クリック済み、マウスが上に乗った状態、クリックした瞬間とそれぞれ指定することができます。

クリックしていない状態の文字色を変えよう

クリックしていない文字色（画像のオレンジ枠内）を変えましょう。

1. ソースの書きかえ

CSSの21行目「a:link, #navEZPagesTOC ul li a」で文字色が「color: #3300FF;」と指定されています。これを「color: #626063;」と書きかえ上書き保存します。

変更前

    a:link, #navEZPagesTOC ul li a {
    	color: #3300FF;
    	text-decoration: none;
    	}

変更後

    a:link, #navEZPagesTOC ul li a {
    	color: #626063;
    	text-decoration: none;
    	}

2. 確認

ブラウザの更新をクリックし確認します。文字の色が変わりました。

クリック済みの文字色を変えよう

クリック済みの文字色（画像の青色の文字）を変えましょう。

1. ソースの書きかえ

CSSの26行目「a:visited」で文字色が「color: #3300FF;」と指定されています。これを「color: #f39800;」と書きかえ上書き保存します。

変更前


    a:visited {
    	color: #3300FF;
    	text-decoration: none;
    	}

変更後

    a:visited {
    	color: #f39800;
    	text-decoration: none;
    	}

2. 確認

ブラウザの更新をクリックし確認します。

文字の色が変わりました。

マウスが上に乗った状態の文字色を変えよう

マウスが乗った時の文字色（画像の赤色の文字）を変えましょう。

1. ソースの書きかえ

CSSの31行目「a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover」で文字色が「color: #FF0000;」と指定されています。これを「color: #66cc33;」と書きかえ上書き保存します。

変更前

    a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
    	color: #FF0000;
    	}

変更後

    a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
    	color: #66cc33;
    	}

2. 確認

ブラウザの更新をクリックし確認します。

文字の色が変わりました。

クリックした瞬間の文字色を変えよう

クリックした瞬間の文字色（画像の青色の文字）を変えましょう。

1. ソースの書きかえ

CSSの35行目「a:active 」で文字色が「color: #0000FF;」と指定されています。これを「color: #ffd700;」と書きかえ上書き保存します。

変更前

    a:active {
    	color: #0000FF;
    	}

変更後

    a:active {
    	color: #ffd700;
    	}

2. 確認

ブラウザの更新をクリックし確認します。

文字の色が変わりました。

画像

サイドボックスタイトルの文字色を変えよう

サイドボックスタイトルの文字色を変えましょう。

今回は基本の文字色と、マウスが乗った状態の文字色を変えます。

基本の文字色を変えよう

サイドボックスタイトルの文字色（画像のオレンジ枠内）を変えましょう。

1. ソースの書きかえ

CSSの494行目「h3.leftBoxHeading, h3.leftBoxHeading a 」と530行目「h3.rightBoxHeading, h3.rightBoxHeading a」で文字色が「color: #ffffff;」「color: #FFFF00;」とそれぞれ指定されています。これを「color: #696969;」と書きかえ上書き保存します。

変更前

h3.leftBoxHeading, h3.leftBoxHeading a {
	font-size: 1em;
	color: #ffffff;
	}

h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 1.1em;
	color: #FFFF00;
	}

変更後

h3.leftBoxHeading, h3.leftBoxHeading a {
	font-size: 1em;
	color: #696969;
	}

h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 1.1em;
	color: #696969;
	}

2. 確認

ブラウザの更新をクリックし確認します。

文字の色が変わりました。

マウスが上に乗った状態の文字色を変えよう

マウスが上に乗った時の文字色（画像のオレンジ枠内）を変えましょう。

1. ソースの書きかえ

CSSの544行目「h3.leftBoxHeading a:hover」と549行目「h3.rightBoxHeading a:hover」で文字色が「color: #FFFF33;」「color: #FF0000;」とそれぞれ指定されています。これを「color: #ffd700;」と書きかえ上書き保存します。

変更前

h3.leftBoxHeading a:hover {
	color: #FFFF33;
	text-decoration: none;
	} 

h3.rightBoxHeading a:hover {
	color: #FF0000;
	text-decoration: none;
	}

変更後


h3.leftBoxHeading a:hover {
	color: #ffd700;
	text-decoration: none;
	} 

h3.rightBoxHeading a:hover {
	color: #ffd700;
	text-decoration: none;
	}

2. 確認

ブラウザの更新をクリックし確認します。

文字の色が変わりました。

文語を編集しよう

画像のオレンジ枠内の文語を変更しましょう。ご自分のショップに合った言葉を考え、より素敵なショップにしましょう！

フォルダを作成しよう

テンプレートも自分専用の物を作ったように、文語を編集するためにも自分専用のフォルダを作りましょう。

1. ファイルを開く

「ローカルディスク（C）￥xampp\htdocs\myshop\includes\languages\japanese\」を開きます。

2. フォルダを作成

新しいフォルダ「myshop」を作成します。

3. データのコピー

「header.php」と「index.php」をコピーします。

フォルダ「mtyshop」へ貼り付けます。

ヘッダーの文語を編集しよう

ヘッダの「ここにタグライン・キャッチコピーなどを入れてください。」を編集しましょう。今回は「Tシャツ専門店 myshop」という風にショップの説明を入れてみます。

1. ファイルを開く

先程作成したフォルダ「myshop」の中の「header.php」を開きます。

2. データを書きかえる

22行目「define('HEADER_SALES_TEXT', 'ここにタグライン・キャッチコピーなどを入れてください。');」を編集します。

「ここにタグライン・キャッチコピーなどを入れてください。」の部分を「Tシャツ専門店 myshop」に書きかえましょう。変更後は上書き保存を忘れずにしましょう！

変更前

    // added defines for header alt and text
      define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce');
      define('HEADER_SALES_TEXT', 'ここにタグライン・キャッチコピーなどを入れてください。');
      define('HEADER_LOGO_WIDTH', '192px');
      define('HEADER_LOGO_HEIGHT', '64px');
      define('HEADER_LOGO_IMAGE', 'logo.gif');

変更後


    // added defines for header alt and text
      define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce');
      define('HEADER_SALES_TEXT', 'Ｔシャツ専門店ｍｙｓｈｏｐ');
      define('HEADER_LOGO_WIDTH', '192px');
      define('HEADER_LOGO_HEIGHT', '64px');
      define('HEADER_LOGO_IMAGE', 'logo.gif');

3. 確認

ブラウザの更新をクリックし確認します。

文語が「Tシャツ専門店 myshop」に変わりました。

の文語を編集しよう

トップページの「おめでとうございます！オンライン構築ソフトZenCart日本語版のインストールに成功しました。」を編集しましょう。

今回は「myshopへようこそ」という風にお客様への挨拶を入れてみます。

1. ファイルを開く

先程作成したフォルダ「myshop」の中の「index.php」を開きます。

2. データを書きかえる

57行目define('HEADING_TITLE', 'おめでとうございます!オンラインショップ構築ソフトZen Cart 日本語版のインストールに成功しました。');」を編集します。

「おめでとうございます!オンラインショップ構築ソフトZen Cart 日本語版のインストールに成功しました。」の部分を「myshopへようこそ」に書きかえ上書き保存します。

変更前

     define('HEADING_TITLE', 'おめでとうございます!

    オンラインショップ構築ソフトZen Cart 日本語版のインストールに成功しました。');
    } elseif ($category_depth == 'nested') {

変更後

      define('HEADING_TITLE', 'myshopへようこそ');
    } elseif ($category_depth == 'nested') {

3. 確認

ブラウザの更新をクリックし表示を確認します。

文語が「myshopへようこそ」に変わりました。

背景のデザインを変えよう

最後は背景の変更です！背景一つで良くも悪くも変化します。ショップに似合う色や画像を見つけましょう。完成まであともう少しですよ！

背景に画像を表示しましょう。

1. 画像を用意

画像（bg_1.png）を用意します。

2. ソースの書きかえ

CSSの11行目「body」に画像（bg_1.png）を指定する「background: url(../images/bg_1.png) repeat-x;」を加え上書き保存します。

変更前

    body {
    	margin: 0;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 62.5%;
    	color: #696969;
    	background-color: #e5edf5;
    	}

変更後

    body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: 	#696969;
　　　　background: url(../images/bg_1.png) repeat-x;
	background-color: #e5edf5;
		}

3. 確認

ブラウザの更新をクリックし表示を確認します。

背景に画像が表示されました。

(5) 完成

完成です！