おはようございます。mayuです。
先日の投稿で「
WordPressテーマ集」を作った話をして
ソーシャルボタンの設置をどうするか悩みつつ
結局さっさと導入することにしたので今日はｃ⌒っﾟдﾟ)っφ ﾒﾓﾒﾓ...
↓画面の右側に付けました。
テーマ一覧とデザインを合わせるためにCSSで影と線を足しました。
参考にさせていただいたページはこちら(*^^*)
→
スクロールしてもついてくる！ブログにソーシャルボックスをつけよう。で、僭越ながら一部をコピペさせてもらって、
各々のソーシャルボタンのコードを取りに行って、
実際に出来上がったタグはこんな感じ。
<body＞タグの中に貼り付けます。
<ul id="social_box">
<li><!-- いいねボタン -->
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwp-theme.myafi.net%2F&width=70&layout=box_count&action=like&show_faces=false&share=true&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:65px;" allowTransparency="true"></iframe>
</li>
<li><!-- ツイートボタン -->
<a href="https://twitter.com/share" class="twitter-share-button" data-via="
8uma" data-lang="ja" data-count="vertical">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li>
<li><!-- Google＋ボタン -->
<div class="g-plusone" data-size="tall"></div>
<script type="text/javascript">
window.___gcfg = {lang: 'ja'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</li>
<li><!-- はてブボタン -->
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" 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="http://blog.with2.net/link.php?
1653461" target="_blank"><img src="http://image.with2.net/img/banner/banner_good.gif" width="80" height="35" border="0" /></a>
</li>
<li><!-- ブログ村ランキング -->
<a href="http://
it.blogmura.com/wordpess/" target="_blank"><img src="http://www.blogmura.com/img/www103_20_1.gif" width="103" height="20" border="0" alt="ブログランキング・にほんブログ村へ" /></a>
</li>
</ul>
おまけにブログランキングボタンもつけてみた！(笑)
冒頭の画像にあるソーシャルボタンと同じで良ければ、
このタグをコピーしていただいても大丈夫です。
で、その際に色の変えている箇所は変更してください。
いいねボタン →
ドメイン名ツイートボタン →
IDブログランキングボタン →
専用コードブログ村ランキングボタン →
専用URLランキングボタンは消してもらってOK。
使う場合はURLの変更をお忘れなくです。
他はそのまんま使っていただいて作動するはず(*^^*)
で、CSSの方はこんな感じ。
（コピペさせていただいたものから少し変更しました）
#social_box {
background:#fff;
width:120px;
padding:15px 0;
top:100px; /* 上からの距離 */
left:1300px; /* 左からの距離 */
text-align:center;
position:fixed;
list-style-type:none;
box-shadow:#ccc 0px 1px 3px; /* 影 */
}
#social_box li {
line-height:250%;
}
mayuのサイトの場合なので
「top」「left」は「bottom」「right」に変更してもいいですし
「margin」で指定してもよいと思います。
で、今回はそれぞれソーシャルボタンを1つずつ設定しましたが
ソーシャルボタン簡単設置といえば「
忍者おまとめボタン」というのもあります。
おまとめボタンで間に合いそうならこちらを活用しても良いかもです。
ご参考までに～☆
