[HTML & CSS General] CSS で SNS シェアボタンをカスタマイズする
シンプルなリンクにデザインをあて、表示を高速化する。
Contents [hide]
仕様
公式シェアボタンは表示が遅くなるのでリンクに変更。
各 SNS の仕様を調べるべきですが、こちらを参考にさせて頂きつつ手抜き実装。
Twitter は仕様が変わっているようなので調整。
Feedly のボタンも調べて追加。
WordPress
WordPress では、以下で TITLE と URL を取得できる。
<?php echo urlencode(the_title_attribute('echo=0')); ?>
<?php the_permalink(); ?>
実装
- media query で Desktop 時は横並び。
- flexbox で並べる。
- リンクは
_blank
で別窓で開く。
Web フォント
今回はアイコンフォントを利用しないが、以下を参考に。
Twitter, FaceBook, Google+, Pocket は Font Awesome に存在。
はてブ, Qiita, Feedly は、IcoMoon で作成。
Feedly は公式ベクターが見つからず。