HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

メインコンテンツにかっけーランキングパーツを作りたい。その結果

ノーマルなランキングパーツ

なんちゃらかんちゃら商品名

説明文がはいるよていでごわす。
ごわごわごわす。


 
<!-- 外側 -->
<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>

 

商品詳細へのリンクを付ける

なんちゃらかんちゃら商品名

説明文がはいるよていでごわす。
ごわごわごわす。
説明文がはいるよていでごわす。
ごわごわごわす。

 
<!-- 外側 -->
<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="http://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 style="
       clear:both;
       text-align:right;
       padding:0 0 0 20px;">
    <a href="" target="_blank"><img src="<?php echo home_url(); ?>/img/button_ex.png"></a>
  </div>
  <!-- /商品リンクブロック -->


  <!-- /商品画像+商品説明ブロック -->
</div>
<br clear="all"><div style="clear:both;"></div>

商品ブロック(58~67行)を取り払えば、説明文が1つのリンクボタン付きランキングパーツになる。

スポンサーリンク

関連記事

スポンサーリンク

カテゴリー