クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

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

f:id:clrmemory:20171121155318p:plain

こんにちはクリアメモリです!

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

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

 

 

はじめに

 

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

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

 

www.clrmemory.com

 

実際の表示を確認する

 

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

 

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

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

 

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

 

記事上部:

f:id:clrmemory:20170601013239p:plain

 

スクロールした場合:

f:id:clrmemory:20170601013300p:plain

 

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

 

注意点

 

今回の方法では、ヘッダーやフッターを非表示にしたり、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/clrmemory/brighttunes.hatenablog.com/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に関するコードは不要なので、削除して使用してください。

 

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

 

f:id:clrmemory:20170601011204p:plain

 

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

 

スタイルを変更する

 

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

 

f:id:clrmemory:20170601011810p:plain

 

ちなみに今回のカスタマイズは、はてなブログのデフォルトテーマ【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を編集する場合、以下の記事で紹介した方法をとってください。

 

www.clrmemory.com

 

重要なコード

 

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

 

position: fixed;
bottom: 0;

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

 

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

 

まとめ

 

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

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

 

ではまた。

新着記事