【はてなブログ】SNSシェアボタンをスマホの下に追従させるカスタマイズ

先日、はてなブログにシェアボタンを設置する方法を紹介しました。

その中では、シェアボタンを記事上や記事下に設置したのですが、今回はスマートフォンでアクセスした場合のみ、シェアボタンを画面の下に追従させる方法を紹介します。

はじめに

今回紹介するカスタマイズは、はてなブログのスマホページでシェアボタンを追従させる方法です。

シェアボタンの設置方法については、この記事では詳しく解説しないので、先日紹介したこちらの記事から確認してみてください。

【はてなブログ】SNSシェアボタンを記事下に設置するカスタマイズ方法

2017.5.24

  はてなブログで記事を公開してユーザーの方に読んでもらった時、TwitterやFacebookなどのSNSでシェアしてもらいたいですよね。 読んでくれた方がシェアしようと思っても、そもそもシェアボタンが設置されていなかったらせっかくの機会を失います。 そこで今回は、はてなブログで記事下にSNSシ...

実際の表示を確認する

ではまず、今回のカスタマイズを行った場合、どのようになるかを確認しましょう。

今回のカスマイズでは、設置したシェアボタンを画面下に追従させられます。

つまり、スマホから記事ページへアクセスしたなら、記事をスクロールしてどこを表示していても、常にシェアボタンが表示されるというわけです。

以下は、記事上部と少しスクロールした場合の画像です。

記事上部：

スクロールした場合：

記事を開いた時と、スクロールした時の両方で画面下にシェアボタンが表示されているのがわかるかと思います。

注意点

今回の方法では、ヘッダーやフッターを非表示にしたり、cssを編集して追従させるには【はてなPro】にアップグレードしてある必要があります。

無料版のはてなユーザーのまま今回のカスタマイズを行った場合、サイトが削除される可能性もあるので注意してください。

あとは、Googleアドセンスを設置している場合で、【ページ単位の広告】のバナーを表示させている場合、シェアボタンと被ってしまう可能性があります。

私のサイトでは、ページ単位の広告を表示していないため未確認ですが、注意しておいたほうが良いと思います。

それらの注意点を確認した上で、さっそく追従シェアボタンを設置していきましょう。

コードの流れ

今回のコードは以下のような流れで実行しています。

シェアボタンを設置する

画面下にシェアボタンを追従させるためには、そのシェアボタンを設置する必要があります。

記事中や記事下に設置しているシェアボタンとは別に、以下のようなコードを追加してください。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>

  addEventListener("DOMContentLoaded", function(){
    var $target = $("#footer");
    $target.after($(".fixed-button-list"));
  }, false);
</script>
<div class="fixed-button-list">
  <div class="fixed-sharebutton">
    <div class="fixed-sharebutton-inner">

      <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-icon" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br></a>

      <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-icon"><i class="blogicon-facebook lg"></i><br></a>

      <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink} @clr_memory" target="_blank" class="twitter-icon"><i class="blogicon-twitter lg"></i><br></a>

      <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="google-plus-icon"><i class="fa fa-google-plus"></i><br></a>

      <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-icon" target="_blank"><i class="fa fa-get-pocket"></i><br></a>

      <a href="http://blog.hatena.ne.jp/id/ドメイン名/subscribe" class="btn colored-button js-subscribe-link" target="" data-track-name="global-header-touch-subscribe" data-track-once><i class="blogicon-subscribe lg"></i> 読者になる</a>
    </div>
  </div>
</div>

このようなコードを記事下などに追加します。

また、一行目に記述されているjQueryに関するコードは不要なので、削除して使用してください。

コードが記述できると、以下のようになりました。

ページの一番下にシェアボタンが表示されるようになっています。

スタイルを変更する

今回は、以下のようなスタイルにカスタマイズしてみました。

ちなみに今回のカスタマイズは、はてなブログのデフォルトテーマ【Life】で動作を確認しております。

別のテーマでは、多少カスタマイズが必要になるかもしれません。

では実際のコードを確認してください。

#container{
    padding-left: 0;
    padding-right: 0;
}
.fixed-button-list {
    width: 100%;
    height: 50px;
    background-color: #555;
    padding-top: 3%;
}
.fixed-sharebutton {
    background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(169, 169, 169, .5));
    overflow: hidden;
    bottom: 0;
    position: fixed;
    width: 100%;
    padding: 3%;
}
.fixed-sharebutton-inner a {
    box-sizing: border-box;
    display: block;
    background-color: white;
    transition: background-color 0.4s ease-in-out 0s;
    width: 12.5%;
    height: 40px;
    padding: 4px 4px 6px 4px;
    margin-right: 1%;
    border: 3px solid;
    border-radius: 7px;
    font-size: 22px;
    float: left;
    text-align: center;
    text-decoration: none;
}
a.hatena-icon{
    background-color: #3c7dd1;
    border: 3px solid #3c7dd1;
    color: white;
}
a.facebook-icon{
    background-color: #3b5998;
    border: 3px solid #3b5998;
    color: white;
}
a.twitter-icon{
    background-color: #55acee;
    border: 3px solid #55acee;
    color: white;
}
a.google-plus-icon{
    background-color: #dd4b39;
    border: 3px solid #dd4b39;
    color: white;
}
a.pocket-icon{
    background-color: #ee4257;
    border: 3px solid #ee4257;
    color: white;
}
a.btn.colored-button.js-subscribe-link {
    width: 27%;
    height: 40px;
    border: 1px solid #adadad;
    font-size: 9pt;
    text-align: center;
    padding: 0 4pt;
    margin: 0;
    line-height: 40px;
}
.blogicon-subscribe:before{
    color: linear-gradient(black, darkgray);
}

スマホページでcssを編集する場合、以下の記事で紹介した方法をとってください。

【はてなブログ】スマホ版のデザインCSSをカスタマイズする方法

2017.5.26

はてなブログでサイトのデザインをカスタマイズする場合、【デザインCSS】という欄にcssを記述していくと思いますが、スマホ版だとこの項目が存在しませんでした。 そこで、今回はスマホ版のデザインCSSをカスタマイズする方法を紹介します。...

重要なコード

今回のcssの中で重要になってくるコードは以下のものたちです。

position: fixed;
bottom: 0;

positionは、fixedに変更することで、ページをスクロールしても常に同じ位置に表示させるためのコード。

bottomは、fixedでスクロールしても同じ位置に表示させたシェアボタンの位置を設定するものです。

今回のカスタマイズでは、シェアボタンを画面下に表示したいので、bottom( 下部の値 ) を0にしました。

まとめ

今回紹介したコードを使えば、スマホでアクセスしたら常に画面下にシェアボタンを表示させることができました。

ですが、この方法には幾つかの注意点がありましたので、それを踏まえた上でカスタマイズしてみてください。

【はてなブログ】特定のページだけ動作するCSSまとめ

2017.12.28

今回は、はてなブログで「特定のページごとに適用されるCSS」のまとめです。 CSSの記述方法によって、適用される範囲が決まるので覚えてみてください。...

ではまた。