メインコンテンツにかっけーランキングパーツを作りたい。その結果
ノーマルなランキングパーツ
<!-- 外側 --> <div style=" margin:30px 0 0 0; background-color:#ffffcc; padding:2px 10px 10px 10px; border:solid 2px #D48D00; line-height:-50%; border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;"> <div> <!-- クラウンブロック --> <div style=" float:left; position:relative; top:-30px; bottom:-30px;"> <img src="<?php echo home_url(); ?>/img/clown_01.png"> </div> <!-- /クラウンブロック --> <!-- 商品タイトルブロック --> <div style=" float:left; font-size:24px; text-decoration:bold; position:relative; top:5px; padding:10px 0 0 0;"> なんちゃらかんちゃら商品名 </div> <!-- /商品タイトルブロック --> </div> <br /> <!-- 商品画像+商品説明ブロック --> <div style=" position:relative; top:-10px; margin:30px 10px 0px 10px; padding:20px 0px 20px 0px; background-color:#ffffff; height:157px; border:solid 1px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;"> <!-- 商品画像ブロック --> <div style=" margin:0 0 0 20px; float:left; border-right: dashed 1px #ccc;"> <a href="LINK" target="_blank" > <img src="http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2015/01/2108576.gif" style="padding: 0 20px 10px 0;"> </a> </div> <!-- /商品画像ブロック --> <!-- 商品説明ブロック --> <div style=" float:left; padding:0 0 0 20px;"> 説明文がはいるよていでごわす。<br /> ごわごわごわす。 </div> <!-- /商品説明ブロック --> </div> <!-- /商品画像+商品説明ブロック --> </div> <br clear="all"><div style="clear:both;"></div>
>br />
商品説明のブロックをさらに2つに分ける(横)
<!-- 外側 --> <div style=" margin:30px 0 0 0; background-color:#ffffcc; padding:2px 10px 10px 10px; border:solid 2px #D48D00; line-height:-50%; border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;"> <div> <!-- クラウンブロック --> <div style=" float:left; position:relative; top:-30px; bottom:-30px;"> <img src="<?php echo home_url(); ?>/img/clown_01.png"> </div> <!-- /クラウンブロック --> <!-- 商品タイトルブロック --> <div style=" float:left; font-size:24px; text-decoration:bold; position:relative; top:5px; padding:10px 0 0 0;"> なんちゃらかんちゃら商品名 </div> <!-- /商品タイトルブロック --> </div> <br /> <!-- 商品画像+商品説明ブロック --> <div style=" position:relative; top:-10px; margin:30px 10px 0px 10px; padding:20px 0px 20px 0px; background-color:#ffffff; height:157px; border:solid 1px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;"> <!-- 商品画像ブロック --> <div style=" margin:0 0 0 20px; float:left; border-right: dashed 1px #ccc;"> <a href="LINK" target="_blank" > <img src="http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2015/01/2108576.gif" style="padding: 0 20px 10px 0;"> </a> </div> <!-- /商品画像ブロック --> <!-- 商品説明ブロック --> <div style=" float:left; padding:0 20px 0 20px; height:167px; border-right:#c99 1px dashed;"> 説明文がはいるよていでごわす。<br /> ごわごわごわす。 </div> <!-- /商品説明ブロック --> <!-- 商品説明ブロック 2--> <div style=" float:left; padding:0 0 0 20px;"> 説明文がはいるよていでごわす。<br /> ごわごわごわす。 </div> <!-- /商品説明ブロック --> </div> <!-- /商品画像+商品説明ブロック --> </div> <br clear="all"><div style="clear:both;"></div>
商品詳細へのリンクを付ける
なんちゃらかんちゃら商品名