基本出力情報

各要素をclass付きのdivタグで囲っています。
自由自在なスタイル加工が可能です。
<div class="az">
<div class="azrank">順位</div>
<div class="azimg"><a><画像></a></div>
<div class="aztitle"><a>タイトル</a></div>
<div class="azprice">価格</div>
</div>

デザイン例：シンプルな黒帯タイトル


/* 基本設定（共通） */

.az a,.az div{
	display:block;
	overflow:hidden;
}

.az img{
	max-width:100%;
	height:auto;
	border:none;
}

/* 黒帯タイトル */
.az{
	display:inline-block;
	margin:5px;
	width:300px;
	position:relative;
}

.aztitle{
	position:absolute;
	bottom:0px;
	left:0px;
	background:rgb(0, 0, 0);
	width:100%;
}

.aztitle a{
	color:#fff;
	padding:5px;
}

デザイン例 ：丸枠順位


/* 基本設定（共通） */

.az a,.az div{
	display:block;
	overflow:hidden;
}

.az img{
	max-width:100%;
	height:auto;
	border:none;
}

.az{
	display:inline-block;
	margin:5px;
	width:170px;
	position:relative;
	border:solid 1px rgba(56, 58, 154, 0.9);
}

.azrank{
	position:absolute;
	top:10px;
	right:10px;
	z-index:10;
	background:rgba(56, 58, 154, 0.9);
	color:#fff;
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	border:0px;
	border-radius:80px;
}

デザイン例：角枠順位


/* 基本設定（共通） */

.az a,.az div{
  display:block;
  overflow:hidden;
}

.az img{
  max-width:100%;
  weight:auto;
  border:none;
  vertical-align:bottom
}

/* 角枠ランキング */

.az{
	display:inline-block;
	margin:5px;
	width:170px;
	position:relative;
	border:solid 1px rgba(199, 145, 43, 0.9);
}

.azrank{
	position: absolute;
	top:0px;
	left:0px;
	z-index:10;
	background:rgba(199, 145, 43, 0.9);
	color:#fff;
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
}

デザイン例：四角枠+オンマウス挙動


/* 基本設定（共通） */

.az a,.az div{
  display:block;
  overflow:hidden;
}

.az img{
  max-width:100%;
  weight:auto;
  border:none;
  vertical-align:bottom
}

/* 四角枠 */
.az{
	margin:5px;
	display:inline-block;
	width:250px;
	border:#9CF solid 3px;
}

/* 赤価格 */

.azprice{
	color:#F00;
}

/* オンマウス［透明度］ */

.az:hover{
	opacity:0.7;
}

/* オンマウス［位置変化］ */

.az:hover{
	position:relative;
	top:1px;
	left:1px;
}