lisz-works

技術系だけど関係ないこと多い系ブログ

左下固定シェアボタンを作ってみた!シェアや読者登録ボタンかわいく固定

【スポンサーリンク】

シェアボタン かわいく 左下固定

記事ページ左下に、固定シェアボタンを追加してみました!

なのでソースの公開と説明をちょっとしていきます!

目指したもの

この記事を見ていて、記事とは関係ないけど、このボタンいいな!と思って作ってみました。

www.cheer-up.info

コチラのブログでは丸ボタンですが、ぼくのブログ的に四角の方がいいかなと思ったので、今回そんなボタンを作ってみました。

どんなものかは記事を表示したら左下にいるので、現物を見た方が早いでしょう(笑)

ソース

ではまずはソースです。

いつものように、はてなブログの「デザイン」から設定をしていきます。

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のアイコン一覧と、タグ取得はコチラから。

fontawesome.io

Font Awesomeの使い方は、コチラが参考になります。

h2ham.net

はてなのアイコンは、コチラを参考にしました。

shirokai.hatenablog.com

ボタンの角を丸くする

ぼくは四角いボタンにしていますが、その角を丸くする方法です。

コチラを参考にしました。

www.css-lecture.com

気持ち丸まってるくらいにしたかったので、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つで中央揃えにします。

  1. 上下:vertical-align: middle;
  2. 左右:text-align: center;

表示方法については、コチラを参考にしました。

ideahacker.net

さらに、ボタンとボタンとの間に間隔を開けたい……ということでこちらを参考に設定。

www.tam-tam.co.jp

「.share-mini-icons」は一番親となるdivタグを指します。

コイツにこの2つを設定することで、間隔を開けられます。

.share-mini-icons{
 border-collapse: separate;  /* セルの間隔を空ける */
 border-spacing: 5px 3px;    /* 左右 上下で記述 */
}

今回は

  1. 上下:3px
  2. 左右:5px

に設定してみました。

コメント通りの位置に値を設定すれば、値が変更できました。

ページ左下に固定する

ページ左下に固定する方法です。

大本の親「.share-mini-icons」に設定します。

  /* 左下位置固定 */
  position: fixed;
  bottom: 10px;
  left: 10px;

「position: fixed;」で位置を固定化します。
これでスクロールしても、左下に表示されたままの状態になります。

「bottom」、「left」で位置調整です。
それぞれこのような役割です。

  1. 下からの位置:bottom
  2. 左からの位置:left

名前のままですね。

コチラを参考にしました。

www.xenophy.com

アイコンに透け感

アイコンをちょっとだけ透けさせてみました。

「.share-mini-icons-inner > a」つまり、ボタン全員に

  opacity: 0.8;

が設定されます。

これだけで透過が指定されます。

この値は

(透明)0.0 ←→ 1.0(不透明)

となるので、今回はまさしく「ちょっとだけ透過」です。

更に「.share-mini-icons-inner > a:hover」つまり、マウスオーバー時に

  opacity: 1.0;

とすることで、マウスを載せた時、そのボタンを不透明にできます。

あとがき

いかがでしたでしょうか?

個人的には結構満足な仕上がりです。

「もう少しこうしたい」欲は、なくはないですが、第一段階として、これでOKかな!ということで設置してみました。

実は以前、仮で入れた、aタグをマウスオーバーで背景を青くする処理がずっと放置した状態なんですが……

コレを改良したいですね……

シェアボタンもマウスオーバーで青くなってしまう……

どうせならCSSアニメとかで、かわいくしたい。