スポンサーサイト

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

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

ブログの記事ごとに「はてブ」(はてなブックマークボタンを、任意の場所に設置する方法のご紹介です。
記事下に、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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。