100Buck$

このブログでは主に英語・音楽関連のネタを発信します。

はてなブログ アイコンWEBフォントを使ってSNSボタンをカスタマイズしてみた

f:id:BuckS100:20150730030806p:plain

最近はブログの記事を書くよりもブログをカスタマイズする方が楽しくて、全然記事を更新することが出来ていません。

今までカスタマイズについての記事をたくさん書いたので、そのうち全部まとめたいと思っています、もう少しだけお付き合い下さい。

今回紹介するのは、はてなブログのアイコンwebフォントを使った、誰でも簡単に出来てしまうカスタマイズ方法です。

はてなブログには既存のwebフォントが読み込まれており、何かをダウンロードしたり、アップロードしたりせずにアイコンを使うことが出来てしまいます。

例えば下のような質素なSNSボタンでも、アイコンwebフォントを使えばより分かりやすくオシャレにデザインすることが出来ます。

f:id:BuckS100:20150731044347p:plain

f:id:BuckS100:20150731044355p:plain

上のようなアイコンwebフォントを使いたい場合は下のHTMLコードを参考にしてください。

ボタンのCSSコードはCSSのみで実装するボタンデザイン...20+α | NxWorldを参考にしてください。

Twitterのシェアボタンを作る場合は下のようなコードになります。

Twitterで共有する

ちなみに下のCSSコードは私が使っているものです。

FacebookはてブなどのSNSボタンも機会があれば作ってみたいと思います。

下の記事にはてなブログで利用出来るアイコンwebフォントのコード一覧が紹介されていますので、ぜひ参考にしてみてください。

参考にさせて頂いた記事

広告を非表示にする