/******************************

 ソーシャルエリア全体を囲む要素
 * 他のコンテンツと距離を取りたい場合は[margin]を設定して下さい

******************************/
.social-area-syncer {
	width: 100% ;
	min-height: 190px ;
	background: #F5F1E9 ;	/* 背景色 */
	padding: 1.5em 0 ;
}

/* デスクトップPCでは高さを拡張する */
@media screen and ( min-width:480px ) {
	.social-area-syncer {
		min-height: 60px ;
	}
}


/******************************

 [ul]要素

******************************/
/* スマホ */
ul.social-button-syncer {
	width: 238px ;
	margin: auto ;
	padding: 0 ;
	border: none ;
	list-style-type: none ;
	margin-left:45px;
}

/* デスクトップ */
@media screen and ( min-width:480px ) {
	ul.social-button-syncer {
		width: 410px ;
	}
}


/******************************

 [li]要素

******************************/
ul.social-button-syncer li {
	float: left ;
	text-align: center ;
	height: 71px ;
	margin: 0 24px ;
	padding:0 ;
}


/******************************

 各種ボタン

******************************/
/* [Twitter] */
.sc-tw {
	width: 71px ;
}

.sc-tw svg {
	width: 30px ;
	height: 30px ;
 }

.sc-tw a {
	height: 56px ;
	margin: 0 auto ;
	padding-top: 6px ;
	display: block ;
	background: #1B95E0 ;
	font-size: 12px ;
	color: #fff ;
	font-weight: 700 ;
	text-decoration: none ;
	letter-spacing: .5px ;
	border-radius: 2px ;
}

.sc-tw a:hover {
	color: #fff ;
	background: #0c7abf ;
}

.sc-tw span:before {
	white-space: pre ;
	content: '\A' ;
}

/* [Facebook] */
.sc-fb {
	z-index: 99 ;
	width: 69px ;
}

/* [LINE] */
.sc-li {
	width: 50px ;
}

.sc-li-img {
	border: none ;
	margin: 0 auto ;
	padding:0 ;
	width: 36px ;
	height: 60px ;
}

/* デスクトップPCではLINEボタンを表示しない */
@media screen and ( min-width:480px ) {
	.sc-li {
		display: none ;
	}
}
JavaScript
JavaScript
/* DOMの読み込み完了後に処理 */
if(window.addEventListener) {
	window.addEventListener( "load" , shareButtonReadSyncer, false );
}else{
	window.attachEvent( "onload", shareButtonReadSyncer );
}

/* シェアボタンを読み込む関数 */
function shareButtonReadSyncer(){

// 遅延ロードする場合は次の行と、終わりの方にある行のコメント(//)を外す
// setTimeout(function(){

// Twitter (オリジナルボタンを使用するので、コメントアウトして無効化)
// window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));

// Facebook
(function(d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];
	if (d.getElementById(id)) return;
	js = d.createElement(s); js.id = id;
	js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0";
	fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// Google+
var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript"
scriptTag.src = "https://apis.google.com/js/platform.js";
scriptTag.async = true;
document.getElementsByTagName("head")[0].appendChild(scriptTag);

// はてなブックマーク
var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript"
scriptTag.src = "https://b.st-hatena.com/js/bookmark_button.js";
scriptTag.async = true;
document.getElementsByTagName("head")[0].appendChild(scriptTag);

// pocket
(!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js"));

//},5000);	//ページを開いて5秒後(5,000ミリ秒後)にシェアボタンを読み込む

}