Works
シェアする
Twitter・Facebook・LINEで、そのページの内容をシェアするリンクを生成する。
親要素.c-share
の中に、data-share属性を持つ子要素が入っている構造。子要素の内容はなんでも良い。ここでは各メディアのアイコンを入れている。data-share属性にはtwitte
facebook
line
いずれかの値を指定する。
子要素の中身をJavaScriptを介して、該当メディアでシェアするリンクに置き換える。
.c-share
要素にはデフォルトで上部に64px
のマージンが適用されている。
<ul class="c-share">
<li data-share="twitter"><svg width="24" height="24" viewBox="0 0 24 24" class="ico"><use href="../../assets/img/ico.svg#twitter"/></svg></li>
<li data-share="facebook"><svg width="24" height="24" viewBox="0 0 24 24" class="ico"><use href="../../assets/img/ico.svg#facebook"/></svg></li>
<li data-share="line"><svg width="24" height="24" viewBox="0 0 24 24" class="ico"><use href="../../assets/img/ico.svg#line"/></svg></li>
</ul>