自分のブログに「↑B」「B!」アイコンを表示する

「このエントリーをはてなブックマークに追加」アイコン()等について

「このエントリーをはてなブックマークに追加」アイコン()、「このエントリーを含むはてなブックマーク」アイコン()について

はてなブックマーク内の各エントリーへのリンクや、外部の様々なサービスのタイトル部分などに設置された「このエントリーをはてなブックマークに追加」というアイコン()をクリックすると、はてなブックマークにそのエントリーを追加することができます。

また、はてなダイアリーでは日記の設定画面から「このエントリーを含むブックマーク」というアイコン()を表示させることができ、このリンクを辿ることで、エントリーページ(コメント一覧が表示されるページ)にて自分の書いたエントリーに対するブックマークについたコメントを一覧したり、さらにブックマークしてもらうためのナビゲーションを行うことができます。

このページでは、この「このエントリーをはてなブックマークに追加」「このエントリーを含むはてなブックマーク」アイコンを各ブログサービスで表示させる方法を紹介しています。

はてなダイアリー

ページ右上の「管理」をクリックして、管理ツールに移動する。
左サイドバーの「設定」をクリック、「記事の設定」に移動する。
「表示設定」の「 「このエントリーを含むブックマーク」アイコンを表示する」にチェックを入れて、内容を保存してください。

※はてなグループの日記でも同様の設定をすることで、自分の日記に「このエントリーを含むブックマーク」を表示させることができます。

Blogger

まず、http://b.hatena.ne.jp/images/append.gif()、http://b.hatena.ne.jp/images/b_entry.gif() からそれぞれのボタンの画像を保存します。
次に、Blogger の投稿画面から画像をアップロードします。完了したらアップロードした画像の URL をメモ帳か何かに控えておいてください。
「テンプレート」タブから「現在の内容を編集」欄の  と  に囲まれた以下の部分を次のように編集します。

  ...
  </BlogItemCommentsEnabled></MainOrArchivePage>  <$BlogItemControl$>
  </p>
  ...

を

  ...
  </BlogItemCommentsEnabled></MainOrArchivePage>  <$BlogItemControl$>
  <a href="http://b.hatena.ne.jp/entry/add/<$BlogItemPermalinkUrl$>">
  <img src="アップロードした「B!」画像のURL" width="16" height="12" style="border: none;"
   alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" />
  </a>
  <a href="http://b.hatena.ne.jp/entry/<$BlogItemPermalinkUrl$>">
  <img src="アップロードした「↑B」画像のURL" width="16" height="12" style="border: none;"
   alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" />
  </a>
  </p>
  ...

のように記述して保存してください。アップロードした画像の URL には、先にアップロードした画像の URL を指定します。

※実際には改行をいれずに一行で記述してください。

ココログプロ

まず、http://b.hatena.ne.jp/images/append.gif()、http://b.hatena.ne.jp/images/b_entry.gif() からそれぞれのボタンの画像を保存します。
次に、ココログのメニューから画像をアップロードします。完了したらアップロードした画像の URL をメモ帳か何かに控えておいてください。
「Main Index」と「Individual Archives」のテンプレートを以下のように編集します。

  ...
  </MTEntryIfCategories> | <a href="<$MTEntryPermalink$>">固定リンク</a>
  </p>
  ...

を

  ...
  </MTEntryIfCategories> | <a href="<$MTEntryPermalink$>">固定リンク</a>
  <a href="http://b.hatena.ne.jp/entry/add/<$MTEntryPermalink>">
  <img src="アップロードした「B!」画像のURL" width="16" height="12" style="border: none;"
   alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" />
  </a>
  <a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink>">
  <img src="アップロードした「↑B」画像のURL" width="16" height="12" style="border: none;"
   alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" />
  </a>
  </p>
  ...

のように記述して保存してください。アップロードした画像の URL には、先にアップロードした画像の URL を指定します。

※実際には改行をいれずに一行で記述してください。

※「Individual Archives」も、手順は「Main Index」の場合とほとんど一緒です。

FC2 BLOG

まず、http://b.hatena.ne.jp/images/append.gif()、http://b.hatena.ne.jp/images/b_entry.gif() からそれぞれのボタンの画像を保存します。
次に、「ファイルアップロード」から画像をアップロードします。完了したらアップロードした画像の URL をメモ帳か何かに控えておいてください。
「テンプレートの設定＞修正」から「HTMLの編集」を以下のように編集します。(「default」テンプレートの場合)

  ...
  <!--deny_comment-->コメント(-)<!--/deny_comment-->
  </li>
  ...

を

  ...
  <!--deny_comment-->コメント(-)<!--/deny_comment-->
  </li>
  <li>
  |<a href="http://b.hatena.ne.jp/entry/add/<%topentry_link>">
  <img class="b_entry" src="アップロードした「B!」画像のURL" width="16" height="12"
   alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" /></a>
  <li>
  |<a href="http://b.hatena.ne.jp/entry/<%topentry_link>">
  <img class="b_entry" src="アップロードした「↑B」画像のURL" width="16" height="12"
   alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
  </li>
  ...

のように記述して保存してください。アップロードした画像の URL には、先にアップロードした画像の URL を指定します。

※実際には改行をいれずに一行で記述してください。

最後に、テンプレートのCSSで「.body img」に対してスタイルが指定してあるので、スタイルシートに以下の指定を追加します。

  /* 「はてなブックマークに追加」ボタン */
  img.b_entry{
    float: none;
    clear: both;
    border: none;
  }
  /* 「含むはてなブックマーク」ボタン */
  img.b_entry{
    float: none;
    clear: both;
    border: none;
  }

gooブログアドバンス

まず、http://b.hatena.ne.jp/images/append.gif()、http://b.hatena.ne.jp/images/b_entry.gif() からそれぞれのボタンの画像を保存します。
次に、画像フォルダにボタンの画像をアップロードします。完了したらアップロードした画像の URL をメモ帳か何かに控えておいてください。
「デザインメニュー」で「カスタムテンプレート」を選択し、「テンプレートの編集」でHTMLの部分を以下のように編集します。

  ...
  <span class="etTBLink">Trackback
   ( {include file="/home/gooblog/Smarty/blog/templates/trackback_link.tpl"} )</span> </div>
  ...

を

  ...
  <span class="etTBLink">Trackback
   ( {include file="/home/gooblog/Smarty/blog/templates/trackback_link.tpl"} )</span>
  
  <a href="http://b.hatena.ne.jp/entry/add/{$entry_url[entry]}">
  <img src="アップロードした「B!」画像のURL" width="16" height="12" style="border: none;"
   alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加">
  </a>
  
  <a href="http://b.hatena.ne.jp/entry/{$entry_url[entry]}">
  <img src="アップロードした「↑B」画像のURL" width="16" height="12" style="border: none;"
   alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク">
  </a>
  </div>
  ...

のように記述して保存してください。アップロードした画像の URL には、先にアップロードした画像の URL を指定します。

※実際には改行をいれずに一行で記述してください。

JUGEM･ロリポブログ

まず、http://b.hatena.ne.jp/images/append.gif()、http://b.hatena.ne.jp/images/b_entry.gif() からそれぞれのボタンの画像を保存します。
次に、「画像の管理」から画像をアップロードします。完了したらアップロードした画像の URL をメモ帳か何かに控えておいてください。
「テンプレートの編集」から「 HTML編集フォーム」欄を以下のように編集します。

  ...
  <div class="entry_state">| {category_name} | {entry_time} | {comment_num} | {trackback_num} 
  </div>
  ...

を

  ...
  <div class="entry_state">| {category_name} | {entry_time} | {comment_num} | {trackback_num} 
  | <a href="http://b.hatena.ne.jp/entry/add/{entry_permalink}"><img src="アップロードした「B!」画像のURL"
   width="16" height="12" style="border: none;" alt="このエントリーをはてなブックマークに追加"
   title="このエントリーをはてなブックマークに追加" /></a> 
  | <a href="http://b.hatena.ne.jp/entry/{entry_permalink}"><img src="アップロードした「↑B」画像のURL"
   width="16" height="12" style="border: none;" alt="このエントリーを含むはてなブックマーク"
   title="このエントリーを含むはてなブックマーク" /></a> 
  </div>
  ...

のように記述して保存してください。アップロードした画像の URL には、先にアップロードした画像の URL を指定します。

※実際には改行をいれずに一行で記述してください。

livedoor Blog

まず、http://b.hatena.ne.jp/images/append.gif()、http://b.hatena.ne.jp/images/b_entry.gif() からそれぞれのボタンの画像を保存します。
次に、「管理ページトップ＞ファイルの管理＞ファイルのアップロード」から画像をアップロードします。完了したらアップロードした画像の URL をメモ帳か何かに控えておいてください。
「管理ページトップ＞カスタマイズ/管理」より「デザインのカスタマイズ」を選択。
「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」のテンプレートをそれぞれ以下のように編集します。

  ...
  <li class="article-tool-box"><$ArticleToolBox$></li>
	</ul>
  ...

を

  ...
	<li class="article-tool-box"><$ArticleToolBox$>
<a href="http://b.hatena.ne.jp/entry/add/<$ArticlePermalink$>">
	<img src="アップロードした「B!」画像のURL" width="16"
	height="12" style="border: none;" alt="このエントリーをはてなブックマークに追加"
	title="このエントリーをはてなブックマークに追加" /></a>
<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>">
	<img src="アップロードした「↑B」画像のURL" width="16"
	height="12" style="border: none;" alt="このエントリーを含むはてなブックマーク"
	title="このエントリーを含むはてなブックマーク" /></a>
	</li>
	</ul>
  ...

最後に、「スタイルシート（CSS）」に以下の指定を追加します。

	/* 「はてなブックマークに追加」ボタン */
	li.article-tool-box img {
	border:0 none;
	vertical-align:middle;
	}
	/* 「含むはてなブックマーク」ボタン */
	li.article-tool-box img {
	border:0 none;
	vertical-align:middle;
	}

※この設定手順は「デフォルト2008（スカイ、3カラム）」に合わせて制作されています。ご自分が選択されているデザインに合わせて適宜変更してください。

※「個別記事」「カテゴリ別アーカイブ」「月別アーカイブ」も、手順は「トップページ」の場合とほとんど一緒です。

※実際には改行をいれずに一行で記述してください。

Movable Type

まず、http://b.hatena.ne.jp/images/append.gif()、http://b.hatena.ne.jp/images/b_entry.gif() からそれぞれのボタンの画像を保存します。
次に、Movable Type のメニューから画像をアップロードします。完了したらアップロードした画像の URL をメモ帳か何かに控えておいてください。
「Main Index」と「Individual Archives」(最近のバージョンでは「メインページ」、「個別エントリーアーカイブ」)のテンプレートを以下のように編集します。

  ...
  </MTEntryIfAllowPings>
  </p>
  ...

を

  ...
  </MTEntryIfAllowPings>
  <a href="http://b.hatena.ne.jp/entry/add/<$MTEntryPermalink$>">
  <img src="アップロードした「B!」画像のURL" width="16" height="12" style="border: none;"
   alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" />
  </a>
  <a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>">
  <img src="アップロードした「↑B」画像のURL" width="16" height="12" style="border: none;"
   alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" />
  </a>
  </p>
  ...

のように記述して保存してください。アップロードした画像の URL には、先にアップロードした画像の URL を指定します。

※実際には改行をいれずに一行で記述してください。

※Individual Archives (個別エントリーアーカイブ) も、手順は Main Index の場合とほとんど一緒です。

忍者ブログ

まず、http://b.hatena.ne.jp/images/append.gif()、http://b.hatena.ne.jp/images/b_entry.gif() からそれぞれのボタンの画像を保存します。
次に、ファイルアップロードから画像をアップロードします。完了したらアップロードした画像の URL をメモ帳か何かに控えておいてください。
BLOG管理TOPから「テンプレート設定/編集」と進み、使用したいテンプレートの「修正」をクリックします。右上に表示されるHTMLを以下のように編集します(「スタンダード」テンプレートの場合)。

  ...
  <a href="<!--$entry_link-->#comment">COMMENT[<!--$entry_comment_num-->]</a>
  </span>
  <!--/if_cm_receipt-->
  <br>
  ...

を

  ...
  <a href="<!--$entry_link-->#comment">COMMENT[<!--$entry_comment_num-->]</a>
  </span>
  <!--/if_cm_receipt-->
  <span class="AppendBookmark">
  <img src="http://file.samurai.blog.shinobi.jp/default_entry_footer_arrow.gif">
  <a href="http://b.hatena.ne.jp/entry/add/ブログのURL<!--$entry_link-->">
  <img src="アップロードした「B!」画像のURL"  width="16" height="12" style="border: none;"
   alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" /></a>
  </span>
  <span class="EntryBookmark">
  <img src="http://file.samurai.blog.shinobi.jp/default_entry_footer_arrow.gif">
  <a href="http://b.hatena.ne.jp/entry/ブログのURL<!--$entry_link-->">
  <img src="アップロードした「↑B」画像のURL"  width="16" height="12" style="border: none;"
   alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
  </span>
  <br>
  ...

のように記述してください。アップロードした画像の URL には、先にアップロードした画像の URL を指定します。ブログのURLの最後にはスラッシュを付けず、「http://hatena.blog.shinobi.jp」のように記述します。

※実際には改行をいれずに一行で記述してください。

最後に、HTMLの下にあるCSS編集欄から「.EntryBookmark」に対して以下の指定を追加します。

  /* 「はてなブックマークに追加」ボタン */
  .AppendBookmark {
      margin-left: 5px;
  }
  /* 「含むはてなブックマーク」ボタン */
  .EntryBookmark {
      margin-left: 5px;
  }

のように記述して保存して、そのテンプレートを使用するよう設定してください。

Seesaa Blog

まず、http://b.hatena.ne.jp/images/append.gif()、http://b.hatena.ne.jp/images/b_entry.gif() からそれぞれのボタンの画像を保存します。
次に、ツールから画像をアップロードします。完了したらアップロードした画像の URL をメモ帳か何かに控えておいてください。
「デザイン＞コンテンツ」と進み、記事ページの設定画面に移ります。右上に表示される「コンテンツHTML編集」というリンクから、「記事ページコンテンツ」を以下のように編集します。

  ...
  <% if:style.disp_category %>| <a href="<% article_category.page_url %>">
  <% article_category.name %></a><% /if %>
  </div>
  ...

を

  ...
  <% if:style.disp_category %>| <a href="<% article_category.page_url %>">
  <% article_category.name %></a><% /if %>
  <a href="http://b.hatena.ne.jp/entry/add/<% article.page_url %>">
  <img src="アップロードした「B!」画像のURL" width="16" height="12" style="border: none;"
   alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" /></a>
  <a href="http://b.hatena.ne.jp/entry/<% article.page_url %>">
  <img src="アップロードした「↑B」画像のURL" width="16" height="12" style="border: none;"
   alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
  </div>
  ...

のように記述して保存してください。アップロードした画像の URL には、先にアップロードした画像の URL を指定します。

※実際には改行をいれずに一行で記述してください。

ヤプログ！

まず、http://b.hatena.ne.jp/images/append.gif()、http://b.hatena.ne.jp/images/b_entry.gif() からそれぞれのボタンの画像を保存します。
次に、どこか適当な下書きエントリーに画像をアップロードします。完了したらアップロードした画像の URL をメモ帳か何かに控えておいてください。
「スキン＞フリースキン編集」から「メインテンプレート」「アーカイブテンプレート」「１記事テンプレート」を以下のように編集します。

  ...
  <BlogEntryIfAllowPings>　/　<a href="{$BlogEntryPermalinkUrl$}#Trackback">トラックバック
  ({$BlogEntryTrackbackCount$})</a></BlogEntryIfAllowPings>
  ...

を

  ...
  <BlogEntryIfAllowPings>　/　<a href="{$BlogEntryPermalinkUrl$}#Trackback">トラックバック
  ({$BlogEntryTrackbackCount$})</a></BlogEntryIfAllowPings>
  　/　<a href="http://b.hatena.ne.jp/entry/add/{$BlogEntryPermalinkUrl$}">
  <img src="アップロードした「B!」画像のURL" width="16" height="12"
   style="border: none;" alt="このエントリーをはてなブックマークに追加"
   title="このエントリーをはてなブックマークに追加" /></a> 
   　/　<a href="http://b.hatena.ne.jp/entry/{$BlogEntryPermalinkUrl$}">
  <img src="アップロードした「↑B」画像のURL" width="16" height="12"
   style="border: none;" alt="このエントリーを含むはてなブックマーク"
   title="このエントリーを含むはてなブックマーク" /></a> 
  ...

のように記述して保存してください。アップロードした画像の URL には、先にアップロードした画像の URL を指定します。

※実際には改行をいれずに一行で記述してください。