【コピペで楽々】どのサイトにもなじむシンプルな固定シェアボタン

固定シェアボタンの新しいデザインを作りました。シンプルなデザインなのでどんなブログにも合うと思います。

完成予想図

画面上に固定されているので、スクロールしても追尾します

スクロール前

スクロール後

コードを貼り付ける場所

スマートフォンページの記事→記事下に貼り付けてください。

貼り付けるCSS

<div id="globalheader-container-custom">
  <div class="site-logo"><a href="#"><!--サイトのトップページのURLを入力してください-->
    <i class="blogicon blogicon-home lg"></i></a>
  </div>
  <div class="site-share-btn">
   <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href, 'TwitterWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="blogicon blogicon-twitter"></i>　つぶやく</a>
   <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon blogicon-bookmark"></i>　はてブに追加</a>
  </div>
</div>
<style>
  html{position:relative;}
  #globalheader-container{display:none;}/*はてなブログのヘッダーメニューを消す*/
  #globalheader-container-custom{
  z-index:100;
  width:100%;
  height:44px;
  background-color:rgba(80,81,79,.8);
  box-sizing:border-box;
  overflow:hidden;
  padding:4px;
  box-shadow:0 1px 5px rgba(0,0,0,.1);
  position:fixed;
  top:0;
  left:0;
}
.site-logo{
  float:left;
}
.site-logo a{
  font-size:90%;
  height:36px;
  box-sizing:border-box;
  display:inline-block;
  text-align:center;
  line-height:36px;
  padding:0 8px;
  text-decoration:none;
  color:white;
  border:1px solid white;
}
.site-share-btn{
  float:right;
  margin-right:4px;
}
.site-share-btn a{
  font-size:90%
  height:36px;
  box-sizing:border-box;
  display:inline-block;
  text-align:center;
  line-height:36px;
  padding:0 8px;
  text-decoration:none;
  color:white;
  border:1px solid white;
}
</style>

過去に作ったカスタマイズはこちらをどうぞ

今まで作成したはてなブログカスタマイズ一覧