サイズカラー編集の項目別で設定しているCSSスタイル
サイズカラー設定では、「メインカラー」「サブカラー1」「サブカラ−2」の3色組み合わせを基調として、
サイト全体の色調を決めています。
メインカラー
メインカラーの設定を行います、色の設定以外にも以下のクラスやセレクタを用いて、スタイル設定が行われています。
CSSスタイル
.utility{border-bottom: 2px solid #FE9E11;} /*ユーザーメニューの下線のスタイル*/
.CrossHead{color: #FE9E11; border-top: 1px solid #FE9E11;} /*中見出しのカラーと上線のスタイル*/
.tblTitle{background-color: #FE9E11;} /*テーブルタイトルの背景色*/
.cartTable{border-top: 2px solid #FE9E11;} /*買物カゴのテーブルの上線のスタイル*/
.cartTable caption{background-color: #FE9E11;} /*買物カゴのテーブルの<caption>タグの背景色*/
.summary th{border-top: 1px dotted #FE9E11;} /*合計金額表示用のテーブルのテーブルヘッダの上線のスタイル*/
.summary td{border-top: 1px dotted #FE9E11;} /*合計金額表示用のテーブルのセルの上線のスタイル*/
.pageTitle{border-left: 3px solid #FE9E11;} /*ページタイトルのボーダー指定*/
.myheader{border-bottom: 3px solid #FE9E11;} /*ページレイアウト設定でデフォルトで使用されているヘッダーHTMLの下線のスタイル*/
↑ページトップに戻る
サブカラー1
サブカラー1の設定を行います、色の設定以外にも以下のクラスやセレクタを用いて、スタイル設定が行われています。
CSSスタイル
.utility .pan{border-top: 2px dotted #FFDA8E;} /*サブカラー1*/
.utility .item{border-top: 1px dotted #FFDA8E;} /*サブカラー1*/
.cartTable th{background-color: #FFDA8E;}
.userTable_01 caption{background-color: #FFDA8E;}
.userTable_02 caption{background-color: #FFDA8E;}
.userTable_02 th{border-bottom: 1px solid #FFDA8E;}
.GoodsSelectionTable .thStrong{background-color: #FFDA8E;}
.myItemSearch th{background-color: #FFDA8E;}
.myItemSearch td{border-bottom: 1px solid #FFDA8E;}
.myleft h3{background-color: #FFDA8E;}
.myleft li a{border-bottom: 1px solid #FFDA8E;}
↑ページトップに戻る
サブカラー2
サブカラー2の設定を行います、色の設定以外にも以下のクラスやセレクタを用いて、スタイル設定が行われています。
CSSスタイル
.cartTable th{border-bottom: 1px solid #FEF1E6;}
.userTable_01 th{background-color: #FEF1E6;}
.userTable_02 th{background-color: #FEF1E6;}
.userTable_02 .thStrong{background-color: #FEF1E6;}
.GoodsSelectionTable th{background-color: #FEF1E6;}
.pageTitle{background-color: #FEF1E6;}
.myheader{background-color: #FEF1E6;}
.myleft li a{background-color: #FEF1E6;}
.myfooter{background-color: #FEF1E6;}
↑ページトップに戻る
a
リンクテキストに装飾するスタイルを指定しています。
CSSスタイル
a:link{color: #FE9E11;} /*リンクの色*/
a:visited{color: ;} /*すでにクリックしたリンクの色*/
a:active{color: ;} /*クリック中のリンク色（active)*/
a:hover{color: ;} /*マウスカーソル通過時の色（hover)*/
↑ページトップに戻る
body
bodyタグにスタイルを指定することで、特に指定されていないテキストのサイズや色を指定したり、
背景に色や画像を指定する事が可能となります。
CSSスタイル
body{color: #000000;} /*(指定のない)文字色*/
body{font-size: 12px;} /*(指定のない)文字サイズ*/
body{line-height: 120%;} /*(指定のない)文字の行間*/
body{background-color: #FFFFFF;} /*背景色*/
body{background-image:url(/shop/item/develop/design/template01/img/null);} /*背景画像*/
body{background-repeat: no-repeat;} /*背景画像の繰り返し*/
body{background-position:top center;} /*背景画像の位置*/
↑ページトップに戻る
.pageTitle
ショップページでページタイトルに使われる見出しのスタイルを指定しています。
HTMLコード
<h3 class="pageTitle">タイトルテキスト</h3>
CSSスタイル
.pageTitle{color: #000000;} /*ページタイトルの文字色*/
.pageTitle{font-size: 16px;} /*ページタイトルのフォントサイズ*/
.pageTitle{line-height: 140%;} /*ページタイトルの行間*/
.pageTitle{border-left: 3px solid #FE9E11;} /*メインカラー*/
.pageTitle{padding: 4px 0px 4px 4px; margin: 10px 0px 10px 0px;} /*サイズカラー設定以外の項目*/
↑ページトップに戻る
.pan
パンくずリンクのリンクテキストのスタイルを指定しています。
HTMLコード
<p class="pan"><a href="">商品カテゴリ一覧 </a> > ページタイトル</p>
CSSスタイル
p.pan, p.pan a{color: #FD7133;} /*パンくずの文字色*/
p.pan{font-size: 10px;} /*パンくずの文字サイズ*/
p.pan{line-height: 120%;} /*パンくずの文字の行間*/
↑ページトップに戻る
.itemGroup
グループカテゴリのタイトル文字の書式スタイルを設定します。
HTMLコード
<h2 class="itemGroup"><a href="#">商品グループテキスト</a></h2>
CSSスタイル
.itemGroup, .itemGroup a{color: #FD7133;} /*グループ・商品名の文字色*/
.itemGroup{font-size: 12px;} /*グループ・商品名の文字サイズ*/
.itemGroup{line-height: 140%;} /*グループ・商品名の文字の行間*/
↑ページトップに戻る
.itemTitle
商品一覧・詳細ページ内での商品タイトルの書式スタイルを設定します。
HTMLコード
<h1 class="itemTitle">商品タイトル</h1>
CSSスタイル
.itemTitle, .itemTitle a{color: #FD7133;} /*商品名の文字色*/
.itemTitle{font-size: 16px;} /*商品名の文字サイズ*/
.itemTitle{line-height: 140%;} /*商品名の文字の行間*/
↑ページトップに戻る
.itemPrice
商品価格の文字色、文字サイズ、行間を設定しています。
HTMLコード
当店特別価格<span class="itemPrice">139,800円</span>(税込)
CSSスタイル
.itemPrice{color: #000099;}
.itemPrice{font-size: 20px;}
.itemPrice{line-height: 140%;}
↑ページトップに戻る
.error_content, .error_item
エラー表示を囲む罫線の色やエラーメッセージの文字色、文字サイズ、行間を設定しています。
HTMLコード
<div class="error_content">申し訳ございません。ご注文は在庫数を超えています。<br></div>
<div class="error_item">販売を終了いたしました。<br></div>
CSSスタイル
.error_content, .error_item{color: #FF0000; border-color: #FF0000;} /*アラート文言の文字色*/
.error_content{font-size: 10px;} /*アラート文言の文字サイズ*/
.error_content{line-height: 120%;} /*アラート文言の文字の行間*/
↑ページトップに戻る
サイズカラー編集の項目以外で設定しているCSSスタイル
.pageTitle
ページタイトル部分のサイズカラー設定で指定出来る項目以外の項目（色の項目以外の）マージン幅などを指定しています。
CSSスタイル
.pageTitle{padding: 4px 0px 4px 4px; margin: 10px 0px 10px 0px;}
↑ページトップに戻る
.CrossHead
中見出し部分のサイズカラー設定で指定出来る項目以外の項目（色の項目以外の）マージン幅などを指定しています。
CSSスタイル
.CrossHead{font-size: 12px; padding: 4px; margin: 0px 0px 0px 0px;} /*中見出し*/
↑ページトップに戻る
.Definition
中見出し部分のサイズカラー設定で指定出来る項目以外の項目（色の項目以外の）マージン幅などを指定しています。
CSSスタイル
.Definition{font-size: 13px; padding: 0px 0px 2px 0px; margin: 20px 0px 5px 0px; border-bottom: 1px solid #CCCCCC;} /*小見出し*/
↑ページトップに戻る
.itemGroup,.itemTitle
サイズ項目設定以外に設定されている、カテゴリタイトル、商品タイトルのスタイルを指定しています。
CSSスタイル
.itemGroup,.itemTitle{margin: 0px 0px 5px 0px;} /*商品名*/
↑ページトップに戻る
.useBorder
商品価格の打消し部分の取消線を設定しています。
HTMLコード
<span class="useBorder">定価139,800円</span>のところ<br>
CSSスタイル
.useBorder{text-decoration: line-through; margin-right: 10px;} /*商品取消線*/
↑ページトップに戻る
.itemPrice
商品価格
HTMLコード
当店特別価格<span class="itemPrice">139,800円</span>(税込)
CSSスタイル
.itemPrice{margin-right:10px font-weight: bold;} /*商品価格*/
↑ページトップに戻る
.catch
キャッチアイコンにスタイルを追加出来ます。
HTMLコード
<img src="/Icon1Button.gif" alt="オススメ" class="catch">
<img src="/Icon2Button.gif" alt="NEW" class="catch">
<img src="/Icon3Button.gif" alt="お得商品" class="catch">
CSSスタイル
.catch{} /*アイキャッチアイコン*/
↑ページトップに戻る
.itemNumber
HTMLコード
<span class="itemNumber">商品番号 ×××</span>
CSSスタイル
.itemNumber{} /*商品番号*/
↑ページトップに戻る
.sellTerms
販売期間部分の書式をスタイルで指定するためのスタイルです
HTMLコード
<span class="sellTerms">【販売期間：2006年1月1日0時0分〜2006年1月1日1時0分】</span>
CSSスタイル
.sellTerms{} /*販売期間*/
↑ページトップに戻る
.tblTitle
アドレス一覧ページで使われているテーブルタイトルについてスタイルを指定しています。
HTMLコード
<p class="tblTitle">全件一覧</p>
CSSスタイル
.tblTitle{margin:0px; padding:4px; display:inline; color: #FFFFFF;} /*テーブルタイトル*/
↑ページトップに戻る
.cartTable
ショッピングカートで用いられるテーブル部分の表示スタイルを指定しています。
CSSスタイル
.cartTable {margin-bottom: 10px; width: 100%;}
.cartTable caption{text-align: left; color: #FFFFFF;} /*カート*/
.cartTable tr{}
.cartTable th{font-weight: bold; padding: 4px;}
.cartTable td{font-size: inherit; padding: 4px; background-color: #FFFFFF; border-bottom: 1px solid #EEEEEE;}
↑ページトップに戻る
.summary
ショッピングカートで用いられるテーブル部分の合計金額部分の表示スタイルを指定しています。
HTMLコード
<tr class="summary">
<th align="right">合計</th>
<td align="right">\139,800</td>
</tr>
CSSスタイル
.summary th{font-size: 120%; font-weight: bold!important;} /*カート部分の合計計算用*/
.summary td{font-size: 140%; font-weight: bold!important;}
↑ページトップに戻る
.userTable_01
主に入力フォーム部分などで使われているテーブルの表示スタイルを指定します。
CSSスタイル
.userTable_01{margin: 0px auto 4px auto; width: 100%; border-top: 1px solid #DDDDDD;}
.userTable_01 caption{text-align: left; font-size: 10px; padding: 4px; border-bottom: none; font-weight: bold; margin: 0px auto;}
.userTable_01 tr{}
.userTable_01 th{padding: 4px; font-weight: bold; border-bottom: 1px solid #DDDDDD;}
.userTable_01 th em{ color: #FF3333; font-style: normal; margin: 0px 5px;}
.userTable_01 td{ background-color: #FFFFFF; padding: 4px; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #DDDDDD;}
.userTable_01 input[type="text"]{margin-right:10px;}
.userTable_01 .thStrong{background-color: #FDFDFD;}
↑ページトップに戻る
.userTable_02
主にデータの内容を表示する場面で使われるテーブルのスタイルを指定します。
CSSスタイル
.userTable_02{margin: 0px auto 10px auto; width: 100%; border-left: 1px solid #EEEEEE; border-top: 1px solid #EEEEEE;}
.userTable_02 caption{ text-align: left; font-size: 10px; padding: 4px; border-bottom: none; font-weight: bold; margin: 0px auto;}
.userTable_02 th{padding: 4px;font-weight: bold;border-right: 1px solid #EEEEEE;}
.userTable_02 td{background-color: #FFFFFF; padding: 4px;border-bottom: 1px solid #DDDDDD;border-right: 1px solid #EEEEEE;}
.userTable_02 input[type="text"]{margin-right:10px;}
.userTable_02 .thStrong{font-weight: normal;}
↑ページトップに戻る
.GoodsSelectionTable
項目選択肢を表示するのに用いられているテーブルのスタイルを指定します。
CSSスタイル
.GoodsSelectionTable{margin: 10px 0px; border-top: 1px solid #DDDDDD; border-left: 1px solid #DDDDDD;}
.GoodsSelectionTable th{font-size: 10px; padding: 4px; font-weight: bold; border-bottom: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD;}
.GoodsSelectionTable td{background-color: #FFFFFF; padding: 4px; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD;}
↑ページトップに戻る
.inputTableArea
入力エリアを囲んで表示されている枠線のスタイルを指定しています。
CSSスタイル
.inputTableArea{border: 6px solid #EEEEEE; width: 95%; margin: 10px auto; padding: 6px; background-color: #F6F6F6;} /*入力対象*/
↑ページトップに戻る
.caution
入力フォームでの注意書きのスタイルを指定しています。
CSSスタイル
.caution{color: #CC0000;} /*注意書き*/
↑ページトップに戻る
.orderFlow
オーダーのフロー図の画像に対してスタイルを指定することができます。
HTMLコード
<div class="orderFlow"><img src="#"></div>
CSSスタイル
.orderFlow{text-align: center; margin: 10px;}/*カートのフロー*/
↑ページトップに戻る
.error_content, .error_item
CSSスタイル
.error_content, .error_item{border-width:2px; border-style:dashed;}/*エラー*/
↑ページトップに戻る
.myheader
デフォルトで設定されているヘッダ部分のスタイルを指定しています。
初期設定
CSSスタイル
/*デフォルトヘッダ*/
.myheader{margin-bottom: 10px;}
.myheader h1{margin: 0px 0px 0px 10px; line-height:200%;}
↑ページトップに戻る
.myleft
デフォルトで設定されている左メニュー部分のスタイルを指定しています。
CSSスタイル
/*左メニュー*/
.myleft{padding: 0px 10px 0px 0px;}
.myleft h3{margin: 0px; padding: 2px;}
.myleft ul{list-style-type: none; padding: 0px; margin: 0px 0px 5px 0px;}
.myleft ul ul{margin-left: 10px;}
.myleft li a{display: block; text-decoration: none; height: 25px; padding: 3px;}
↑ページトップに戻る
.myfooter
デフォルトで設定されているフッタ部分のスタイルを指定しています。
CSSスタイル
/*フッタ*/
.myfooter{text-align: center; padding: 5px;}
↑ページトップに戻る