［掲載日］ 2014/07/18 (更新日2014/07/18) この記事は約 5 分で読めます

WordPressでSNSアイコン・シェアアイコンをきれいにCSSで作る簡単な方法。Twenty Fourteen対応

Facebook、Twitter、Google+、RSS、FeedlyアイコンなどSNSボタンを作る機会が多いと思います。
画像使えば簡単ですが、「画像を使うのもなぁ」的なことを思ったあなたにぴったりです。

先日バイラルメディアのベフモ動画サイトで作ったSNSアイコンをご紹介
ソースを記載しておきますので、コピペして使って下さい。

WordPressのTwenty Fourteenにも対応してます。

Twitter
Facebook
Google+
RSS
Feedly

に対応しています。
Feedlyは微妙に色だけしか似ていませんが、それっぽく。

無料パソコンスクール講座
WordPress・SEO・プログラミング

あなたに以下のことで悩んでないだろうか？

「フリーランスになりたいけど稼げるか不安だ」
「クラウドソーシングや営業して稼げるか不安だ」
「転職で必要になり困っている」
「スマホはあるけどパソコンが古くて不安だ」
「広告やLINEからの集客を得たい」
「仕事でグラフや資料制作を思うように作れない」
「プログラミングを学習して副業したいけど不安だ」
「副業をはじめたが、いっこうに成果がでない」
「退職してノートパソコンだけで収入を得たい」
「何がわからないかわからない状態が続き何度も挫折した」
「在宅で稼げるようになりたい」
「副業で収入を得たい」

そんなお悩みのあなたにこそ取得して頂きたい内容です！

このメディアを運営している制作・プログラミング相談のプロが
全て無料で相談と学習できるように
無料スクールのメルマガ講座を開設しました。

いまなら、先着300部限定で無料プレゼント付です。

→今すぐ無料ダウンロードする

アイコンのCSS

[html]
/* ———————————————–
シェアボタンサイドバー設定
———————————————– */
#publisher {
padding:10px;
text-align:center;
}
#publisher a{ text-decoration:none;}

#publisher .Gen-publisher-tw { color:#55ACEE;}
#publisher .Gen-publisher-fb { color:#3B5998;}
#publisher .Gen-publisher-gp { color:#DF523F;}
#publisher .Gen-publisher-fe { color:#F60;}
#publisher .Gen-publisher-fd { color:#0C0;}

.Gen-publisher-tw:before{ content: "\f202";}
.Gen-publisher-fb:before{ content: "\f203";}
.Gen-publisher-gp:before{ content: "\f206";}
.Gen-publisher-fe:before{ content: "\f413";}
.Gen-publisher-fd:before{ content: "\f413";}

.Gen-publisher-tw:before, .Gen-publisher-fb:before, .Gen-publisher-gp:before, .Gen-publisher-fe:before, .Gen-publisher-fd:before {
font: normal 30px Genericons;
top:10px;
margin-right: 5px;
position: relative;
}
.Gen-publisher-tw span, .Gen-publisher-fb span, .Gen-publisher-gp span, .Gen-publisher-fe span, .Gen-publisher-fd span {
display:none;
}
[/html]

CSSはgenericonsを使ってアイコンを表示ます。

genericonsをダウンロードする

WordPressのTwenty Fourteenなら初めからgenericonsが入っています。

アイコンのHTML

[php]
<div id="publisher">
<a class="Gen-publisher-tw" rel="publisher" href="https://twitter.com/vefumo" title="Twitterで購読する">Twitter</a>
<a class="Gen-publisher-fb" rel="publisher" href="https://www.facebook.com/vefumo" title="Facebookで購読する">Facebook</a>
<a class="Gen-publisher-gp" rel="publisher" href="https://plus.google.com/+Vefumo/posts" title="Google＋で購読する">Google＋</a>
<a class="Gen-publisher-fe" rel="publisher" href="http://www.vefumo.com/feed" title="RSSで購読する">feed</a>
<a class="Gen-publisher-fd" rel="publisher" href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Fwww.vefumo.com%2Ffeed" title="Feedlyで購読する">feedly</a>
</div>
[/php]

上記のソースを挿入すると

snsicon-to-css_01