FC2 BLOGに設置

　このページは、FC2 BLOGにHoundを設置する方法を解説しています。

1. 管理者ページを開きます

2. 環境設定の「テンプレートの設定」をクリック

3. テンプレートの編集の「修正」をクリック

4. HTMLの編集欄のなかで、</head>という文字列を探し、その文字列の直後に、以下のように書き加えます

<script type="text/javascript" language="JavaScript">
<!--
    rh_site = "<%url>";
    rh_site = rh_site.substring(0, rh_site.length - 1);
// -->
</script>

5. HTMLの編集欄のなかで、<!--topentry-->という文字列を探し、その文字列の直後に、以下のように書き加えます

<script type="text/javascript" language="JavaScript">
<!--
    rh_url = "<%topentry_link>";
// -->
</script>

6. HTMLの編集欄のなかで、<!--comment_area-->という文字列を探し、コメント表示部がどのように構成されているかを観察します

7. コメント表示部の構成をまねて、コメント表示部のそばに、Hound表示部を書き加えます

　<!--comment-->から<!--/comment-->までの部分をコピーして、外部スクリプト呼び出し部分に置き換えるとよいでしょう。

　Hound表示部は<!--permanent_area-->と<!--/permanent_area-->で囲む必要があります（二重に囲まないよう注意してください）。

　以下に一例を示します。

<!--permanent_area-->
<table border="0" width="100%" cellpadding="0" cellspacing="0">
  <tr><td class="entry_title">この記事のリンク元</td></tr>
  <tr><td class="main_txt">
      <script type="text/javascript" language="JavaScript"
        src="http://www.hound.jp/hound.js">
      </script>
    </td>
  </tr>
</table>
<a href="#pagetop"><img src="http://so.me/thing.gif" border="0"></a>
<!--/permanent_area-->

8. HTMLの編集欄のなかで、<!--deny_comment-->という文字列を探し、その文字列の直後に以下のように書き加えます

<span class="rhstat">
  <span class="link">BACKLINK(
    <span class="url"><%topentry_link></span>
    <span class="title"><%topentry_title></span>)
  </span> | 
</span>

　複数のエントリが表示されるページでは、各エントリにコメントの数が「COMMENT(3)」などと表示されます。上のように書き加えることで、リンク元の件数が「BACKLINK(4)」のように表示されるようになります。

　縦棒、かっこ、「BACKLINK」の文字列などは、コメント数表示部のデザインにあわせて書き換えてください。表示してみて、不要な空白が入っている場合は、改行と空白を削除してください。

9. HTMLの編集欄のなかで、</body>という文字列を探し、その文字列の直前に以下のように書き加えます

<script type="text/javascript" language="JavaScript">
<!--
    rhstat_site = "<%url>";
    rhstat_site = rhstat_site.substring(0, rhstat_site.length - 1);
// -->
</script>
<script type="text/javascript" language="JavaScript"
    src="http://www.hound.jp/stat.js">
</script>

10. トップページのどこにHound（ボタン表示）を設置するかを決めます。 設置する位置に以下のスクリプトを書き加えます

<script type="text/javascript" language="JavaScript">
<!--
    rh_site = "<%url>";
    rh_site = rh_site.substring(0, rh_site.length - 1);
    rh_url = "<%url>";
　　　　rh_button = "subwindow";
// -->
</script>
<script type="text/javascript" language="JavaScript"
    src="http://www.hound.jp/hound.js">
</script>

　さらに、このスクリプトを、<!--index_area-->と<!--/index_area-->で囲みます（二重に囲まないよう注意してください）。

11. スタイルシートの編集欄で、スタイルシートの一番下に以下のように書き加えます

.rhstat {
    display:none;
}

12. HTMLの編集欄の下にある「更新」ボタンをクリック

13. 表示を確認

　たとえ正しく動作していても、デザインの不整合などが見つかるでしょう。テンプレートの修正と表示確認を繰り返して、デザインを調整します。

　Houndの表示を調整したい場合は、高度な使い方を参照してください。ボタンの水平位置やフォントサイズなどを調整できます。

共有テンプレートにHound

　このページに説明されている方法でHoundを設置すると、そのまま共有テンプレートとしてもご利用いただけます。