So-net無料ブログ作成
検索選択

so-net blog に「はてな」のカウンタを付けてみた [BLOG]このエントリーを含むはてなブックマーク#

HatenaIcon.png

so-net blogにも、だいぶなれたので、いらない事をしてみたくなりました。 今日は、so-net blog 限定のネタです。

今日の話題は、HTMLを自分で書き換えるお話です。 失敗するとBLOGが正常に表示されなくなりますので、HTMLに不慣れな方には、お勧めできません。 自信のある方のみ、お試しください。

はてなのブックマークカウンターを表示する

某さわぎに関連して、はてなブックマークを参照していたら、 「はてなブックマークカウンターを自分のサイトに貼り付ける」という広告が出ていました。 読んでみたら、このBLOGでもできそうなので、付けてみました。 タイトル画像の右側の「なす」の下がそれです。

WS000128.png

設定するところは、「管理ページ」の「デザイン」-「レイアウト」タブの中にあります。 ここでは、BLOGのサイド・バーの配置などの設定をすることが出来ますが、もっと高度なサイド・コンテンツの中身の編集もすることができます。 今回、ブックマークカウンタを付けたのは、「プロフィール」というコンテンツです。 「プロフィール」と書かれた所をクリックします。

すると、ブラウザ内に「プロフィール」ウィンドウが開きます。 このウィンドウの右上にある「コンテンツHTML編集」をクリックすると、「プロフィール」部分の中身を編集するエディタが開きます。 下から4行目に<% content.footer -%>と書かれた行があるので、その上に以下のように記述します。

<a href="http://b.hatena.ne.jp/entrylist?url=<% blog.page_url | html %>"><img
src="http://b.hatena.ne.jp/bc/pr/<% blog.page_url | html %>" class="bcounter"
alt="新適当マイコン電子工作研究所のはてなブックマーク数"
title="新適当マイコン電子工作研究所のはてなブックマーク数"></a>
<% content.footer -%>

alt属性とtitle属性は、お好みにより変更してください。 また、色もはてなのページを参照してお好みにより変更してください。 変更が終わったら、「保存」ボタンをクリックし、右上の「プロフィールの設定に戻る」をクリックし、戻った画面で「設定を保存する」をクリックします。 これで、「プロフィール」サイド・コンテンツに「ブックマークカウンター」が表示されるようになります。

はてなの被ブックマーク数を表示する

次は、「自分のブログに被ブックマーク数を表示する」に挑戦します。 タイトル画像の左側の矢印の部分です。 被ブックマーク数は、BLOGの記事ごとに表示させます。 「ブックマークカウンター」の設定の時と同様に「管理ページ」の「デザイン」-「レイアウト」タブを開きます。

WS000127.png

今度は、「記事」と書かれたところをクリックします。 「プロフィール」の時と同じように「コンテンツHTML編集」をクリックし、エディタを開きます。 今回の変更箇所は、上から3分の1のところにある、<h2 class="articles-title">と書かれた行です。 この行は、かなり長々とした行です。 その最後尾にさらに以下の記述を追加します。

article.id %>">[編集]</a></span><% /if %><a
href="http://b.hatena.ne.jp/entry/<% article.page_url | html %>"><img
src="http://b.hatena.ne.jp/entry/image/large/<% article.page_url | html %>"></a></h2>
<% if:page_name eq 'article' -%>

編集が終わったら、「保存」ボタンをクリックし、右上の「記事の設定に戻る」をクリックし、戻った画面で「設定を保存する」をクリックします。 これで、記事に「被ブックマーク数」が表示されるようになります。 ただし、全くブックマークを付けられていない記事には、1ドットX1ドットの画像が表示されるので、何も無いように見えます。

はてなのブックマーク・ボタンを表示する

最後は、『あなたのブログに「このエントリーを含むはてなブックマーク」ボタンを表示させる』に挑戦します。 この設定を行う前に、ボタンの画像データをダウンロードしなくてはなりません。 上に示したWEBページからボタン画像をダウンロードして、so-netブログにアップロードします。 このとき、アップロード先のURLを記録しておきます。

設定変更箇所は、先ほどと同じ「記事」の「コンテンツHTML編集」です。 <h2 class="articles-title">と書かれた行をさらに以下のように変更します。

article.id %>">[編集]</a></span><% /if %><a
href="http://b.hatena.ne.jp/entry/<% article.page_url %>"><img
src="/_images/blog/_06e/noritan_micon/b_entry.png" width="16" height="12"
style="border: none;"
alt="このエントリーを含むはてなブックマーク"
title="このエントリーを含むはてなブックマーク" /></a><a
href="http://b.hatena.ne.jp/entry/<% article.page_url | html %>"><img
src="http://b.hatena.ne.jp/entry/image/large/<% article.page_url | html %>"></a></h2>
<% if:page_name eq 'article' -%>

alt属性とtitle属性は、お好みにより変更してください。 また、src属性の部分には、アップロードした「ブックマーク・ボタン」のURLを各自で設定してください。 これで、ブックマーク・ボタンが表示されるようになります。


このBLOGでは、それぞれの記事の最後にもボタンとカウンタを表示させています。 他の場所にも付けられると思いますので、工夫を凝らしてみてください。


nice!(0)  コメント(2)  トラックバック(0)  このエントリーを含むはてなブックマーク#

nice! 0

コメント 2

hamayan

うーん、上手くできませんでした。
と言うか、「はてなブックマーク」って何だろう?。
by hamayan (2008-04-06 01:03) 

noritan

最後の適用例でコロンが正しくエスケープされていませんでしたので、修正しました。それ以外は間違っていないと思います。

so-net BLOGは、HTMLを生成する方法が何箇所かあるらしく、私の場合には、「レイアウト」から参照される「コンテンツHTML編集」が反応しました。他にも「HTML編集」タブというのもありますが、ここを修正しても変化がありませんでした。

「はてなブックマーク」というのは、トラックバックみたいなものらしいのですが、トラックバックとは違い、ブックマークされた事はこちらには知らされないみたいです。そこで、「被ブックマーク数」カウンタをつけて、どこからブックマーク(リンク)されているかを知っておこうと思ったのです。

by noritan (2008-04-06 12:26) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

トラックバックの受付は締め切りました

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。