> カスタマイズ | はてな >
Blogger の投稿フッターにはてなブックマーク件数を表示する方法
のすぐ後に
※
という文字列を挿入して「テンプレートを保存」します。これだけ。ぜひお試しくださーい。
追記（2011-05-05）：
その２
記事を公開した後で、こんなページを発見。
新しい画像が用意されていたんですね。これを Blogger に表示させるコードを考えてみました。こっちの方がいいかも…という人は、手順２の※マークのコードを
に換えて、貼り付けてください。
その３
さらにこんなページも発見。
今度は画像ではなく、はてなのブックマーク件数取得 API を JSONP でたたいて、JavasScript で書き出す方式です。通常の文字列で表示されるので、コメント件数とかの表記と統一させやすいかと。こう表示させたい場合、手順２の※マークのコードを
に換えて、貼り付けてください。
関連（クラシックテンプレートの場合）：
スポンサードリンク：
お願い：
みなさんお気づきのとおり、遅ればせながら、ようやくレイアウトテンプレートの仲間入りをしました。そこで、自分のブログをカスタマイズしていくついでに、その記録をこちらに掲載していこうと思います。
最初は、投稿のフッターにはてなブックマーク件数を表示する方法。
（はてなのヘルプ「自分のブログに「○○users」を表示する」に Blogger についての説明もあるんですが、情報が古く、現在 Blogger で一般に使われているレイアウトテンプレートでの導入方法は書かれていません。）
導入方法
１．Blogger 管理画面「デザイン ＞ HTML の編集」ページで、「ウィジェットのテンプレートを展開」にチェックを入れます。
２．投稿フッター部分 <div class='post-footer'> を見つけ出し（ブラウザの検索機能を使うと便利です）、コメント件数表示部分
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>
のすぐ後に
※
<span class='hatena-bookmark'>
<a expr:href='"http://b.hatena.ne.jp/entry/add/" + data:post.url'><img alt='このエントリーをはてなブックマークに追加' height='12' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='このエントリーをはてなブックマークに追加' width='16'/></a>
<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' target='_blank'><img expr:alt='"はてなブックマーク - " + data:post.title' expr:src='"http://b.hatena.ne.jp/entry/image/" + data:post.url' style='border: none;' expr:title='"はてなブックマーク - " + data:post.title'/></a>
</span>
<a expr:href='"http://b.hatena.ne.jp/entry/add/" + data:post.url'><img alt='このエントリーをはてなブックマークに追加' height='12' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='このエントリーをはてなブックマークに追加' width='16'/></a>
<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' target='_blank'><img expr:alt='"はてなブックマーク - " + data:post.title' expr:src='"http://b.hatena.ne.jp/entry/image/" + data:post.url' style='border: none;' expr:title='"はてなブックマーク - " + data:post.title'/></a>
</span>
という文字列を挿入して「テンプレートを保存」します。これだけ。ぜひお試しくださーい。
追記（2011-05-05）：
その２
記事を公開した後で、こんなページを発見。
新しい画像が用意されていたんですね。これを Blogger に表示させるコードを考えてみました。こっちの方がいいかも…という人は、手順２の※マークのコードを
<span class='hatena-bookmark'>
<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
</span>
<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
</span>
に換えて、貼り付けてください。
その３
さらにこんなページも発見。
今度は画像ではなく、はてなのブックマーク件数取得 API を JSONP でたたいて、JavasScript で書き出す方式です。通常の文字列で表示されるので、コメント件数とかの表記と統一させやすいかと。こう表示させたい場合、手順２の※マークのコードを
<span class='hatena-bookmark'>
<a expr:href='"http://b.hatena.ne.jp/entry/add/" + data:post.url'><img alt='このエントリーをはてなブックマークに追加' height='12' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='このエントリーをはてなブックマークに追加' width='16'/></a>
<a expr:href='"http://b.hatena.ne.jp/entry/"+data:post.url' target='_blank'><script expr:src='"http://api.b.st-hatena.com/entry.count?url=" + data:post.url + "&callback=document.write"' type='text/javascript'/> users</a>
</span>
<a expr:href='"http://b.hatena.ne.jp/entry/add/" + data:post.url'><img alt='このエントリーをはてなブックマークに追加' height='12' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='このエントリーをはてなブックマークに追加' width='16'/></a>
<a expr:href='"http://b.hatena.ne.jp/entry/"+data:post.url' target='_blank'><script expr:src='"http://api.b.st-hatena.com/entry.count?url=" + data:post.url + "&callback=document.write"' type='text/javascript'/> users</a>
</span>
に換えて、貼り付けてください。
関連（クラシックテンプレートの場合）：
スポンサードリンク：
「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。 
記事欄に文字も画像も入力できず、記事欄にくるくる回るマークがとまらず、なのですが、どうすればいいかお教え下さい。宜しくお願いいたします。
ReplyDeleteなお、URLは下記です。
http://dejikame-nikki.blogspot.com/
一昨日から記事欄に不具合がありましたが今なおっています。
ReplyDeleteお騒がせでした。すみません‥‥
返信遅くなってすみません。回復したようでよかったです。ここのところ、Blogger 調子悪いですね。
ReplyDeleteはじめまして。
ReplyDelete先月よりBlooger使っています。
はてなマーク、指示通り入力しましたが、マークが出てきません。
テンプレート保存は無事に出来たのですが...
URLは
http://konkokyo-mk.blogspot.com/
です。
御指導よろしくお願いします。
加えて、質問ですが...
ReplyDeleteブログ内のプロフィール（google＋内の写真）の写真の大きさは変えられるのでしょうか。
サイドバーに合わせた大きさにしたいのですが。
このホームページを見て、スライドショーの幅は変えられました。ありがとうございます。
御指導よろしくお願いします。
もう一つ、すいません。
ReplyDelete「まるカジリます。」で紹介されていた、各ブログパーツの右下に必ず出てくる「編集ボタン」。ある程度は消えたのですが、「読者」の部分と「フッター」の部分のものが、どうやっても消えません。
を消してテンプレート保存を押しても、またが復活して表記されてしまいます。
御指導よろしくお願いいたします。
ブログテンプレートの「HTML の編集」で
ReplyDelete]]></b:skin>
の直前に
#Profile1 img {
width: 170px;
height: 170px;
}
.quickedit {
display: none;
}
というコードを挿入すれば、プロフィール画像がサイドバーと同じぐらいの幅になって、編集ボタンも表示されなくなると思います。
１番目の質問の解決方法はこちらでは分かりません。コードがちゃんと貼り付けられていないのでは？と思います。
ありがとうございました。
ReplyDeleteプロフィール写真、編集ボタン、共に出来ました。
ハテナボタンは、再度試みましたが、ダメでした。
すいません。
ReplyDeleteこの機能は「はてなブックマーク」に登録しないとダメなのでしょうか（ページ上にハテナボタンをつけること）。
そうとして、利用規約を読みましたが、有料サービスなのですか?
御指導よろしくお願いします。
度々すいません。
ReplyDelete「はてなブックマーク作成・設置について」を見ながら再度試みました。テンプレート保存は出来ますが、どうしてもマークが表示されません。改行も注意してやってみましたが･･･
もう一点、投稿欄の「続きを読む」を「（投稿タイトル）を読む」に変更する方法分かれば教えていただけないでしょうか。
御指導よろしくお願いいたします。
こんにちは。
ReplyDelete出来ました、はてなボタン。打ち込む場所が違っていたようです。御迷惑おかけしました。
ありがとうございました。
この操作中、レイアウト中のブログ投稿の編集ボタンからの各アイテムの並べ替えが出来なくなってしまったのですが原因分かりますでしょうか。
それからもう一点の件、投稿欄の「続きを読む」を「（投稿タイトルの）続きを読む」に変更する方法分かれば教えていただけないでしょうか。
どうぞ御指導よろしくお願いいたします。
プロフィール写真、編集ボタン、はてブボタンともうまくいったようでよかったです。
ReplyDeleteアイテムの並べ替え不能については分かりません。お力になれずすみません。
投稿欄の「続きを読む」を「（投稿タイトルの）続きを読む」に変更する方法については、今週このブログで記事にするつもりです。しばらくお待ちください。
了解です。
ReplyDelete投稿楽しみにしています。
ありがとうございました。
記事投稿しました。ご確認ください。
ReplyDeleteクリボウの Blogger Tips: Blogger 「続きを読む」リンクに投稿タイトルを表示する方法
http://emcmee.jimdo.com/
ReplyDeletehttp://emcmee.jimdo.com/%D8%B4%D8%B1%D9%83%D8%A9-%D9%86%D9%82%D9%84-%D8%A7%D8%AB%D8%A7%D8%AB-%D8%A8%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6/ شركة نقل عفش بالرياض
http://emcmee.jimdo.com/%D8%B4%D8%B1%D9%83%D8%A9-%D9%86%D9%82%D9%84-%D8%B9%D9%81%D8%B4-%D8%A8%D8%A7%D9%84%D8%B7%D8%A7%D8%A6%D9%81/ شركة نقل عفش بالطائف
http://emcmee.jimdo.com/%D8%B4%D8%B1%D9%83%D8%A9-%D9%86%D9%82%D9%84-%D8%B9%D9%81%D8%B4-%D8%A8%D8%A7%D9%84%D8%AF%D9%85%D8%A7%D9%85/ شركة نقل عفش بالدمام
http://emcmee.jimdo.com/%D8%B4%D8%B1%D9%83%D8%A9-%D9%86%D9%82%D9%84-%D8%A7%D8%AB%D8%A7%D8%AB-%D8%A8%D8%AC%D8%AF%D8%A9/ شركة نقل عفش بجدة
http://emcmee.jimdo.com/%D8%B4%D8%B1%D9%83%D8%A9-%D9%86%D9%82%D9%84-%D8%B9%D9%81%D8%B4-%D8%A8%D8%A7%D9%84%D9%85%D8%AF%D9%8A%D9%86%D8%A9-%D8%A7%D9%84%D9%85%D9%86%D9%88%D8%B1%D8%A9/ شركة نقل عفش بالمدينة المنورة
ReplyDeletehttp://emcmee.jimdo.com/%D8%B4%D8%B1%D9%83%D8%A9-%D8%AA%D9%86%D8%B8%D9%8A%D9%81-%D8%A8%D8%A7%D9%84%D8%B7%D8%A7%D8%A6%D9%81/ شركة تنظيف بالطائف
https://emcmee.jimdo.com/%D8%B4%D8%B1%D9%83%D8%A9-%D8%AA%D9%86%D8%B8%D9%8A%D9%81-%D8%AE%D8%B2%D8%A7%D9%86%D8%A7%D8%AA-%D8%A8%D8%A7%D9%84%D9%85%D8%AF%D9%8A%D9%86%D8%A9-%D8%A7%D9%84%D9%85%D9%86%D9%88%D8%B1%D8%A9/ تنظيف خزانات بالمدينة المنورة
http://emcmee.blogspot.com.eg/2017/02/blog-post.html
http://emcmee.blogspot.com.eg/2017/02/blog-post_7.html
شركة تنظيف بالطائف
ReplyDeleteشركات نقل عفش
شركة تنظيف خزانات بجدة
شركة نقل عفش بجدة
شركة نقل عفش بالدمام