ECサイトで使える！商品一覧の画像をいじらずに「売り切れ」などを表示させる方法

2012/07/26 | カテゴリー: Creative | タグ: CSS, EC, hover, jQuery, tips

タイトルとURLをコピーする
Tweet

PSDを開いて編集して保存してアップして。。
なんてことをしなくても、テキストのみでサクッと更新できるので便利です。

ちょっとイメージしづらいかもしれませんねｗ
アスマルとかでやってる、こんなのです。

大きい会社とかだと、このへんも設計済みで、
自動で「SOLD OUT」になったりとかあると思いますが、
「自動？なにそれおいしいの？」という方へ。

1. 互換性のある書き方

2. cssでちょっと遊んでみた

3. jQueryで同じことをやってみた

1. 互換性のある書き方

HTML

<div class="item">
<p class="news1">大人気</p>
<p><a href="#"><img src="001.jpg" alt="" /></a></p>
</div>

<div class="item">
<p class="news2">SOLD OUT</p>
<p><a href="#"><img src="002.jpg" alt="" /></a></p>
</div>

<div class="item">
<p class="news1">人気No.1</p>
<p><a href="#"><img src="003.jpg" alt="" /></a></p>
</div>

CSS

.item {
	width:150px;
	float:left;
    margin:0 10px 10px 0;
	position:relative;
}
.news1 {
    padding:5px;
    font-weight:bold;
    font-size:12px;
    color:#333;
    background:#d9d92b;
	position:absolute;
	bottom:8%;
	right:0;
}
.news2 {
    padding:5px;
    font-weight:bold;
    font-size:20px;
    color:#fff;
    background:#c00;
	position:absolute;
	bottom:50px;
	right:20px;
}

互換性のある書き方のサンプル

大人気

SOLD OUT

人気No.1

ポイント、注意点など

こういった形で書いてあげたらどのブラウザでも同じように表示されるはずです。
基本的には、positionで画像の上に文字を置いているだけです。

relativeは相対配置、
absoluteは絶対配置です。

relativeはpositionを指定してない位置が基準位置となって、
そこからとれだけ動かすかをtopかbottom、leftかrightで指定します。

absoludeは、親要素にposition要素が指定してあった場合、
親要素の左上が基準位置となります。
たとえばtop:10px;を指定した場合、
上から10px、左から0pxの場所に表示されます。

他にも位置を指定しないstatic、
ブラウザの指定した位置に固定されるfixedがありますが、
説明はここでは省きたいと思います。

ちょっと分かりにくいですが、
自分でやってみると感覚をつかむことができますよ！

2. cssでちょっと遊んでみた

HTML

<div class="css_item">
<p class="css_news1">大人気</p>
<p><a href="#"><img src="001.jpg" alt="" /></a></p>
</div>

<div class="css_item">
<p class="css_news2">SOLD OUT</p>
<p><a href="#"><img src="002.jpg" alt="" /></a></p>
</div>

<div class="css_item">
<p class="css_news1">人気No.1</p>
<p><a href="#"><img src="003.jpg" alt="" /></a></p>
</div>

CSS

.css_item {
	width:150px;
	float:left;
    margin:0 10px 10px 0;
	position:relative;
}
.css_news1 {
    padding:5px;
    font-weight:bold;
    font-size:12px;
    color:#333;
    background:#d9d92b;
	position:absolute;
	bottom:8%;
	right:0;
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	-moz-box-shadow: 0 1px 2px #333;
	-webkit-box-shadow: 0 1px 2px #333;
	-moz-transition: 0.5s ease-in-out;
	-webkit-transition: 0.5s ease-in-out;
}
.css_news2 {
    padding:5px;
    font-weight:bold;
    font-size:20px;
    color:#fff;
    background:#c00;
	position:absolute;
	bottom:50px;
	right:20px;
	-moz-box-shadow: 1px 1px 2px #333;
	-webkit-box-shadow: 1px 1px 2px #333;
    -moz-transform: rotate(345deg);
	-webkit-transform: rotate(345deg);
	-moz-transition: 0.4s ease-in-out;
	-webkit-transition: 0.4s ease-in-out;
}
.css_news1:hover {
    right:10px;

}
.css_news2:hover {
	-moz-transform: rotate(380deg);
	-webkit-transform: rotate(380deg);
}

cssでちょっと遊んでみたサンプル

大人気

SOLD OUT

人気No.1

ポイント、注意点など

クラス名を変えているだけでhtmlはほぼそのままです。

css3を使って、影をつけたり、角丸にしたり、動きのあるものにしています。

「IEとか古いブラウザなんて、見え方違っても素敵やん」というかたは、
この書き方で、対応してないブラウザは上の「互換性のある書き方」で表示されます。

ただしこれだと、画像にマウスを乗せても動かないので
あまり意味が無いかなと思いました。

なのでjQueryを使って同じことをやってみましたー。

3. jQueryで同じことをやってみた

HTML

<div class="js_item">
<p class="js_news1">大人気</p>
<p><a href="#"><img src="001.jpg" alt="" /></a></p>
</div>

<div class="js_item">
<p class="js_news2">SOLD OUT</p>
<p><a href="#"><img src="002.jpg" alt="" /></a></p>
</div>

<div class="js_item">
<p class="js_news1">人気No.1</p>
<p><a href="#"><img src="003.jpg" alt="" /></a></p>
</div>

HTML(jQueryなどの読み込み)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-css-transform.js"></script>
<script type="text/javascript" src="jquery-animate-css-rotate-scale.js"></script>

CSS

.js_item {
	width:150px;
	float:left;
    margin:0 10px 10px 0;
	position:relative;
}
.js_news1 {
    padding:5px;
    font-weight:bold;
    font-size:12px;
    color:#333;
    background:#d9d92b;
	position:absolute;
	bottom:8%;
	right:0;
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	-moz-box-shadow: 0 1px 2px #333;
	-webkit-box-shadow: 0 1px 2px #333;
}
.js_news2 {
    padding:5px;
    font-weight:bold;
    font-size:20px;
    color:#fff;
    background:#c00;
	position:absolute;
	bottom:50px;
	right:20px;
	-moz-box-shadow: 1px 1px 2px #333;
	-webkit-box-shadow: 1px 1px 2px #333;
}

jQuery（今回書いたもの）

$(document).ready(function() {
	$('.js_item').hover(
		function() {
			$('.js_news1',this).stop(true, false).animate({'right': '10px'}, 500);
		},
		function() {
			$('.js_news1',this).stop(true, false).animate({'right': '0px'}, 500);
	});
	
	$('.js_news2').rotate('345deg');
	$('.js_item').hover(
		function() {
			$('.js_news2',this).stop(true, false).animate({ rotate: '380deg'}, 400);
		},
		function() {
			$('.js_news2',this).stop(true, false).animate({ rotate: '345deg'}, 400);
	});
});

jQueryで同じことをやってみたサンプル

サンプル
「すいません。面倒ですがjsのサンプルは別ページとさせてください。」

ポイント、注意点など

これもクラス名を変えているだけでhtmlはほぼそのままです。

jQueryを読み込んであれば横移動は「animate({‘right’: ’10px’}」など書いてあげたら動きます！

ただし、回転「transform: rotate(380deg);」は、
jQueryのみでは動かないので、
Animate CSS Rotation and Scale というjsを読み込まないといけないです。

jquery-css-transform.js
jquery-animate-css-rotate-scale.js
をダウンロードして読み込ませます。
（zipボタンを押すとダウンロードできますよー）

.stop(true, false)のないダメなサンプル

「.stop(true, false)」と書くことで、
動いてる時に何回マウスを乗せても、
乗った回数だけ、その処理を繰り返すことがなくなります。

これが無いとすごいことにｗ
サンプル用意しました。
なんどもマウスを乗せてみてくださいｗ

サンプル
「すいません。面倒ですがjsのサンプルは別ページとさせてください。」

最後に

「SOLD OUT」のみしか使わない。とかだったら、
画像とcssを用意しとけばいいと思いますが、
「残り00個」とか「0/0まで」とか更新、修正が多い場合は、
できるだけ更新しやすいように、テキストで作った方がいいです。

ここがテキストだからと言って、
売り上げが変わるかといったら、そうではないです。

リソースは無限ではないです。
時短できるところはそうして、他に時間かけれるようにしたほうが
良い結果は付いてきます。

タイトルとURLをコピーする
Tweet