October 08, 2005
livedoor blog に「はてなブックマーク」ボタンを表示する その2
livedoor blog に「はてなブックマーク」ボタンを表示する その1、の続き。
さて、はてなブを表示するタグは解明出来たので、今度は、これを貼り付けるんだけれども、貼り付け先は、
「ブログの設定/管理」>「デザインの設定」>「カスタマイズ」
から、CSSはイジくらず、各々のページのhtml編集画面へ。
参考にさせていただいた、無ブロでビブロさんは、トラックバックやカテゴリのあとに付けられてまして、僕も最初これを試してみたんですが、livedoorの場合、カテゴリが二重になってるし、「Edit」ボタンも付けてるしで、ちょと五月蝿い感じが。
で、やっぱARTIFACT ―人工事実―みたくタイトル横に付けられないかと試行錯誤してましたら、出来ました偶然(笑)
まずは、トップページ及び個別記事のhtml。
次の部分に、赤字のタグを挿入してください。
<div class="datebody"><h2 class="date"><$ArticleDate$></h2></div>
<div class="blogbodytop"></div>
<div class="blogbody">
<div class="titlebody"><h3 class="title"><$ArticleTitle ESCAPE$><IfArticleRating><$ArticleRatingIcon$></IfArticleRating>
<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>">
<img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;"
alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
</h3></div>
次に、カテゴリアーカイブと月別アーカイブの場合。
<div class="fullbody">
<IfDateChanged><div class="datebody"><h2 class="date"><$ArticleDate$></h2></div></IfDateChanged>
<div class="blogbodytop"></div>
<div class="blogbody">
<a name="<$ArticleId$>"></a><h3 class="title"><$ArticleTitle ESCAPE$><IfArticleRating><$ArticleRatingIcon$></IfArticleRating>
<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>">
<img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;"
alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
<div class="titlebody"></h3></div>
各々で前後のタグは微妙に違うと思いますが、
ちなみに、ブックマークボタンの色は、デフォルトの青以外にも以下の通りありますので、blogの色味と合わないなーって場合は、画像リンクのURLを変更してみるとよろし。
今日は相方(…じゃないんだな、もう)も来ず、SさんZさんもご旅行行かれたり仕事が忙しかったりで、なーんもなくて、ひとりでショボーン(´・ω・`)としておりましたので、頑張って記事書いてみました。
嗚呼、なんか空しい…
さて、はてなブを表示するタグは解明出来たので、今度は、これを貼り付けるんだけれども、貼り付け先は、
「ブログの設定/管理」>「デザインの設定」>「カスタマイズ」
から、CSSはイジくらず、各々のページのhtml編集画面へ。
参考にさせていただいた、無ブロでビブロさんは、トラックバックやカテゴリのあとに付けられてまして、僕も最初これを試してみたんですが、livedoorの場合、カテゴリが二重になってるし、「Edit」ボタンも付けてるしで、ちょと五月蝿い感じが。
で、やっぱARTIFACT ―人工事実―みたくタイトル横に付けられないかと試行錯誤してましたら、出来ました偶然(笑)
まずは、トップページ及び個別記事のhtml。
次の部分に、赤字のタグを挿入してください。
<div class="datebody"><h2 class="date"><$ArticleDate$></h2></div>
<div class="blogbodytop"></div>
<div class="blogbody">
<div class="titlebody"><h3 class="title"><$ArticleTitle ESCAPE$><IfArticleRating><$ArticleRatingIcon$></IfArticleRating>
<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>">
<img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;"
alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
</h3></div>
次に、カテゴリアーカイブと月別アーカイブの場合。
<div class="fullbody">
<IfDateChanged><div class="datebody"><h2 class="date"><$ArticleDate$></h2></div></IfDateChanged>
<div class="blogbodytop"></div>
<div class="blogbody">
<a name="<$ArticleId$>"></a><h3 class="title"><$ArticleTitle ESCAPE$><IfArticleRating><$ArticleRatingIcon$></IfArticleRating>
<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>">
<img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;"
alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
<div class="titlebody"></h3></div>
各々で前後のタグは微妙に違うと思いますが、
- <h3>という見出しタグを閉じる直前につけること
- ただし、トップページ/個別記事のには、カテゴリアーカイブ/月別アーカイブにある<div class="titlebody">というタグがない
ちなみに、ブックマークボタンの色は、デフォルトの青以外にも以下の通りありますので、blogの色味と合わないなーって場合は、画像リンクのURLを変更してみるとよろし。
| 標準(青) | http://d.hatena.ne.jp/images/b_entry.gif | ![]() |
| グレー | http://d.hatena.ne.jp/images/b_entry_dg.gif | ![]() |
| 緑 | http://d.hatena.ne.jp/images/b_entry_gr.gif | ![]() |
| 紫 | http://d.hatena.ne.jp/images/b_entry_pr.gif | ![]() |
| 茶 | http://d.hatena.ne.jp/images/b_entry_br.gif | ![]() |
| 赤 | http://d.hatena.ne.jp/images/b_entry_rd.gif | ![]() |
| セピア | http://d.hatena.ne.jp/images/b_entry_sp.gif | ![]() |
| ピンク | http://d.hatena.ne.jp/images/b_entry_pk.gif | ![]() |
| 抹茶 | http://d.hatena.ne.jp/images/b_entry_te.gif | ![]() |
| ライトグレー | http://d.hatena.ne.jp/images/b_entry_lg.gif | ![]() |
| ライトブルー | http://d.hatena.ne.jp/images/b_entry_lb.gif | ![]() |
| 白 | http://d.hatena.ne.jp/images/b_entry_wh.gif | ![]() |
| オレンジ | http://d.hatena.ne.jp/images/b_entry_or.gif | ![]() |
| ライム | http://d.hatena.ne.jp/images/b_entry_li.gif | ![]() |
| 黒 | http://d.hatena.ne.jp/images/b_entry_bl.gif | ![]() |
今日は相方(…じゃないんだな、もう)も来ず、SさんZさんもご旅行行かれたり仕事が忙しかったりで、なーんもなくて、ひとりでショボーン(´・ω・`)としておりましたので、頑張って記事書いてみました。
嗚呼、なんか空しい…
トラックバックURL
この記事へのトラックバック
1. ■ [ Kusumiの日記 ] September 19, 2006 13:54
少し前の日付のブックマークボタンの色が茶色なのは、前に茶色のデザインを使ってたから。納得。 http://1yard.livedoor.biz/archives/50122558.html





































