|
||
ソーシャルボタンを設置しよう |
||
(5)
普通ですが、こんな感じに設置可能です。
スポンサードリンク
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;
}
/***************************************** ▲ ソーシャルボックス ▲ */
とてもシンプルですが、これで３つのソーシャルボタンを設置することができました！
の場所がよくわかりません＞＜。
教えていただけるとありがたいですｍ(_ _)ｍ
記事の文章の修正を致しましたのでよろしくお願いいたします。
もうひとつ「記事一覧に出るサムネ画像」に関する質問があるのですが、
http://blogthumbnail.fc2.com/w300/49/1/0/l/10lab/social.jpg
この画像のように上下に黒枠が出てしまう場合、
こちらでサムネ内の割合を調整して黒枠を消すことは出来ますでしょうか？
<%topentry_image>は非公開変数のため、私も<%topentry_image>が使用可能であることは知りませんでした･･･(>_<)
おそらく、<%topentry_image>の方が使い勝手がいいと思います。
> ありがとうございます！とても助かっています！
>
> もうひとつ「記事一覧に出るサムネ画像」に関する質問があるのですが、
> http://blogthumbnail.fc2.com/w300/49/1/0/l/10lab/social.jpg
> この画像のように上下に黒枠が出てしまう場合、
> こちらでサムネ内の割合を調整して黒枠を消すことは出来ますでしょうか？
グレーが基本色のテンプレートです。
メインカラー ：#444444
メニューカラー：#333333
サブカラー ：#EFEFEF
ラインカラー ：#999999
で主に構成しています。CSSにて色指定箇所を置換すれば簡単に色替えが可能です。 お好みの色に変更して楽しんでください。
SP01_Blue
爽やかな水色が基本色のテンプレートです。
必ず結果が出るブログ運営テクニック
もっとカスタマイズしたい方必見！
毎日メンテナンスするだけで･･･
