, ,

[HTML & CSS General] CSS で SNS シェアボタンをカスタマイズする

公開日: 2016/06/01
更新日: 2018/10/14

シンプルなリンクにデザインをあて、表示を高速化する。

Contents

仕様

公式シェアボタンは表示が遅くなるのでリンクに変更。
各 SNS の仕様を調べるべきですが、こちらを参考にさせて頂きつつ手抜き実装。

Twitter は仕様が変わっているようなので調整。

Feedly のボタンも調べて追加。

Pocket

WordPress

WordPress では、以下で TITLE と URL を取得できる。

<?php echo urlencode(the_title_attribute('echo=0')); ?>
<?php the_permalink(); ?>

実装

  • media query で Desktop 時は横並び。
  • flexbox で並べる。
  • リンクは _blank で別窓で開く。

See the Pen CSS Simple Sharing Buttons by DriftwoodJP (@DriftwoodJP) on CodePen.

Web フォント

今回はアイコンフォントを利用しないが、以下を参考に。

Twitter, FaceBook, Google+, Pocket は Font Awesome に存在。

はてブ, Qiita, Feedly は、IcoMoon で作成。

Feedly は公式ベクターが見つからず。