スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

各種SNSボタンを横並びに設置する方法と注意点

ブログに「はてブボタン」「ツイートボタン」「いいね!ボタン」など、各種SNSボタン横並びに設置する方法と注意点です。
FC2ブログ用の、コピペで使えるソースも書いておきます。

ボタンの作り方は、過去記事の「ブログの記事ごとに『はてブ』(はてなブックマーク)ボタンを設置する方法」「ツイートボタン(Twitter公式)をブログに設置する方法」「Facebook『いいね!』ボタンの作成と設置(FC2ブログ)」をご覧下さい。
上記ボタン意外も設置出来ますが、今回はこの3点で説明して行きます。
バックアップを取ってから追記する事をお奨めします。


◆ 各種SNSボタンを横並びにする為のhtmlソース


<div class="sns_button">
<ul>
<li><a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 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><iframe src="//www.facebook.com/plugins/like.php?href=<%topentry_enc_link>&amp;send=false&amp;layout=button_count&amp;width= 110 &amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width: 110px ; height:21px;" allowTransparency="true"></iframe></li>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>" data-text="<%topentry_title>" data-count="horizontal" data-lang="ja">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></li>
</ul>
</div>

class名はお好みで変更しても構いません(変更する場合は、CSSのclass名も変更して下さい)。
<li>~</li>間が、各種ボタンのソースコードです(ボタンを追加する場合、ボタンのソースを<li></li>で括り、<ul>~</ul>間のお好きな位置に追記して下さい)。
FC2ブログをお使いの方で、各種ボタンの種類やサイズ、各記事の抽出情報がそのままで良ければコピペで使えます。
上から「はてブボタン」「いいね!ボタン」「ツイートボタン」ですが、「いいね!ボタン」の横幅(赤字部分)は御自身で調整された方が良いかもしれません(赤字の前後に半角スペースが入っているので御注意下さい)。
「ツイートボタン」のテキスト部分は、個別記事タイトルを抽出する様にしてあります(赤字部分)。
ブログタイトルも入れたい方は、過去記事のソース下をご覧下さい。
御自身のブログのhtmlソース内の<!--topentry--> ~ <!--/topentry-->間に貼付けて、CSSにて調整を行います。


◆ 各種SNSボタンを横並びにする為のCSSソース


/*--- SNSボタン ---*/

.sns_button li {
margin: 10px 5px 10px 0;
float: left;
display: inline;
}

CSSソース内の、一番下にでも追記して下さい。
これは私の例ですが、直下のエントリーフッターが回り込み、レイアウトが崩れてしまいました。
エントリーフッター部分のCSSコードの中に、clear: both;(回り込み解除)を追記しました。
CSSの追記場所が判らない場合は、htmlソース内の先ほど追記したボタンのソースの直下に<br style="clear:both;">を追記してみて下さい。
margin内の数値は、お好みで調整して下さい。

ボタンの並びは記事下の様になります。




>>続きを読む

スポンサーサイト

ブログの記事ごとに『はてブ』(はてなブックマーク)ボタンを設置する方法

ブログの記事ごとに「はてブ」(はてなブックマークボタンを、任意の場所に設置する方法のご紹介です。
記事下に、FC2ブログ用のコピペで使えるソースも記しておきます。
最近は、各社ブログに各種SNS(ソーシャルネットワークサービス)ボタンを設置する機能が備わっていますが、それらの機能で設置したボタンは、予め決められた位置に挿入されてしまいます。
更に、ブログの方でサポートされていないボタンを自身で追加すれば、ボタンは横並びにならずに改行されてしまいます。
SNSボタンを任意の場所に横並びに設置する事を前提に、まず、「はてブ」ボタンを設置してみましょう。

ブログの記事ごとに『はてブ』(はてなブックマーク)ボタンを設置


(設置方法は、FC2ブログ用のものですが、ボタン作成方法は共通です。)

  1. まずブログのサービスの、ボタン設置機能をオフにします。
  2. ボタンを作ります。
  3. ブログのhtmlやcssを書き換えます。

1番の機能オフは、FC2ブログの管理画面の『環境設定の変更』から行います。(現在FC2ブログでは「はてブ」ボタンのサービスはありませんが、場所の確認だけでもしておいて下さい。)
『環境設定』画面上部の『ブログの設定』にカーソルを持って行き、その中の『記事の設定』の中に各種ボタンの設定項目があります。
ここからボタンの設置のオン・オフを決められます。

2番のボタンの作り方です。
はてなブックマークボタンの作成・設置について 』のページで簡単に作れます。

はてなフ#12441;ックマークホ#12441;タンの作成・設置について

ご自身のブログのURLやブログタイトルを記入し、ボタンのタイプを選択するだけです(ココではスタンダードタイプで説明します)。

このエントリーをはてなブックマークに追加 <トップページ用のデモボタン>(コピペしないで下さい)

<a href="http://b.hatena.ne.jp/entry/http://resistance6.blog7.fc2.com/" class="hatena-bookmark-button" data-hatena-bookmark-title="SECTION・9-2nd" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 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>

ただ、このまま貼付けるとURLもタイトルもトップページのもの(記入したもののみの出力)となってしまい、個別の記事のものとはなりません。
なので、URL、タイトル(赤字)のところを個別のもの用(FC2ブログの変数)に書き換えます。
URLのところを<%topentry_link>とし、タイトルのところを<%topentry_title>とします。

<個別記事用のボタン>は、各記事下のボタンをクリックしてみて下さい。

<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 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>

※FC2ブログをお使いの方は、上記をこのままコピペで使えます。
これで個別記事のURLと記事タイトルが出力されます。
< > は、ボタン作成ページで入力すると文字化けしてしまいますので、書き換える必要があります。
記事タイトルの前後にブログタイトルも入れたい方は、<%topentry_title>の前後に<%blog_name> を/や : などで区切って入れれば、同時にブログタイトルも抽出出来ます。

3番目は【テンプレートの設定】のhtml編集画面から、<!--topentry--><!--/topentry-->間の任意の場所に記述すれば、自動で各記事ごとにブックマークボタンが表示されるので便利です。
<div class="sns_button"> ~ </div>など、適当な名前を付けておけば、cssにて位置調整が可能です。


これはFC2ブログ用の記述法ですが、トップページ用のボタンの作成方法は各ブログ共通です。
次回から、「ツイートボタン」「いいねボタン」の設置方法と、横並びに設置する方法をご紹介したいと思います。

このブログの記事下の様な感じの設置方法です。



>>続きを読む

PR Link



☆動画MYページはこちら

バイオハザード オペレーション・ラクーンシティ バナー(120×60)









Link

このブログをリンクに追加する



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。