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

画像の一部にリンクバナーを張る


画像の一部にリンクバナーを張る




box0(背景)の上に box0,box1 を配置して、そのboxの中に要素を配置する。
box0,box1 は、行の関係で上下の関係は変化させないという考え方。
box0,box1 それぞれの内要素は、margin float(右寄せ左寄せ)などで、上下左右位置を決めることができる。


もちろん、ピクセル単位での固定は不可能。なぜならレスポンシブに対応できなくなるから。
レスポンシブを意識した場合、画像のサイズは、背景の幅との割合で指定しておかないと、リサイズができなくなるので注意が必要。

※レスポンシブで表示させる画像は、できれば width:n%; を指定しておくと多くの場合リサイズしてくれる。

<img src=”http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnb.png” style=”width:30%;”>

<div class="box0">
  <div class="box1">
    <div id="btnimg0">
      <a href="http://www.google.co.jp/" target="_blank">
        <img src="http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnb.png" onmouseover="this.src='http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnr.png';" onmouseout="this.src='http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnb.png'" border="0" />
      </a>
    </div>
  </div>
  <div class="box2">
    <div id="btnimg1">
      <a href="http://www.google.co.jp/" target="_blank">
        <img src="http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnb.png" onmouseover="this.src='http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnr.png';" onmouseout="this.src='http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnb.png'" border="0" />
      </a>
    </div>
    <div id="btnimg2">
      <a href="http://www.google.co.jp/" target="_blank">
        <img src="http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnb.png" onmouseover="this.src='http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnr.png';" onmouseout="this.src='http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnb.png'" border="0" />
      </a>
    </div>
  </div>
</div>
<style>
.box0{
  display: block;
  margin: 0 auto 10px;
  max-width: 577px;
  height: 438px;
  background-color:#fff;
  border: 5px solid #1978d8;
  border-radius: 10px;
  background: url('http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/Fotolia_36208288_M.jpg') top right no-repeat;
  background-size: cover;
}
.box1::after,
.box2::after {
  content:"";
  display: block;
  clear: both;
}
.box2{
margin:90px 20px;
}
#btnimg0{
width:50%;
}
#btnimg1{
float:left;
width:50%;
}
#btnimg2{
float:left;
width:50%;
}
</style>

スポンサーリンク

スポンサーリンク

カテゴリー