カテゴリー別アーカイブ: HTML

カラーミーの価格表示設定

カラーミー(ECサイト)で、通常価格よりも商品をお安く販売をする際、
例えば「本来は20,000円だけど、今は15,000円でオトクに販売しています!」
という時、その値引き額(「5,000円も安くなってるんですよ!」ということ)をユーザーに知らせたいですよね。

そんなときは、商品登録の際、「定価」と「販売価格」の両方に入力すれば自動で2つの価格が表示されるわけですが、
「定価」に打ち消し線をつけ、かつ、線の色だけ赤にしたい!
というお声がございましたので、その際のコーディング方法をお伝えします。

カラーミーの
「お店を作る」「デザインを設定する」→「商品詳細」html編集をクリックし、以下の箇所を探しましょう。

htmlサンプル1—————————-————————–

<tr>
<th>定価</th>
<td><{$product.price}></td>
</tr>

————————————————————————

ここに定価表示の設定がされているため、スタイルをかけて調整していきます。

tdタグの欄に以下を追加し、CSSで打ち消し線の色を設定します。
定価の数字も赤で問題ないかたは、spanタグの設定は不要です。

htmlサンプル2————————————

<tr>
<th>定価</th>
<td><p class=”line-red”><span><{$product.price}></span></p></td>
</tr>

CSSサンプル——————————————————–

p.line-red{text-decoration:line-through;color: red;}

p.line-red span{color:#000;}

————————————————————————

これで定価の数字は黒色、打ち消し線のみ赤、の設定ができました。
↓↓↓こんな感じ

sample_1

「定価」と「販売価格」を設定した商品については、基本的には全ページ共通の表示となりますのでご注意くださいませ。

それでは~

フロートの解除

まったくもってやっかいなフロート。解除がうまくいかないとレイアウト崩れの原因になってしまいますね。そんなやっかいなフロートに立ち向かうための王道の解除方法をご紹介いたします。

ul li で、liにフロートをかけた場合

li
のフロートを解除する場合、
ul内にはliタグしか入れられないため、
王道解除のひとつである<br />で clear:both;といった手法での
解除ができません。でもフロートの解除は終了タグの直後になければいけない、でもいれられない…

そんなときは!

ulの高さがなくなってしまう対処方法

ulに
overflow: hidden;
のスタイルを設定します。
厳密にはフロートの解除ではありませんが、
レイアウトの崩れなどの不具合を解除することが可能です。

■html
<ul>
? <li>サンプル1</li>
? <li>サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2</li>
? <li>サンプル3</li>
? <li>サンプル4</li>
? <li>サンプル5</li>
</ul>

■css
ul {
??? background: #C36;
??? overflow: hidden;
}
li {
??? background: #FF3;
??? margin-top: 5px;
??? margin-bottom: 5px;
??? height: 100px;
??? float: left;
??? width: 100px;
}

フロートに悩まされているかたはお試し下さいね!

それでは~

javascript無しでタブ切り替えする

 

こんな切り替えをhtmlだけの記述で作ります。リンクさせるだけのhtml入門者向けです。

 

mew_01

作るファイル

menu.html  フェイシャル用(これをフォーマットにして、他の2つを作ります)

body.html  ボディエステコース用

special.html   スペシャルエステコース用

 

まず
menu.htmlを作成します。タブの部分はリストで記述します。

3つにスライスしておいたタブの画像は背景画像として指定します。

<ul class=”contbox”>
<li class=”subnav01″>
<a href=”menu.html”>フェイシャルエステコース</a></li>
<li class=”subnav02″><a href=”body.html”>ボディエステコース</a></li>
<li class=”subnav03″><a href=”special.html”>スペシャルエステコース</a></li>
</ul>

ではulの続きです。
ここはfacialのページなので、
<div class=”coursebox1″></div>を作り、
内部にfacialの概要テキストを記述します。
css背景グラデもここにかかっています。
その下は<div class=”coursebox2″></div>を作り
コース内容を記述します。

———————————————————————-
body.htmlとして次のファイルを作ります。
menu.htmlのソースをコピーペーストして開始です。
ulタブのcrrentがボディに変わった状態を別途コーディングします。

<ul class=”contboxbody”>
<li class=”subnav01″>
<a href=”menu.html”>フェイシャルエステコース</a></li>
<li class=”subnav02″><a href=”body.html”>ボディエステコース</a></li>
<li class=”subnav03″><a href=”special.html”>スペシャルエステコース</a></li>
</ul>
coursebox1 にボディエステコース概要
coursebox2 にボディエステコース内容を記述。

———————————————————————-

special.htmlとして最後のファイルを作ります。
同様にulタブのcrrentがスペシャルエステコースに変わった状態を別途コーディングします。
<ul class=”contboxsp”>
<li class=”subnav01″>
<a href=”menu.html”>フェイシャルエステコース</a></li>
<li class=”subnav02″><a href=”body.html”>ボディエステコース</a></li>
<li class=”subnav03″><a href=”special.html”>スペシャルエステコース</a></li>
</ul>

前のページと同様に
coursebox1にスペシャルエステコース概要

coursebox2にスペシャルエステコース内容を書きます。完成です。

mew_02