デザイン変更の例

このエントリーをはてなブックマークに追加

  1. リンク文字列のカラーをブルー(#014ead)からオレンジ(#f27a00) に変更する
  2. 文字のフォントサイズやカラーを変更する
  3. ボタンデザインを変更する
  4. ショップフロントの背景を変更する
  5. フッターの「Powered by CS-Cart」を変更する

変更例 1.

リンク文字列のカラーをブルー(#014ead)からオレンジ(#f27a00) に変更します。

STEP01.
ディレクトリ

skins/[利用中のスキン名]/customer/addons/my_changes/hooks/index/

にフックテンプレートファイル styles.post.tpl を作成します。ファイルの内容は以下の通りです。

<link href="{$config.skin_path}/addons/my_changes/styles.css" rel="stylesheet" type="text/css" />

STEP02.
ディレクトリ

skins/[利用中のスキン名]/customer/addons/my_changes/

にスタイルシート styles.css を作成します。ファイルの内容は以下の通りです。

a, a:visited, a:hover, a:active {
	color: #f27a00;
}

変更例 2.

文字のフォントサイズやカラーを変更します。

STEP01.
ディレクトリ

skins/[利用中のスキン名]/customer/addons/my_changes/hooks/index/

にフックテンプレートファイル styles.post.tpl を作成します。ファイルの内容は以下の通りです。

<link href="{$config.skin_path}/addons/my_changes/styles.css" rel="stylesheet" type="text/css" />

STEP02.
ディレクトリ

skins/[利用中のスキン名]/customer/addons/my_changes/

にスタイルシート styles.css を作成します。ファイルの内容は以下の通りです。

・メインのフォントタイプ / フォントサイズ / カラーの変更

body, div, p {
	color: #353535;
	font: normal 13px Verdana, Arial, sans-serif;
}

・ボタン用フォントの変更

.button a, .button-action a, .button-submit-action input, .button-submit input, .button-submit-big input {
	color: #505050;
	font: bold 12px Arial, sans-serif;
}

・トップメニューに表示されるタブ（非選択時）用フォントの変更

#top_menu ul li.first-level a, #top_menu ul li.first-level a:hover {
	color: #000000;
	font: bold 12px Verdana, Arial, sans-serif;
}

・トップメニューに表示されるタブ（選択時）用フォントの変更

#top_menu ul li.first-level.cm-active a, #top_menu ul li.first-level.cm-active a:hover {
	color: #000000;
	font: bold 12px Verdana, Arial, sans-serif;
}

・サイドボックス（通常）のタイトル用フォントの変更

.sidebox-title span {
	color: #ffffff;
	font: normal 16px Verdana, Arial, sans-serif;
}

・サイドボックス（重要）のタイトル用フォントの変更

.sidebox-categories-wrapper .sidebox-title span {
	color: #ffffff;
	font: normal 16px Verdana, Arial, sans-serif;
}

・第2レベルのヘッダー用フォントの変更

.subheader, .subheader-first-item {
	color: #2d2e2e;
	font: bold 14px Arial, Helvetica, sans-serif;
}

・第3レベルのヘッダー用フォントの変更

.subheader2 {
	font: bold 11px tahoma, arial, verdana, sans-serif;
	padding-bottom: 3px;
	margin: 10px 0 2px 0;
}

・ラベル用フォントの変更

.form-field label {
	font: normal 12px verdana, geneva, arial, helvetica, sans-serif;
}

・コピーライト表示用フォントの変更

.bottom-copyright {
	color: #ffffff;
	font: 11px Arial, Helvetica, sans-serif;
}

変更例 3.

ボタンデザインを変更します。

STEP01.
ディレクトリ

skins/[利用中のスキン名]/customer/addons/my_changes/hooks/index/

にフックテンプレートファイル styles.post.tpl を作成します。ファイルの内容は以下の通りです。

<link href="{$config.skin_path}/addons/my_changes/styles.css" rel="stylesheet" type="text/css" />

STEP02.
画像編集ソフトなどで以下のボタン用画像を作成します。各画像の横幅は200px未満に設定してください。

通常ボタン（「送信」ボタンのようなブルーのボタン）用画像

ボタンの左側用： skins/[利用中のスキン名]/customer/images/but_left_action.gif
ボタンの右側用： skins/[利用中のスキン名]/customer/images/but_right_action.gif

・アクションボタン（「カートに追加」ボタンのようなオレンジのボタン）

ボタンの左側用： skins/[利用中のスキン名]/customer/images/but_left.gif
ボタンの右側用： skins/[利用中のスキン名]/customer/images/but_right.gif

STEP03.
ディレクトリ

skins/[利用中のスキン名]/customer/addons/my_changes/

にスタイルシート styles.css を作成します。ファイル内容の例は以下の通りです。

/* Buttons */
.button a, .button-action a, .button-submit-action input, .button-submit input, .button-submit-big input {
	/* defines general properties of buttons, the font color and typeface, and padding */
	color: #ffffff;
	font: bold 12px Tahoma;
	padding: 2px 8px 3px 8px;
}

.button-submit-action, .button-submit, .button-submit-big, .button, .button-action {
	/* defines the right part of the background for action button and height */
	background: #ef3800 url('images/but_right_action.gif') no-repeat right top;
	height: 21px;
}

.button-submit-action, .button-action {
	/* right padding in action button for all browsers */
	padding-right: 17px;
}

.button-submit-action, .button-action, x:-moz-any-link {
	/* right padding in action button only for Firefox */
	padding-right: 15px;
}

.button-submit-action input, .button-submit input, .button-submit-big input, .button-action a {
	/* defines the left part of the background for action button, height and padding */
	background: transparent url('images/but_left_action.gif') no-repeat left top;
	padding: 3px 0px 4px 9px;
	height: 21px;
	line-height: 14px;
}

.button-submit-action input, .button-submit input, .button-submit-big input, .button-action a {
	/* removes borders and margins */
	border: 0px none;
	margin: 0px;
}

.button-submit-action input, .button-submit input, .button-submit-big input, .button-action a, x:-moz-any-link {
	/* defines padding for Firefox */
	padding: 1px 0px 4px 6px;
}

.button-submit, .button {
	/* defines the right part of the background for regular button and right padding */
	background: #41ae0e url(images/but_right.gif) no-repeat right top;
	padding-right: 1px;
}

.button-submit input, .button a {
	/* defines the left part of the background for regular button and right padding */
	background: url(images/but_left.gif) no-repeat left top;
	font: bold 12px Tahoma;
	padding: 1px 6px 2px 5px;
}

.button-submit input {
	padding-bottom: 4px;
	line-height: 16px;
}
/* /Buttons */

STEP04.
ディレクトリ

skins/[利用中のスキン名]/customer/addons/my_changes/

にInternet Explorer6用のスタイルシート styles_ie.css を作成します。ファイル内容の例は以下の通りです。

.button-action a {
	padding-top: 3px;
}

.button-submit-action {
	padding-right: 17px;
}

.button-submit-action input {
	padding: 0px 0px 0px 9px;
	margin: 0px;
	width: 1%;
}

変更例 4.

ショップフロントの背景を変更します。

STEP01.
ディレクトリ

skins/[利用中のスキン名]/customer/addons/my_changes/hooks/index/

にフックテンプレートファイル styles.post.tpl を作成します。ファイルの内容は以下の通りです。

<link href="{$config.skin_path}/addons/my_changes/styles.css" rel="stylesheet" type="text/css" />

STEP02.
ディレクトリ

skins/[利用中のスキン名]/customer/addons/my_changes/

にスタイルシート styles.css を作成します。ファイルの内容は以下の通りです。

・背景色の変更

body {
	background: #f5f5f5 none;
}

・背景に画像を使用（「Sport」スキンの様に横方向に繰り返し表示する場合）

body {
	background: #b4b4b4 url('images/body_bg.png') repeat-x left top;
}

・背景に画像を使用（「Basic」スキンの様に縦方向に繰り返し表示する場合）

body {
	background: #f1f6f9 url('images/body_bg.gif') repeat-y center top;
}

・背景に画像を使用（繰り返し表示なしの場合）

body {
	background: transparent url(images/body_bg.png) no-repeat center top;
	/* the parameters "center" and "top" specify the position of the background image, the parameters "left, center, right" and "top, center, bottom" can be used */
}

変更例 5.

フッターの 「Powered by CS-Cart」 を変更します。

STEP01.
ディレクトリ

skins/[利用中のスキン名]/customer/addons/my_changes/hooks/index/

にフックテンプレートファイル bottom.override.tpl を作成します。ファイルの内容は以下の通りです。

・「Powered by CS-Cart」を非表示にする

<p class="bottom-copyright class">&copy; {if $smarty.const.TIME|date_format:"%Y" != $settings.Company.company_start_year}{$settings.Company.company_start_year}-{/if}{$smarty.const.TIME|date_format:"%Y"} {$settings.Company.company_name}.
</p>

・文字列「CS-Cart」を「Your company name」に変更する

<p class="bottom-copyright class">&copy; {if $smarty.const.TIME|date_format:"%Y" != $settings.Company.company_start_year}{$settings.Company.company_start_year}-{/if}{$smarty.const.TIME|date_format:"%Y"} {$settings.Company.company_name}. &nbsp;{$lang.powered_by} <a href="http://www.your_company_name.com" target="_blank">Your company name</a>
</p>

コメントを書く