うぃず FC2テンプレート

FC2ブログのテンプレートの配布や、コピペで簡単にカスタマイズできるような方法を紹介しています。
FC2ブログで使えるテンプレートを配布しています
2013.09.22 16:20|folder.png カスタマイズcomment.png(0)

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

  • このエントリーをはてなブックマークに追加

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

    自分がとあるサイトを読み終わり、いざ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>の中であれば固定メニューリンクを作成することも出来ますし、応用の幅は広がりますね(´∀`)


    関連記事
    コメントの投稿












    管理者にだけ表示を許可する
    トラックバック
    この記事のトラックバックURL

    検索フォーム
    スマートフォン用テンプレート
    カスタマイズしやすいように考慮してHTMLを記しています。
    SP01_Gray
    スマートフォンテンプレートグレー
    グレーが基本色のテンプレートです。
    メインカラー :#444444
    メニューカラー:#333333
    サブカラー  :#EFEFEF
    ラインカラー :#999999
    で主に構成しています。CSSにて色指定箇所を置換すれば簡単に色替えが可能です。 お好みの色に変更して楽しんでください。

    SP01_Blue
    スマートフォンテンプレート青
    爽やかな水色が基本色のテンプレートです。
    TopNTagCloud

    フリーエリア
    メールフォーム
    何か質問等ありましたらお気軽にお問い合わせください。

    名前:
    メール:
    件名:
    本文:


    FC2ブロガー必見!

    必ず結果が出るブログ運営テクニック


    もっとカスタマイズしたい方必見!


    毎日メンテナンスするだけで・・・

    最新トラックバック
    ブロとも申請フォーム