うぃず FC2テンプレート

最近スクロールしてもずっとついてくるボタン類を設置しているサイトが多いですよね。

自分がとあるサイトを読み終わり、いざTwitterに投稿してみんなと共有したいこともあるし、

LINEで友達に「ここのサイトだよ！」って通知したいこともあるはず。

でも、ボタンのありかがわかんないし、

「また上まで戻ってスクロールしなきゃならなくて面倒！」

って思う閲覧者のために、自身のブログに、スクロールしても位置固定のソーシャルボタンを設置してみましょう。



スポンサードリンク


まずHTML編集で</body>の直前に以下のコードを挿入してください。

<ul id="social_box">
<li>ソーシャルボタンのコード１</li>
<li>ソーシャルボタンのコード２</li>
<li>ソーシャルボタンのコード３</li>
</ul>

コードに関しては後に記述したいと思います。


次にCSS編集で、以下のコードを挿入してください。

#social_box{
background:#FFF;
width:90px;
padding:15px;
margin-left:-150px;
text-align:center;
position:fixed;
bottom:20px;
list-style-type:none;
}

これで雛形は完成です。あとは、ソーシャルボタンの各コードに関してです。
ソーシャルボタンのコードは公式サイトにありますのでURLを貼っておきます。

【facebook】
Like Button - Facebook開発者
URL to Like：自分のサイトのURL
Layout Style：box_count

【google】
+1 ボタン - Google+ Platform — Google Developers
サイズ：tall
+1情報：バルーンを選択

【はてぶ】
はてなブックマークボタンの作成・設置について - はてなブックマーク
ページのアドレス：自分のサイトのURL
ページのタイトル：自分のサイトのタイトル
ブックマーク数：表示（バーティカル）

【Pocket】
Pocket for Publishers: Pocket Button
ボタンのスタイルを選ぶだけです。

【Twitter】
Tweet Button | Twitter Developers
ページ下の方にボタンとコード(1.)(2.)があるので、それぞれ貼り付ける。

【LINE】
設置方法｜LINEで送るボタン
・[4]デザインからボタン画像をダウンロード

以下のコードを貼り付けてください

<li><a href="http://line.naver.jp/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.naver.jp%2F"><img alt="LINEで送る" src="[画像ファイルのURL]" width="50" /></a></li>

画像ファイルのURLや大きさや各自で調整してください。



いかがでしたでしょうか？ここでは一応、アイコンはバルーン表示を推していますが各ボタンのアイコンに関しては適当に選択してくださいね。

また、コードの種類は<li>～</li>で自由に増減できますので、お好みにあわせてください。
<li>ソーシャルボタンのコード１</li>
<li>ソーシャルボタンのコード２</li>
<li>ソーシャルボタンのコード３</li>
<li>ソーシャルボタンのコード４</li>
<li>ソーシャルボタンのコード５</li>

また、<li>～</li>の中であれば固定メニューリンクを作成することも出来ますし、応用の幅は広がりますね(´∀｀)

関連記事

• ソーシャルボタンを設置しよう
• スクロールしてもついてくるソーシャルボタンを設置したい
• メニューバーをブログの一番上に設置したい
• 記事の間（文章の間）に広告を表示させたい
• 個別記事ページでプラグイン3を記事の下に表示したい
• 【スマホ】上部の広告を移動させる方法
• 記事と記事の間の間隔を変更したい
• 『02Tシリーズ』ヘッダのリキッドレイアウトを固定にしたい
• 【スマホ】ドロップダウンメニューバーを作成したい