HTMLとCSSで追尾する広告のサンプルコード


ちょっとした広告みたいなのが画面に出てるとコンバージョン上がる可能性あるなーって思って、wordpressプラグインとか探したんですが、ちょうどのやつが見つからなかったので自分で調整しました。

この記事が参考になりました。
[HTMLとCSSだけで簡単に作る。軽量な閉じる・すべて表示ボタン](https://tadtadya.com/easy-way-to-make-lightweight-close-buttons-and-all-display-buttons-with-just-html-and-css/#index-list-4)

![スクリーンショット 2021-02-07 12.35.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64334/f4a69b46-88ae-8280-7bbb-2e9175a00749.png)

動画
https://twitter.com/miyamotok0105/status/1357944844186841089?s=20

サンプルコード
https://jsfiddle.net/miyamotok0105/d1aq0jnb/130/


# コード

煮るなり焼くなり自由にどうぞ。
classはオブジェクトぽくするように名詞にするように留意。

この辺り参考なります
[CSSのクラス名を決めるときに使うリストをつくりました](https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470)


- 追従処理
position: fixed;で対応。marginとかで場所は調整。

- 閉じる処理
dispay noneで閉じる
inputのcheckboxでclose
チェックボックスを使う理由はchecked属性が使えて、on offの機能が一度消えるボタンで流用しやすいから。
:checked擬似クラスを使用


```html:
<div>
aaaa
<br /><br /><br /><br /><br /><br />

<div class="fixed-widget">    
  <div class="fixed-widget-closer">
    <input type="checkbox" class="fixed-widget-checkbox" id="close" name="close" />
    
    <label for="close" class="fixed-widget-btn">×</label>
    <div class="fixed-widget-box">
      <!-- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Yahoo_Japan_Logo.svg/156px-Yahoo_Japan_Logo.svg.png" /> -->
      
      <!-- <img class="fixed-widget-pic" src="https://lh4.googleusercontent.com/proxy/0QLAC-BpYJ5nKbMzIbILXFxdmG4TGU1FqkMciGgsdrFEgZTfIyN-ofNBSf1Fp2hd2VfGOQAawam2lLF_SU8xTwjnU48M-Vw6Md4GD1Zlfa8KMiEWNIfpzGnXWBX19DeaWQLpZP-_uxDGRUPF8uy76g=w1200-h627-rp-pd" /> -->
      <img class="fixed-widget-pic" src="https://conversion-labo.jp/wp-content/themes/conversion_lab_v3/images/common/blog_bnr_book_img.jpg" />
      
    </div>
  </div>
</div>




<br /><br /><br /><br />
aaaa
<br /><br /><br /><br /><br /><br />aaaa
<br /><br /><br /><br /><br /><br />aaaa
<br /><br /><br /><br /><br /><br />aaaa
<br /><br /><br /><br /><br /><br />aaaa
<br /><br /><br /><br /><br /><br />aaaa
<br /><br /><br /><br /><br /><br />aaaa
<br /><br /><br /><br /><br /><br />aaaa
<br /><br /><br /><br /><br /><br />aaaa
<br /><br /><br /><br /><br /><br />aaaa
<br /><br /><br /><br /><br /><br />
</div>
```


```css:
.fixed-widget {
    
    position: fixed;
    z-index: 99;
    margin-bottom:100px;
    padding:10px;
    
    border-radius: 5px 5px 5px 5px;
}



.fixed-widget-btn {
    color: #fff;
    background: rgba(127, 194, 239, .5);
    padding: .-1em .5em;
    border-radius: .3em;
    text-align: center;
    display: table;
    cursor: pinter; 
}
.fixed-widget-btn:hover {
    cursor: pinter; 
}
.fixed-widget-btn:active {
    background: rgb(127, 194, 239);
}
.fixed-widget-box {
    border-radius: .3em;
    height: 100%;
}
.fixed-widget-pic {
  height: 20vw;
}

/* close button */
.fixed-widget-closer {
    position: relative;
    margin-top: 2em;
}
.fixed-widget-closer .fixed-widget-btn {
    position: absolute;
    right: 0;
    top: -1em;
}
.fixed-widget-closer .fixed-widget-box {
    margin-bottom: 1em;
}

.fixed-widget .fixed-widget-checkbox {
    display: none;
}


.fixed-widget .fixed-widget-closer #close:checked ~ .fixed-widget-btn {
    display: none;
}
.fixed-widget .fixed-widget-closer #close:checked ~ .fixed-widget-box {
    display: none;
}

```