かるみに

趣味とともに生きる

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

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

完成予想図

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

スクロール前

f:id:trrun:20170307235941p:plain

スクロール後

f:id:trrun:20170308000030p:plain

コードを貼り付ける場所

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

貼り付ける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>

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

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