目次
広告エリアのデザインサンプル
レクタングル
サイズ(横×縦)
- 300×250
- 336×280
スクエア
サイズ(横×縦)
- 200×200
- 250×250
- 300×300
バナー
サイズ(横×縦)
- 468×60
- 728×90
スカイスクレイパー
サイズ(横×縦)
- 120×600
- 160×600
- 300×600
モバイル
サイズ(横×縦)
- 320×50
- 320×100
<div class="t8-adarea-1">
</div>.t8-adarea-1 {
width: 300px;
height: 250px;
background: #808080;
}<div class="t8-adarea-2">
</div>.t8-adarea-2 {
width: 200px;
height: 200px;
background: #808080;
}<div class="t8-adarea-3">
</div>.t8-adarea-3 {
width: 468px;
height: 60px;
background: #808080;
}<div class="t8-adarea-4">
</div>.t8-adarea-4 {
width: 120px;
height: 600px;
background: #808080;
}<div class="t8-adarea-5">
</div>.t8-adarea-5 {
width: 320px;
height: 50px;
background: #808080;
}<div class="t8-adarea-6">
<a href="">商品のリンク</a>
</div>
.t8-adarea-6 a{
font-weight: bold;
text-decoration: underline;
}<div class="t8-adarea-7">
<div class="t8-adimg-7"><img src="画像のURL"></div>
<a href="商品のリンク">商品のリンク</a>
</div>.t8-adarea-7 {
width: 150px;
}
.t8-adimg-7 {
width: 150px;
height: 150px;
background: #808080;
}<div class="t8-adarea-8">
<div class="t8-adimg-8">
<figure class="t8-adfigure-8">
<img src="画像のURL">
</div>
<div class="t8-adbody-8">
<a href="商品のURL">商品のリンク</a>
<div class="t8-admeta-8">
<button class="t8-adbtn-8">Amazon</button>
<button class="t8-adbtn-8">Rakuten</button>
</div>
</div>
.t8-adarea-8 {
display: flex;
}
.t8-adarea-8 a{
font-weight: bold;
text-decoration: underline;
margin-bottom: 10px;
}
.t8-adimg-8 {
width: 150px;
height: 150px;
border-radius: 20%;
background: #808080;
}
.t8-adbody-8 {
margin-left: 30px;
}
.t8-adbtn-8{
width: 100px;
margin-top: 20px;
margin-right: 10px;
padding: 1em 0.5em;
justify-content: center;
align-items: center;
border-radius: 10px;
background: #0d6efd;
color: #fff;
font-weight: bold;
font-size: 1em;
}