ブックマーク / junk-blog.com (1)

  • 丸いSNSボタンをCSSとWebフォントで作る方法【いいね/ツイート/Pocket/LINE/はてぶ/feedly】

    このJunkBlogはワードプレスで運用していて、自作テンプレートを使用しています。レスポンシブデザインを採用しているのですが、スマホで表示した時のSNSシェアボタンを何とかしたいなぁと常々考えていました。 何故かと言うと、PCでは表示領域が広いのでボタンが一列に並んで綺麗に見えるのですが、ブラウザのサイズを小さくしてスマホサイズになると、表示領域が足りずにボタンが改行されて2列になり、あまり綺麗なレイアウトとはいえない状態でした。 そこで当ブログで採用しているシェアボタン(Facebook/twitter/はてぶ/pocket/google+)をWebフォントを使ってカスタマイズする事で、スマートフォンでのみ収まりの良い丸ボタン風SNSシェアボタンを作ってみたいと思います。 オリジナルWebフォントの作り方をこのエントリーで解説しています。 また日でよく使われる「はてなブックマーク」な

    丸いSNSボタンをCSSとWebフォントで作る方法【いいね/ツイート/Pocket/LINE/はてぶ/feedly】
    Appakun
    Appakun 2016/11/13
  • 1