[HTML & CSS General] CSS で SNS シェアボタンをカスタマイズする
シンプルなリンクにデザインをあて、表示を高速化する。
[markdown]
## 仕様
公式シェアボタンは表示が遅くなるのでリンクに変更。
各 SNS の仕様を調べるべきですが、こちらを参考にさせて頂きつつ手抜き実装。
> * [Webクリエイターボックスを（プチ）リニューアルしました | Webクリエイターボックス](http://www.webcreatorbox.com/news/wcb-redesign-2/)
Twitter は仕様が変わっているようなので調整。
> * [Tweet Button | Twitter Developers](https://g.twimg.com/dev/documentation/image/tweet-intent-composer_0.png)
Feedly のボタンも調べて追加。
> * [feedly. your news. delivered.](http://feedly.com/factory.html)
> * [Pocket | How to Manually Save to Pocket](https://help.getpocket.com/customer/portal/articles/661928-how-to-manually-save-to-pocket)
### WordPress
WordPress では、以下で TITLE と URL を取得できる。
“`php
“`
## 実装
– media query で Desktop 時は横並び。
– flexbox で並べる。
– リンクは `_blank` で別窓で開く。
See the Pen CSS Simple Sharing Buttons by DriftwoodJP (@DriftwoodJP) on CodePen.
### Web フォント
今回はアイコンフォントを利用しないが、以下を参考に。
> * [日本のブログでよく利用されているWEBサービスロゴのアイコンフォントまとめと利用方法](http://nelog.jp/web-service-icon-fonts)
> * [丸いSNSボタンをCSSとWebフォントで作る方法【いいね/ツイート/Pocket/LINE/はてぶ/feedly】](http://junk-blog.com/round_sns_button/)
Twitter, FaceBook, Google+, Pocket は Font Awesome に存在。
– [Font Awesome, the iconic font and CSS toolkit](http://fontawesome.io/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_5.0_update)
はてブ, Qiita, Feedly は、IcoMoon で作成。
– [IcoMoon App – Icon Font, SVG, PDF & PNG Generator](https://icomoon.io/app/#/select)
– [素材集 – 株式会社はてな](http://hatenacorp.jp/press/resource)
– [ブランドガイドライン – Qiita:Support](https://increments.zendesk.com/hc/ja/articles/204009729-%E3%83%96%E3%83%A9%E3%83%B3%E3%83%89%E3%82%AC%E3%82%A4%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3)
Feedly は公式ベクターが見つからず。
– [feedlyロゴマークのベクター画像 – うつつのがれ](http://utsutsunogare.com/feedly-vector-logo/)
[/markdown]