スクロールしてもついてくるソーシャルボタンたち

公開日: : Web

Web

今更な感満載の内容ですが…

育児の合間をぬって、
コツコツつくってきたサイトですが、
何となく未完なページも減ってきて
ありがたい事にアクセスも伸びてきたので、
Facebookページをつくろうかな..と。

そしてそのついでに見ないふりしてきた
ソーシャルボタンの設置場所なども見直そうかな..と。

ということで
最近はやりのスクロールしても
ずっと下の方に固定されて表示してある
ソーシャルボタンボックスが設置したい!と思い調べてみました。

すぐにいいサイト発見!


説明も分かりやすく、これですぐにできました。
あとは幅など微調整して終わり。

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


#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;
}


#mainや#sideは、
ほとんど既に入ってるだろうからいらないかな。

その他、少し引っかかったところといえば
Facebookのボタンですが、
HTML5で設置するといいねボタンを押した際、
コメントを入力する欄が表示されてしまう。
下の方に固定してあるもんだからそれを閉じることもできず..
という状態になってしまうので
見た目的にはiframeでいれるのがオススメです。

後は何をいれるのか..というところですが、
とりあえず私は主要な4つで落ち着いています。

主要ソーシャル系ボタン


何にしても
ありがとう!ウェビメモさん。

ad

関連記事

Web

Adobe Typekitで、一瞬違うフォントが表示される時の対処法

最近、Adobe Typekitを使用し始めたのですが ページを表示させた際、 一瞬です

記事を読む

jQuery

スクロールしたら浮き出てくる「ページトップへ」のボタンを設置

ページ下部までスクロールした時、 ページトップへのリンクが出てくるようにするときのメモ

記事を読む

Web

.htaccessで、ディレクトリの一覧ページだけリダイレクトさせて下層ページはリダイレクトさせたくない時。

ちょっとタイトルでは分かりにくいんですが、 ・http://hogehoge.

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PAGE TOP ↑