バイラルタイプの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フォントアイコン」を本当にオススメしたい!