スマホ画面下固定でも邪魔くさくないSNSシェアボタンの設置方法（はてなブログのカスタマイズ）

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

<!-- 画面下シェアボタン -->
<div class="fixed-share-buttons">
<!-- はてブ -->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" class="hatena-bookmark-button hatena-bookmark"><i class="blogicon-bookmark"></i></a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook" target="_blank"><i class="blogicon-facebook"></i></a>
<!-- Twitter -->
<a href="http://twitter.com/intent/tweet?text={Title} - {BlogTitle} {URLEncodedPermalink}" target="_blank" class="twitter"><i class="blogicon-twitter"></i></a>
<!-- Pocket -->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket" target="_blank"><i class="blogicon-chevron-down"></i></a>
<!-- LINE -->
<a href="http://line.me/R/msg/text/?{Title} - {BlogTitle} {URLEncodedPermalink}" class="line"><i class="fa fa-comment"></i></a>
</div>

/* 全体の位置決め */
.fixed-share-buttons{
text-align: left;
position:fixed; /* 表示位置を固定 */
left:10px; /* 画面左端からの距離 */
bottom:8px; /* 画面下からの距離 */
z-index: 100; /* 他の要素より前面に表示 */
}
/* ボタン共通のデザイン */
.fixed-share-buttons a {
position: relative;
display: inline-block; /* 横並び */
width: 36px; /* 横幅 */
height: 36px; /* 縦幅 */
text-align: center; /* ロゴの中央寄せ（縦） */
line-height: 36px; /* ロゴの中央寄せ（横） */
border-radius:50%; /* 丸ボタン化 */
font-size: 18px; /* ロゴの大きさ */
color: #ffffff; /* ロゴの色 */
text-decoration: none; /* ロゴに表示されてしまう下線を消す */
padding: 0;
margin:5px; /* ボタン間のスペース */
opacity:0.8; /* ボタンの半透明化 */
}
/* はてなブックマークボタンの色指定 */
.fixed-share-buttons .hatena-bookmark{
background: #008fde;
}
/* Facebookボタンの色指定 */
.fixed-share-buttons .facebook{
background: #305097;
}
/* Twitterボタンの色指定 */
.fixed-share-buttons .twitter{
background: #55acee;
}
/* Pocketボタンの色指定 */
.fixed-share-buttons .pocket{
background: #EE4256;
}
/* LINEボタンの色指定 */
.fixed-share-buttons .line{
background: #5ae628;
}

<style type="text/css">ここに上記コードをコピー</style>

.fixed-share-buttons{ /* このセクションのどこでもいいので下記1行を追加 */
display:none; /* デフォルト（PC版）で非表示 */
}
/* 下記3行を追加 */
@media screen and (max-width:680px){ /* スマホ（画面の横幅680px）の場合 */
.fixed-share-buttons { display: block; } /* ボタン群を表示する */
}