FIDELIブログをカスタマイズしよう

Blogの特徴は記事に対してコメントしたりやトラックバックしたりすることです。
最近はソーシャルブックマークというものが無視できなくなってきています。

もともとソーシャルブックマークはWeb上のブックマークなのですが、
ランキング機能があって、多くの人がブックマークをしている記事がわかるわけで。

いいなぁと思った記事や印象に残った記事をブックマークすることによって、「みんなも見てよ」というような意思表示ができます。
面と向かってコメントしたり、トラックバックするのもいろいろと気を使いますが、これなら、自分がはてなブックマークなどに登録していたら、クリック一つなので気軽です。

ランキングが上がった記事は更に読まれてブックマークされるという循環が出てきます。

勝間和代氏が「はてブトルネード」という言葉を造りましたが、

アルファロガーに書評をとりあげられる。
↓
読者がはてブに登録
↓
はてブの「最近の人気エントリー」に紹介
↓
多くの読者に読まれる
↓
多くの読者がはてブに登録
↓
はてブの「最近の人気エントリー」に紹介
↓
amazonで瞬時にその本が売れる。


という流れらしいです。
週刊ダイヤモンド　2008年2月9日　特大号 　第96巻6号より

そういう前置きでFideliにブックマークをおきましょう。

最初は「はてブ」のブックマークのアイコンの出し方を考えましたが、
もっと便利なものがありましたので、これを紹介


AddClips ソーシャルブックマークボタン統合サービス
http://www.addclips.org/


ソーシャルブックマークといえばはてブですが、Yahooとかライブドアもあるので、国内の有力ソーシャルブックマークに対応しているようです。
メジャーどころのブログであれば、コードを自動生成しますが、Fideliは無かったので以下のコードを貼り付けます。


※注意
スキンが「HTML/CSS 可能」タイプのみが付けられます。
そうでない人は HTML/CSS可能タイプにスキンを変えましょう。
今回紹介するタイプはこのブログのスキン「青のシンプルタイプ HTML/CSS可能」です。最近のブログのスキンはコードのスタイルが違います。


■タイプ1 ポップアップタイプ
<!-- AddClips Code START -->
<script type="text/javascript">
AddClipsUrl = '{$BlogEntryPermalinkUrl$}';
AddClipsTitle = '{$BlogEntryTitle$} - {$BlogName$}';
AddClipsId = '15AC56A39B320';
AddClipsBcolor='#78BE44';
AddClipsNcolor='#D1E9C0';
AddClipsTcolor='#666666';
AddClipsType='1';
AddClipsVerticalAlign='middle';
</script><script type="text/javascript" src="<リンク:http://js.addclips.org/v2/addclips.js>http://js.addclips.org/v2/addclips.js" charset="utf-8"></script>
<!-- AddClips Code END -->

■タイプ2 別ウィンドウタイプ

<!-- AddClips Code START -->
<a href="http://www.addclips.org/addclips.php" onclick="AddClipsUrl = '{$BlogEntryPermalinkUrl$}'; AddClipsTitle = '{$BlogEntryTitle$} - {$BlogName$}'; return AddClipsWindow(this);" target="_blank"><img src="http://img.addclips.org/addclips_1.gif" width="141" height="16" border="0" alt="ブックマークに追加する" style="vertical-align:middle;" /></a><script type="text/javascript">var AddClipsId = '1566290E16E11';</script><script type="text/javascript" src="<リンク:http://js.addclips.org/v1/addclips.js>http://js.addclips.org/v1/addclips.js"></script>
<!-- AddClips Code END -->

色とか、ブックマークのアイコンの形などはカスタマイズできます。
腕に自信のある方は挑戦してみて下さい。
とりあえず一番大きくて、デフォルトの色にしてあります。

これを
ブログ管理>デザイン設定>フリースキン編集にて

・メインテンプレート
・アーカイブテンプレート
・1記事テンプレート

に組み込みます。

組み込む場所は

| <a href="{$BlogEntryCategoryLink$}">{$BlogEntryCategory$}</a></BlogEntryIfCategory>
| <a href="{$BlogEntryPermalinkUrl$}">この記事のURL</a> <BlogEntryIfAllowComments>
| <a href="{$BlogEntryPermalinkUrl$}#comments">コメント({$BlogEntryCommentCount$})</a></BlogEntryIfAllowComments><BlogEntryIfAllowPings>
| <a href="{$BlogEntryPermalinkUrl$}#Trackback">トラックバック({$BlogEntryTrackbackCount$})</a></BlogEntryIfAllowPings>
****ここに挿入 *****
</td>
</tr>

で

このブログでは以下のようにしてあります。
| <a href="{$BlogEntryCategoryLink$}">{$BlogEntryCategory$}</a></BlogEntryIfCategory>
| <a href="{$BlogEntryPermalinkUrl$}">この記事のURL</a> <BlogEntryIfAllowComments>
| <a href="{$BlogEntryPermalinkUrl$}#comments">コメント({$BlogEntryCommentCount$})</a></BlogEntryIfAllowComments><BlogEntryIfAllowPings>
| <a href="{$BlogEntryPermalinkUrl$}#Trackback">トラックバック({$BlogEntryTrackbackCount$})</a></BlogEntryIfAllowPings>

<!-- AddClips Code START -->
<a href="http://www.addclips.org/addclips.php" onclick="AddClipsUrl = '{$BlogEntryPermalinkUrl$}'; AddClipsTitle = '{$BlogEntryTitle$} - {$BlogName$}'; return AddClipsWindow(this);" target="_blank"><img src="http://img.addclips.org/addclips_1.gif" width="141" height="16" border="0" alt="ブックマークに追加する" style="vertical-align:middle;" /></a><script type="text/javascript">var AddClipsId = '1566290E16E11';</script><script type="text/javascript" src="<リンク:http://js.addclips.org/v1/addclips.js>http://js.addclips.org/v1/addclips.js"></script>
<!-- AddClips Code END -->
　　　　　</td>
</tr>
</table>

出来上がりはこのブログのとおりです。参考にしてください。

本当は記事の上にもアイコンがあるといいのですが、そこまで分かりませんでした。
知っている方は教えてください。