tarのブログるっ by @tarVolcano

メガネ男子のtarが書くブログです。

ブログ内で常時表示するシェアボタンのソース公開

先日「ブログのカスタマイズは楽しいけど..」でブログに常にシェアボタンを表示させるボックスを付ける試みを始めましたが、やっとお見せできる形になってきました。公開&解説していきまーす。

スポンサーリンク

最初に謝辞

今回の常時表示シェアボックスの土台はこちらのブログ記事を参考にさせていただきました。先達の知恵に感謝!

はてなブログの追尾型ソーシャルボタンセットにPageTop/Downボタンを付ける - 太陽がまぶしかったから

仕様の概要

パソコンのブラウザでブログを見たときに、

  • はてなブックマークボタン
  • ツイートボタン
  • Pocketボタン

をブラウザ右下に常時表示します。

実際の表示については、パソコンのブラウザからみておられれば、右下にシェアボタンのボックスが出てるので確認してみてください。

スマフォのかたは見えてないので、スクショを用意しておきますね。

20140504110937

ソース

ソースも公開しますので、参考にしてください。

今回のシェアボタンにはサイト毎の設定は入っていません。

全く同じ仕様でよければ、はてなブログの「デザイン」から「フッター」の設定に以下のソースを設定することで、どなたのブログでも機能するはずですが、必ずテスト環境等で試してからお使いください。

<style>
/* シェアボックスのスタイル 右下に常時表示*/
#m_ShareFixedBox {
    bottom: 20px;
    right: 35px;
    height: 80px;
    position: fixed; /* ボックスを常時表示 */
    border: solid 1px #ddd;
    background-color: rgba(255, 255, 255, 0.6); /* ボックス背景の半透明化 */
    padding: 10px 3px 0px 10px;
    width: 250px; /* ボックス幅 */
    border-radius: 3px 3px 3px 3px; /* 角丸め */
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.1); /* ボックスの影 */
    z-index: 1000; /* 要素の重なり順 */
}
.m_ShareArea {
    margin: 0;
    padding: 0;
    list-style-type: none; /* リストのマーカーを消す */
}
.m_ShareArea li {
    float: left; /* 左に寄せて次の要素を右へ回り込ませる */
    margin: 0 5px 5px 0; /* 次の要素との間隔を指定 */
    padding: 2px;
    text-align: center;
}
.m_ShareArea:after {
    content: "";
    display: block;
    clear: both; /* 最後にfloat設定を解除 */
}
</style>
<div id="m_ShareFixedBox">
    <ul class="m_ShareArea">
        <li>
            <!-- はてなブックマークボタン -->
            <a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
        </li>
        <li>
            <!-- ツイートボタン -->
            <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical">ツイート</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        </li>
        <li>
            <!-- Pocketボタン -->
            <a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
            <script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
        </li>
    </ul>
</div>

苦労話

シェアボックスに表示するボタンは、忍者おまとめボタンを利用する予定でしたが、個別にボタンを貼付ける場合と比べて、若干の表示速度が遅くなるようでした。
※数値は参考値としてお考えください。

20140504124412

20140504124411

なので今回は、読み手のかたに読み込みが遅いと言われないように、個別にボタンを作成するようにしました。

また、表示するボタンが多くても速度に影響するので、良く押されるボタンを厳選して表示した方が良いでしょう。

あと、ソースを以下のようなサイトで圧縮してからブログに貼ることで、多少読み込む速度が改善されると思います。

JavaScript Compression - Compress JavaScript Code Free with this JavaScript Compressor (CSS Too) - from Creativyst

解説

それでは、ここからざっくりと解説をしていきます。

シェアボックスの表示位置

今回、常時表示のシェアボックスは右下に表示しています。

右下を選んだ理由としては、記事に被らない場所で、解像度が小さな画面で見ても大丈夫なところを選んだ結果なのですが、この辺りは好みで変えられると良いですよね。

表示位置を変える場合は、ソースの「#m_ShareFixedBox」のCSSを設定することで変更できます。表示位置とCSSプロパティの対応を下記の表にまとめておきましたので、参考にしてください。

表示したい位置 設定するCSSプロパティ
左上 top,left
左下 bottom,left
右上 top,right
右下 bottom,right

各プロパティの数値は、指定箇所からの配置位置を表しています(例えば「bottom: 20px」なら画面下から20ピクセル離した場所にボックスを表示することを指定している)

ボックスを常時表示する設定

ソース「#m_ShareFixedBox」のCSS「position: fixed」の指定が、ボックスを常時表示する設定になります。

一応の注意点として、IEの場合はバージョン7以上でないと機能しませんが、ここはそんなに心配しなくても大丈夫だと思います。

参考サイト:position - CSS | MDN

ボックス背景の半透明化

右下にシェアボックスを常時表示すると、ブログのサイドバー上にかぶるので、ボックス背景を半透明化しています。

ソースのCSS「background-color: rgba(255, 255, 255, 0.6)」の指定がそれにあたり、rgbaの4つ目のパラメータで0(透明)〜1(不透明)を小数値で指定します。

機能するブラウザバージョンは以下を参考にしてください。

参考サイト:color value - CSS | MDN

ボックスの重なり順を指定する

ソースのCSS「z-index: 1000」は、重なり順を指定しています。

シェアボックスにz-indexを指定しないと、はてなブログのプロフィール上に表示されている「読者数」のほうが上に表示されてしまいます。これはプロフィールの「読者数」のz-indexが80に設定されているので、より大きな数値をシェアボックスに設定して表示を優先させています。

ただし、はてなブックマークボタンを押したときに表示されるブックマーク編集画面のz-indexが1002なので、それより大きいとシェアボックスがブックマーク編集画面より上に表示され、見にくくなりますのでご注意ください。

シェアボックス内にボタンを配置する

ボタンなどを並べて表示する方法は色々とありますが、今回は<ul><li>タグとCSSのfloat要素を使った方法で実施しています。

元々、ulタグはリストを表示するのに使われるので、通常は先頭にマーカーが付きます。ソースのCSS「.m_ShareArea」で「list-style-type: none」をすることで、この印を消しています。

そしてCSSの「.m_ShareArea li」で「float: left」を指定して左に寄せ、次の要素を右へ回り込ませるようにしています。

こうすることで、HTML側のliタグ内にシェアボタンを定義すると、ボタンが左から順に表示されるわけです。

liタグ内のボタン定義を変更したり、liタグを増やすことで、比較的楽に表示したいボタンを変えることも出来ますので、試してみると良いでしょう。(ただし表示し過ぎはパフォーマンス低下につながりますので注意)

また、floatを指定した場合、解除しないと次の要素を表示する際にもfloatが効いたままになってしまいますので、「clear: both」の指定をCSSの「.m_ShareArea:after」で定義しておくことでulタグを閉じるときに解除されます。

それから応用として、ボタンを縦に並べたいときは「.m_ShareArea li」の「float: left」を取り除き、「#m_ShareFixedBox」の「width」、「height」プロパティの値を入れ替えれば対応できるようになっています。

参考サイト:
ul 要素 - HTML | MDN
float - CSS | MDN

あとがき

連休中にこんな小難しい記事を書いて、正直読んでもらえるかな〜って心配してますが、そんな時はシェアボタンからブクマして連休明けにじっくり読んでくださいねw

  • このエントリーをはてなブックマークに追加