基本出力情報

各要素を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 {
  background:#fff;
  margin:10px;
  display:flex;
}

.az:nth-child(2n) {
  flex-direction: row-reverse;
}

.aztitle{
  width:100%;
}

.az a{
  background:rgba(233, 30, 99, 0.3);
  display:flex;
  -webkit-align-items: center;/*上下中央(Safari用) */
  -webkit-justify-content: center;/*左右中央(Safari用)*/
  align-items: center; /*上下中央*/
  justify-content: center; /*左右中央*/
  height:250px;
}

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


/* 基本設定(共通) */

.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;
}