バイラルタイプのSNSボタンを設置しよう
一般的なカラーで表示の場合のCSS
/* ==================SNSボタン====================== */
.share {
margin: 0px 5px 40px 5px;
}
.share ul {margin : 0;
padding : 0;
list-style : none;}
.share li a {display : block;
color : #fff;
font-size : 14px;
text-decoration : none;
text-align : center;
padding: 10px 5px 10px 5px ;
margin: 0px 5px 0px 5px;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.share li a:hover {opacity :0.8;
color : #fff;}
.share li a:visited{ color: #fff;}
.share ul:after {content : "";
display : block;
clear : both;}
.tweet a{background-color : #55acee;}
.facebook a{background-color : #315096;}
.googleplus a{background-color : #dd4b39;}
.hatena a{background-color : #3C7DD1;}
.line a{background-color: #00c300;}
.pocket a{background-color :#EE4257;}
.rss a{background-color: #ff8c00;}
.feedly a{background-color: #87bd33;}
.share li {float : left;
width : 25%;
margin : 0;
margin-top:15px;}
優しいカラーで表示の場合のCSS
デフォルトカラーに合わせるとサイトによってはキツいと思います。
ってことで少し優しい色合いに変更させました。
/* ==================SNSボタン====================== */
.share {
margin: 0px 5px 40px 5px;
}
.share ul {margin : 0;
padding : 0;
list-style : none;}
.share li a {display : block;
color : #fff;
font-size : 14px;
text-decoration : none;
text-align : center;
padding: 10px 5px 10px 5px ;
margin: 0px 5px 0px 5px;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.share li a:hover {opacity :0.8;
color : #fff;}
.share li a:visited{ color: #fff;}
.share ul:after {content : "";
display : block;
clear : both;}
.tweet a{background-color : #79b7ea;}
.facebook a{background-color : #5c749c;}
.googleplus a{background-color : #d9604d;}
.hatena a{background-color : #6795d4;}
.line a{background-color: #6bbd57;}
.pocket a{background-color :#e57583;}
.rss a{background-color: #f1ab57;}
.feedly a{background-color: #8abb38;}
.share li {float : left;
width : 25%;
margin : 0;
margin-top:15px;}
参照ページ
ソーシャルボタンを自作してWordPressの高速化
アイコンも表示しよう！
アイコンをダウンロードしてサーバーのテーマフォルダにアップしておく
IcoMoon App – Icon Font Generator
ダウンロードしたフォルダを開き、style.cssの全部コピーしてテーマのCSSにそのまま貼り付けます（フォルダが分かれている場合は一手間必要）。ダウンロードしたアイコンによりますが、私のCSSこんな感じに記述しました。
/* ==================SNSボタン用イラスト====================== */
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?g37ftu');
src:url('fonts/icomoon.eot?g37ftu#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?g37ftu') format('truetype'),
url('fonts/icomoon.woff?g37ftu') format('woff'),
url('fonts/icomoon.svg?g37ftu#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-feedly:before {
content: "\e900";
}
.icon-hatebu:before {
content: "\e901";
}
.icon-line:before {
content: "\e902";
}
.icon-pocket:before {
content: "\e903";
}
.icon-home:before {
content: "\e904";
}
.icon-box-add:before {
content: "\e905";
}
.icon-box-remove:before {
content: "\e906";
}
.icon-google-plus:before {
content: "\e907";
}
.icon-facebook:before {
content: "\e908";
}
.icon-twitter:before {
content: "\e909";
}
.icon-feed2:before {
content: "\e90a";
}
.icon-pinterest:before {
content: "\e90b";
}
参照ページ
アイコン画像をWebフォントに変更して高速化
ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい！