Works

Home Works シェアする

シェアする

Twitter・Facebook・LINEで、そのページの内容をシェアするリンクを生成する。

親要素.c-shareの中に、data-share属性を持つ子要素が入っている構造。子要素の内容はなんでも良い。ここでは各メディアのアイコンを入れている。data-share属性にはtwittefacebooklineいずれかの値を指定する。
子要素の中身を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>