1 / 11

シェアボタンをオリジナルにしてみた

 各SNSのシェアボタンを、オリジナルにしてみた(笑)。

 といっても、「流行りに乗れ!WordPressにバイラルメディア風のSNSボタンを設置する方法 – 副業ハックこちらのページを参考に、ちょこっと変更しただけなんですけどね(笑)。

 個別記事の下の方に表示されてます。

 で、表示させてるのは、PCでFacebook、Twitter、mixi、Google+の4つ。

 Media Queriesをつかって、モバイル環境では上記の4つにLINEも表示させてます。
 というより、ノーマル(PC)では非表示で、モバイル環境で表示させてると言った方がいいのかな?

 上に記載してる参考ページに、ソースがあるのですが、念の為に僕が改変したソースを記載して置きます。

 ちなみに、テンプレートファイル[social-button.php]を作成し、個別記事用テンプレートファイル[single.php]の好きな所にテンプレートファイル[social-button.php]を呼び出す事で、表示させてます。
 そして、呼び出すコードが…
<?php get_template_part('social-button'); ?>
 てなかんじで、あとはCSSで見た目をいじります。
 そして、これは長いので、閉じてます。
/*  SNSボタン
----------------------------------------------- */
#sns-single{
	margin-top: 2em;
	margin-bottom: 2em;
	}

a.facebook-iine{
	width:48%;
	padding:20px 0;
	color:#fff;
	text-align:center;
	background-color:#3b5998;
	height:20px;
	display:block;
	text-decoration:none;
	font-size:20px;
	float:left;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom:10px;
/*border-radius*/
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	}
 
a.facebook-iine:hover{
	background-color:#6277a1;
	}
 
a.twitter-tweet{
	width:48%;
	padding:20px 0;
	color:#fff;
	text-align:center;
	background-color:#00acee;
	height:20px;
	display:block;
	text-decoration:none;
	font-size:20px;
	float:left;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom:10px;
/*border-radius*/
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	}
 
a.twitter-tweet:hover{
	background-color:#6aafca;
	}

a.gplusbtn{
	width:48%;
	padding:20px 0;
	color:#fff;
	text-align:center;
	background-color:#DD4B39;
	height:20px;
	display:block;
	text-decoration:none;
	font-size:20px;
	float:left;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom:10px;
/*border-radius*/
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	}
 
a.gplusbtn:hover{
	background-color:#E05D4C;
	}

a.linebtn{
	width:48%;
	padding:20px 0;
	color:#fff;
	text-align:center;
	background-color:#5ae628;
	height:20px;
	display:block;
	text-decoration:none;
	font-size:20px;
	float:left;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom:10px;
/*border-radius*/
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	display:none;
	}
 
a.linebtn:hover{
	background-color:#B2F39A;
	}

a.mixibtn{
	width:48%;
	padding:20px 0;
	color:#fff;
	text-align:center;
	background-color:#d1ad59;
	height:20px;
	display:block;
	text-decoration:none;
	font-size:20px;
	float:left;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom:10px;
/*border-radius*/
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	}
 
a.mixibtn:hover{
	background-color:#E5D1A3;
	}
これを、style.css等にコピペ。
 class名とかは、各自の環境に合わせて変更しちゃってください。

 あ、あとWebフォントでアイコンを追加してます。
 ですので、上記のCSSをそのままコピペしても、同じ表示にはなりません。

 WebフォントはLigature kudakurage Symbolsを使っています。

/* LigatureSymbols */
@font-face {
    font-family: 'LigatureSymbols';
    src: url('WordPressのテーマディレクトリ/LigatureSymbols-2.11.eot');
    src: url('WordPressのテーマディレクトリ/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('WordPressのテーマディレクトリ/LigatureSymbols-2.11.woff') format('woff'),
         url('WordPressのテーマディレクトリ/LigatureSymbols-2.11.ttf') format('truetype'),
         url('WordPressのテーマディレクトリ/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    font-weight: normal;
    font-style: normal;
}
これを、style.css等にコピペ。
 Webフォントは各自のサーバにアップロードしてから、お使いください。
 ”WordPressのテーマディレクトリ”は、Webフォントをアップロードした所のパスに変更してください。

 こんな感じで、下のような、シェアボタンが出来上がりです。

【参考】
流行りに乗れ!WordPressにバイラルメディア風のSNSボタンを設置する方法 – 副業ハック
Ligature kudakurage Symbols
1 / 11

One Response to “シェアボタンをオリジナルにしてみた”

  1. SNSカウント数を取得してみた | KIYOS LOG Says:
    […] シェアボタンをオリジナルにしてみた 70.1 at 2014-09-07 12:34 […]

コメント

*




Copyright©2000-2017 KIYOS LOG.All Rights Reserved.