育休男児

1年間育児休暇を取得した男の奮闘記。これからの働き方、DIY、ロードバイクなどの情報も。

WordPress

[P]スクロールしてもついてくるソーシャルボックスを設置する

更新日:

え?なんかついてくるって?そうでしょそうでしょかわいいでしょ。スクロールしても健気についてくるソーシャルボックスを設置してみました。ずっと左にいるかわいいやつです。まだうまくCSSの調整ができてなくて不細工ですが、そこがまたいいでしょ。では、設置方法です。

今回お世話になったのがこのサイト様。
スクロールしてもついてくる!ブログにソーシャルボックスをつけよう。 | ウェビメモ
記事の上か下にソーシャルボタンをつけたことがある方は、ほぼこのサイト様だけでできあがります。

手順としては、

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

こちらをheader.phpにつっこみます。そして、「お好きなソーシャルボタンのコード」のところにTwitterやらはてブなどのコードを書きます。それから、

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

これをスタイルシートにはりつけます。ご自分のブログに合わせてwidthなどをいじってください。これでできあがり。すごく簡単!

ただ、私はデフォルトテーマである「TwentyEleven」を使用しているのですが、上のコードで指定しているid要素の「main」がすでに存在していて、一番大事な記事のところがきゅーっとせまくなっちゃう事件が起きました。「main」を「mainb」みたいに名前を変えてやることで一命はとりとめましたが、同じように既に「main」というidを使っている方は、注意してください。

てかよくわかりませんが、「div id="main"」と「div id="side"」のところっているのかな。詳しい方がいたらその辺教えてくださいましー(ボックスの修正も含めて)。

photo credit: Sukanto Debnath via photopin cc


-WordPress
-,

Copyright© 育休男児 , 2017 AllRights Reserved.