FC2ブログで使えるテンプレートを配布しています
スクロールしてもついてくるソーシャルボタンを設置したい |
||
最近スクロールしてもずっとついてくるボタン類を設置しているサイトが多いですよね。
自分がとあるサイトを読み終わり、いざTwitterに投稿してみんなと共有したいこともあるし、
LINEで友達に「ここのサイトだよ!」って通知したいこともあるはず。
でも、ボタンのありかがわかんないし、
「また上まで戻ってスクロールしなきゃならなくて面倒!」
って思う閲覧者のために、自身のブログに、スクロールしても位置固定のソーシャルボタンを設置してみましょう。
スポンサードリンク
まずHTML編集で</body>の直前に以下のコードを挿入してください。
コードに関しては後に記述したいと思います。
次にCSS編集で、以下のコードを挿入してください。
これで雛形は完成です。あとは、ソーシャルボタンの各コードに関してです。
ソーシャルボタンのコードは公式サイトにありますので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]デザインからボタン画像をダウンロード
以下のコードを貼り付けてください
画像ファイルのURLや大きさや各自で調整してください。
いかがでしたでしょうか?ここでは一応、アイコンはバルーン表示を推していますが各ボタンのアイコンに関しては適当に選択してくださいね。
また、コードの種類は<li>~</li>で自由に増減できますので、お好みにあわせてください。
<li>ソーシャルボタンのコード1</li>
<li>ソーシャルボタンのコード2</li>
<li>ソーシャルボタンのコード3</li>
<li>ソーシャルボタンのコード4</li>
<li>ソーシャルボタンのコード5</li>
また、<li>~</li>の中であれば固定メニューリンクを作成することも出来ますし、応用の幅は広がりますね(´∀`)
自分がとあるサイトを読み終わり、いざTwitterに投稿してみんなと共有したいこともあるし、
LINEで友達に「ここのサイトだよ!」って通知したいこともあるはず。
でも、ボタンのありかがわかんないし、
「また上まで戻ってスクロールしなきゃならなくて面倒!」
って思う閲覧者のために、自身のブログに、スクロールしても位置固定のソーシャルボタンを設置してみましょう。
スポンサードリンク
まずHTML編集で</body>の直前に以下のコードを挿入してください。
<ul id="social_box">
<li>ソーシャルボタンのコード1</li>
<li>ソーシャルボタンのコード2</li>
<li>ソーシャルボタンのコード3</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>ソーシャルボタンのコード1</li>
<li>ソーシャルボタンのコード2</li>
<li>ソーシャルボタンのコード3</li>
<li>ソーシャルボタンのコード4</li>
<li>ソーシャルボタンのコード5</li>
また、<li>~</li>の中であれば固定メニューリンクを作成することも出来ますし、応用の幅は広がりますね(´∀`)
コメントの投稿
トラックバック
検索フォーム
スマートフォン用テンプレート
TopNTagCloud
フリーエリア
メールフォーム
何か質問等ありましたらお気軽にお問い合わせください。
RSSリンクの表示
最新コメント
最新トラックバック
ブロとも申請フォーム