うぃず FC2テンプレート

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

ソーシャルボタンを設置しよう

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

  • このブログに設置しているような、3つのソーシャルボタンを設置について紹介したいと思います。

    social.jpg

    普通ですが、こんな感じに設置可能です。



    スポンサードリンク


    HTML編集にて以下を設置したい箇所に貼り付けてください。
    ただし、<!--topentry-->から<!--/topentry-->の間に記述してください。
    FC2ブログ特有の変数を用いているので、うまく機能しなくなります。

    <div id="social_box">

    <li><div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-href="<%topentry_link>" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
    </li>

    <li><a href="<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
    </li>

    <li> <a href="https://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>"data-text="<%topentry_title> <%blog_name>" data-lang="ja" data-related="anywhereTheJavascriptAPI" data-count="vertical">ツイート</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
    </div>





    CSS編集にて以下を記述してください。場所はどこでも構いません。

    /***************************************** ▼ ソーシャルボックス ▼ */
    #social_box {
    height:60px;
    padding:10px;
    border-top:1px dotted #999999; /* 上のドット線 */
    border-bottom:1px dotted #999999; /* 下のドット線 */
    }

    #social_box li{
    list-style-type:none;
    float:right; /* 右詰め */
    display:block;
    }
    /***************************************** ▲ ソーシャルボックス ▲ */



    とてもシンプルですが、これで3つのソーシャルボタンを設置することができました!



    関連記事
    >ただし、からの間に記述してください。

    の場所がよくわかりません><。
    教えていただけるとありがたいですm(_ _)m
    [ 2014/03/06 21:00 ] [ 編集 ]
    申し訳ありません。
    記事の文章の修正を致しましたのでよろしくお願いいたします。
    [ 2014/03/06 23:21 ] [ 編集 ]
    k
    ありがとうございます!とても助かっています!

    もうひとつ「記事一覧に出るサムネ画像」に関する質問があるのですが、
    http://blogthumbnail.fc2.com/w300/49/1/0/l/10lab/social.jpg
    この画像のように上下に黒枠が出てしまう場合、
    こちらでサムネ内の割合を調整して黒枠を消すことは出来ますでしょうか?
    [ 2014/03/26 21:01 ] [ 編集 ]
    Re: k
    <%topentry_image_w300>から<%topentry_image>に変更してみてください。
    <%topentry_image>は非公開変数のため、私も<%topentry_image>が使用可能であることは知りませんでした・・・(>_<)

    おそらく、<%topentry_image>の方が使い勝手がいいと思います。

    > ありがとうございます!とても助かっています!
    >
    > もうひとつ「記事一覧に出るサムネ画像」に関する質問があるのですが、
    > http://blogthumbnail.fc2.com/w300/49/1/0/l/10lab/social.jpg
    > この画像のように上下に黒枠が出てしまう場合、
    > こちらでサムネ内の割合を調整して黒枠を消すことは出来ますでしょうか?
    [ 2014/03/28 08:04 ] [ 編集 ]
    承認待ちコメント
    このコメントは管理者の承認待ちです
    [ 2014/04/04 17:55 ] [ 編集 ]
    コメントの投稿












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

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

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

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

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


    FC2ブロガー必見!

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


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


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

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