coconala702537

by nju33

HTML

<div class="booklink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">
  <div class="booklink-image" style="float:left;margin:0 15px 10px 0;">
    <a href="http://www.amazon.co.jp/exec/obidos/asin/4046526076/test-22/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/41SL4cy1bHL._SL160_.jpg" style="border: none;" />
    </a>
  </div>
  <div class="booklink-info" style="line-height:120%;/zoom: 1;overflow: hidden;">
    <div class="booklink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/asin/4046526076/test-22/" target="_blank">俳句ハンドブック</a>
      <div class="booklink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a>
      </div>
    </div>
    <div class="booklink-detail" style="margin-bottom:5px;">『俳句』編集部 角川学芸出版 2012-03-24 </div>
    <div class="booklink-link2" style="margin-top:10px;">
      <div class="shoplinkamazon" style="display:inline;margin-right:5px"><a href="http://www.amazon.co.jp/exec/obidos/asin/4046526076/test-22/" target="_blank">Amazon</a>
      </div>
      <div class="shoplinkkindle" style="display:inline;margin-right:5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00LWWPWV2/test-22/" target="_blank">Kindle</a>
      </div>
    </div>
  </div>
  <div class="booklink-footer" style="clear: left"></div>
</div>

CSS

.booklink-box,
.kaerebalink-box {
  border: 4px solid #222;
  padding: 1em;
  background: #fff;
}

.booklink-image,
.kaerebalink-image {
  float: none !important;
  text-align: center;
}

@media screen and (min-width: 415px) {
  .booklink-image,
  .kaerebalink-image {
    float: left !important;
  }
}

.booklink-info a,
.kaerebalink-info a {
  text-decoration: none;
  padding: .3em .5em;
  color: inherit;
}

.booklink-name > a,
.kaerebalink-name > a {
  display: inline-block;
  font-size: 18px;
  line-height: 1.7;
}

.booklink-powered-date,
.kaerebalink-powered-date {
  margin-left: 33px;
}

.booklink-name > a:before,
.kaerebalink-name > a:before {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAArlBMVEUAAAAjICD2mh0cHBwjHyAjHyAjHyAjHyAiICAjHx8jHh8jHx8hISH3mB4iHx8gICAhHR0jHyD4mB0iHyAiHiD4mBwjHx/5lx34mR0kHx/5mR34mR35lxwjHx8jHx/2mBv4mB0pHin5mB0jHyD3mB0jHx/4mR33mB0jHx/4mB33lx4kICD4lx0iICD3mB4iHx8kICD4mBz3lxshISH/nBz/nSffnyArKysjHyD4mB2aAzncAAAAOHRSTlMAXxkJ+vDewbKKWysmHh0YEePh17irooeCfXtqUUU6NzAM8+ro27umm494cXFwXlNPSkI2Eg0IBmt+QqgAAAClSURBVBjTVY5XEoMwDESdAKGE3hI6pPdelPtfLIKxDX4/Hj9JO0so7rN0yBAzlAFAnfbGXkKHJ3GlA8R2qQAUXBlx6BKiAYyEtOs5EJQxAWSoDAAlKdShwp2bmNXgid0Njkx9sWfi6jgIeDENWtaYyPs7mCzvGt2jJrdaabYn0iuN5vh+trMxW3+fclRIutgc7nX9yKJVdqFja+//EJ+tU1tV7P8Ha2AUmcApdaMAAAAASUVORK5CYII=);
  display: inline-block;
  margin-right: .3em;
  position: relative;
  top: 3px;
}

.shoplinkamazon,
.shoplinkkindle {
  display: block !important;
  margin: .7em 0;
}

@media screen and (max-width: 414px) {
  .shoplinkamazon,
  .shoplinkkindle {
    text-align: center;
  }
}

.shoplinkamazon > a,
.shoplinkkindle > a {
  display: inline-block;
  padding: .8em;
  min-width: 13em;
  text-align: center;
} 

.shoplinkamazon > a:after,
.shoplinkkindle > a:after {
  content: "でチェックする";
}

@media screen and (min-width: 415px) {
  .shoplinkamazon > a,
  .shoplinkkindle > a {
    display: inline-block;
    padding: .3em .5em;
  } 
}

.shoplinkamazon > a {
 ...