記事ページ左下に、固定シェアボタンを追加してみました！
なのでソースの公開と説明をちょっとしていきます！
目指したもの
この記事を見ていて、記事とは関係ないけど、このボタンいいな！と思って作ってみました。
コチラのブログでは丸ボタンですが、ぼくのブログ的に四角の方がいいかなと思ったので、今回そんなボタンを作ってみました。
どんなものかは記事を表示したら左下にいるので、現物を見た方が早いでしょう(笑)
ソース
ではまずはソースです。
いつものように、はてなブログの「デザイン」から設定をしていきます。
HTML
HTMLです。これは記事下に追加しました。
<!--左下シェアボタン+--> <div class="share-mini-icons"> <div class="share-mini-icons-inner"> <!--はてブ--> <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-bookmark lg"></i><br> <span class="small-text">はてなブログ</span> </a> <!--Facebook--> <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"> <i class="blogicon-facebook lg"></i><br> <span class="small-text">Facebook</span> </a> <!--Twitter--> <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button"> <i class="blogicon-twitter lg"></i><br> <span class="small-text">Twitter</span> </a> <!--Google+--> <a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"> <i class="fa fa-google-plus"></i><br> <span class="small-text">Google</span> </a> <!--Pocket--> <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"> <i class="fa fa-get-pocket"></i><br> <span class="small-text">Pocket</span> </a> <!-- 読者になる --> <a href="http://blog.hatena.ne.jp/liszworks/www.lisz-works.com/subscribe" class="blog-reader-button" target="_blank"> <i class="blogicon-hatenablog lg"></i><br> <span class="small-text">読者になる</span> </a> </div> </div>
CSS
CSSはそのまま、CSSへ。
/* 左下シェアボタン+ */ .small-text { display: none; } .share-mini-icons{ border-collapse: separate; /* セルの間隔を空ける */ border-spacing: 5px 3px; /* 左右 上下で記述 */ /* 左下位置固定 */ position: fixed; bottom: 10px; left: 10px; } .share-mini-icons-inner > a { color: #fff; width: 30px; height: 30px; /* 角丸 */ border-radius: 3px; /* CSS3草案 */ -webkit-border-radius: 3px; /* Safari,Google Chrome用 */ -moz-border-radius:3px; /* Firefox用 */ /* 横並び、中身センタリング */ display: table-cell; text-align: center; vertical-align: middle; opacity: 0.8; } .hatena-bookmark-button { background: #2d6bc4; } .facebook-button { background: #3b5998; } .twitter-button { background: #1da1f2; } .googleplus-button { background: #dd4b39; } .pocket-button { background: #ef4056; } .blog-reader-button { background: #2d6bc4; }
ボタンのアイコン
以前から使っている、記事下のシェアボタンの内容を活用させて頂きつつ、作ってみました。
各サービスのアイコンは、Font Awesomeと、はてなが提供しているものを使っています。
Font Awesomeのアイコン一覧と、タグ取得はコチラから。
Font Awesomeの使い方は、コチラが参考になります。
はてなのアイコンは、コチラを参考にしました。
ボタンの角を丸くする
ぼくは四角いボタンにしていますが、その角を丸くする方法です。
コチラを参考にしました。
気持ち丸まってるくらいにしたかったので、3pxで設定しました。
「.share-mini-icons-inner > a」要素に、コレを設定。
/* 角丸 */ border-radius: 3px; /* CSS3草案 */ -webkit-border-radius: 3px; /* Safari,Google Chrome用 */ -moz-border-radius:3px; /* Firefox用 */
参考サイトのpx数を、3pxに変更しただけです。
「.share-mini-icons-inner > a」は、実際にボタンの要素となるのが、aタグになります。
それを囲んでいる、divに、share-mini-icons-innerクラスを指定しています。
「>」で繋げることで、divで括っているすぐ下の階層の、指定したモノに反映されます。
なのでこの場合、aタグにはすべて反映されますが、仮にaタグの中にaタグが入っていても(aタグ2とする)、このaタグ2は、CSSが反映されないという事になります。
アイコン表示を調整する(表示方法、並び等)
アイコンを横並びにする為には、いくつか方法があるようなのですが……
ある要素の上下左右を中央に設定となると、方法が限られるようです。
なので今回は、「display: table-cell;」を使って、アイコンの表示を調整しました。
これもまた「.share-mini-icons-inner > a」へ設定を行います。
この箇所です。
/* 横並び、中身センタリング */ display: table-cell; text-align: center; vertical-align: middle;
「display: table-cell」は、表示をtable-cellというのに変更します。
で、この2つで中央揃えにします。
- 上下：vertical-align: middle;
- 左右：text-align: center;
表示方法については、コチラを参考にしました。
さらに、ボタンとボタンとの間に間隔を開けたい……ということでこちらを参考に設定。
「.share-mini-icons」は一番親となるdivタグを指します。
コイツにこの2つを設定することで、間隔を開けられます。
.share-mini-icons{ border-collapse: separate; /* セルの間隔を空ける */ border-spacing: 5px 3px; /* 左右 上下で記述 */ }
今回は
- 上下：3px
- 左右：5px
に設定してみました。
コメント通りの位置に値を設定すれば、値が変更できました。
ページ左下に固定する
ページ左下に固定する方法です。
大本の親「.share-mini-icons」に設定します。
/* 左下位置固定 */
position: fixed;
bottom: 10px;
left: 10px;
「position: fixed;」で位置を固定化します。
これでスクロールしても、左下に表示されたままの状態になります。
「bottom」、「left」で位置調整です。
それぞれこのような役割です。
- 下からの位置：bottom
- 左からの位置：left
名前のままですね。
コチラを参考にしました。
アイコンに透け感
アイコンをちょっとだけ透けさせてみました。
「.share-mini-icons-inner > a」つまり、ボタン全員に
opacity: 0.8;
が設定されます。
これだけで透過が指定されます。
この値は
(透明)0.0 ←→ 1.0(不透明)
となるので、今回はまさしく「ちょっとだけ透過」です。
更に「.share-mini-icons-inner > a:hover」つまり、マウスオーバー時に
opacity: 1.0;
とすることで、マウスを載せた時、そのボタンを不透明にできます。
あとがき
いかがでしたでしょうか？
個人的には結構満足な仕上がりです。
「もう少しこうしたい」欲は、なくはないですが、第一段階として、これでOKかな！ということで設置してみました。
実は以前、仮で入れた、aタグをマウスオーバーで背景を青くする処理がずっと放置した状態なんですが……
コレを改良したいですね……
シェアボタンもマウスオーバーで青くなってしまう……
どうせならCSSアニメとかで、かわいくしたい。
