ウェビメモ

web

スクロールしてもついてくる！ブログにソーシャルボックスをつけよう。

こんにちは、霙です。
ウェビメモ製作時に、ページをどんなにスクロールしても横にくっついて来るソーシャルボックスを作りました。

コードを教えて欲しいという方がいたので、他の方にも需要あるかな？と思い、記事にしてみました:)
自分のサイトに使いたい方はコピペしてご自由にどうぞ！
（IE6対応版にはこちら）

読者が利用するタイミング

みんなが設置しているソーシャルボタン。いざ自分のブログにつけるとなるとどこに置こうか迷いますよね。
記事の最初に設置するもよし、最後に設置するもよし、両方設置するもよし。
とにかく設置するにあたって重要な事は

「どこに置けば読者の方々に押してもらいやすいのか」です。

自分が読者の立場になった時はどうですか？？
私は寂しがり屋なので、常に隣に居て欲しいんですよ・・・/////

てゆうのは冗談ですが、自分だったら記事を読む前にツイート数、はてブ数を見てます。
タイトルを見て「お、よさげ？」となり、ツイート数などを見て少なかったら流し読みしますし、多かったらガッツリ読む気で開きます。
そして記事を読み終わった後で良かったらツイートなりはてブなりをしますね。

まあ人それぞれタイミングは違うでしょう。だからこそずっと画面上にいて欲しいわけです。どんな方でもすぐ手の届く位置に設置すればよいわけなのです。

さて、コードです。

以下をコピペして頂ければあなたのブログにも可愛いソーシャルボックスたんが！
paddingやbottom値などは各自で調整願います。

HTML
<div id="wrap">
    <ul id="social_box"> 
        <li>お好きなソーシャルボタンのコード</li>
        <li>お好きなソーシャルボタンのコード</li>
        <li>お好きなソーシャルボタンのコード</li>
    </ul> 
    <div id="main"></div>
    <div id="side"></div>
</div>

ソーシャルボックス自体は<ul>～</ul>です。
それをメインカラム、サイドカラムと同じ階層に置けばよいです。

CSS
#wrap{
	width:960px;
	margin:10px auto;
}

#social_box{
	background:#fff;
	width:60px;
	padding:15px;
	margin-left:-100px;
	text-align:center;
	position:fixed;
	bottom:30px;
	list-style-type:none;
}

#main{
	width:660px;
	float:left;
}

#side{
	width:300px;
	float:left;
}

wrapのwidthはメインカラム+サイドカラムでOKです。
ソーシャルボックスはネガティブマージンを指定しているので関係ないみたいです。

ネガティブマージンについては以下の記事がとても参考になりました。

※2012.12.10追記
position:fixedをtop値で設定していましたが、小さい画面でも見切れない様bottom値に変更しました。

中身は何を置きましょう？

さて、大まかなレイアウトは終わりました。
あとはご自分が置きたいソーシャルボタンをどんどん並べるだけです:)

もちろん、ソーシャルボタン以外のものを置いてもよいでしょう。
うちのサイトみたいに、ページトップへ戻るボタンを置いたりとか。（コレすっごく操作性よくて病みつきになります）

ちょっとソーシャルボックスの中身におすすめなページをいくつかまとめときますね。

後で読み返す系

人に拡散系

ちょっと面倒だなぁ。一発で全部つくれないの？

はい、5509さんで作れます。
mixiチェックとかもあります。（Facebookシェアボタンはありませぬ）

おまけ

ウェビメモのソーシャルボックスのようにjQueryでページトップへのリンクをしたい方はこちらの記事が参考になります。

その際、わたしのようなアホなミスはしないように注意してくださいねｗ
ボタン画像はご自分で用意してみてください:)

5/25追記

かっこいいPageTop用ボタンを発見しました！！

参考：Themes Kingdom

さいごに

このソーシャルボックスは読者のため、というのもそうですが、私は私のために置いています。
一番閲覧回数が多いであろう自分が使いやすければ、きっと読者も使いやすいんじゃないかなと思います。

みなさんも是非ブログにソーシャルボックスを設置してみてください！！
以上、霙でした！

Ranking