> >

Recent Comments Widget って何?

このブログでも各ページのサイドに「最近のコメント」という欄を表示しています。これのように最近投稿されたコメントのダイジェストを一覧する機能です。

ただし、このブログでは独自の仕組みを使用しています。一つの HaloScan アカウントを複数のブログで共有しているので HaloScan の Recent Comments Widget は使用できません。共有している中の一つのブログのコメントに絞って表示することができないからです。

クイックスタート

iBlog を例にとってこの機能を付ける手順を説明します。

取り付けコードを取得する

1. HaloScan にアクセスしてログインする。
2. Dashboard - HaloScan.com を開く。
3. Dashboard ページの割と下の方にあるPut this widget on your siteと書いてあるリンクをクリックする。
   インストラクションのコードが表示されます。JavaScript を有効にしていないと表示されません。
4. コードが書いてある枠の中をクリックする。
   コード全体が選択状態になります。
5. CTRL-C でコピーする。
   一旦エディタなどにペーストしておくとよいでしょう。

iBlog のナビゲーション項目に追加する

1. iBlog のメニュー項目 [レイアウト]-[ナビゲーションエディタを表示] を選択する。
   ナビゲーションエディタが表示されます。以後ナビゲーションエディタでの操作です。
2. [ブログ] から目的のブログを選択する。
3. [新規] ボタンをクリックし表示されたダイアログの [タイトル] 欄に“Recent Comments”あるいは“最近のコメント”など自分が管理しやすい名称を入力し [保存] ボタンをクリックする。
4. (必要に応じて) [位置] を使用して表示順を調整する。
5. (必要に応じて) [表示] 欄の各ページのチェックボックスを幾つか外して表示するページの種類を限定する。
6. [見出し] 欄の“Entry Heading”の文字列を“Recent Comments”あるいは“最近のコメント”と入力する。
   この内容はサイドでの項目の見出しとして使用されます。ご自分のブログにあった見出しを使用してください。
7. [コンテンツ] 欄の“Entry Content”の文字列を「インストラクションのコードを取得する」でコピーした内容に入れ替える。
8. [保存] ボタンをクリックした後にナビゲーションエディタを閉じる。
9. iBlog のメニュー項目 [ブログ]-[プレビュー状態をリセットしてプレビュー] を選択する。
10. プレビューが終了したらいつもの公開操作を行う。

この方法が最も簡単に Recent Comments Widget を iBlog によるブログに取り付ける方法です。しかし、表示具合を調節するために取り付けコードに書いてあるスタイルシートを変更する度に「プレビュー状態をリセットしてプレビュー」をすることになってメンテが面倒な方法でもあります。取り付けコード中のスタイルシートは styles-site.css などに書いておいてナビゲーション項目には script 要素だけを書いておくのがベストです。

表示のカスタマイズ情報

Recent Comments Widget の表示具合を調整するには上に言及したように取り付けコードに書いてあるスタイルシートをカスタマイズすることになります。そのためにその一つ手前の script 要素によってどんな HTML が出力されるのかを知っておく必要があります。

表示される内容は次のような形をした HTML です。

<div id="haloscan-recent" class="haloscan-recent">
    <ul class="hsrcontent">
        <li class="hsritem"><_a href="コメントの URL" onclick="HSOpen(this.href); return false;" title="Thread: スレッド ID"><span class="hsrname">投稿者の名前</span>:  <span class="hsrmsg">コメントの内容(先頭部分)</span></a></li>
        …最大八個繰り返し…
    </ul>
    <p align="right"><_a style="font-weight: bold;" href="http://www.haloscan.com/" title="Free Commenting by HaloScan">Powered by HaloScan</a></p>
</div>

取り付けコードの中のスタイルシートで指定されている指定子はそれぞれ次のようになっています。

#haloscan-recent

Recent Comments Widget による表示全体。これは ID なので一つのページに一つの Recent Comments Widget しか使えない。

#haloscan-recent ul

Recent Comments Widget による表示の本体部分。投稿者の名前と投稿内容(のダイジェスト)が列挙されているところ全体。

#haloscan-recent a

各々のコメントの投稿者の名前と投稿内容(のダイジェスト)の組の部分のリンク。そこをクリックすると該当するコメントスレッドを表示するウィンドウが開かれ、当該のコメントが表示される。それと Powerd By 部分の HaloScan へのリンクも該当する。前者のみを指定するためには #haloscan-recent li a を指定子にすればよい。

#haloscan-recent li

各々のコメントの投稿者の名前と投稿内容(のダイジェスト)の組の部分。コメントが複数あればこれが複数並ぶ。#haloscan-recent a はこれに囲まれていて、#haloscan-recent a 以外のものを含んでいない。

#haloscan-recent li span.hsrname

各コメントの投稿者の名前の部分。

#haloscan-recent li span.hsrmsg

書くコメントのメッセージ(のダイジェスト)。

その他に Powered by 部分を指定するときは次の指定子を使用します。

#haloscan-recent p

Powered by 部分全体。

#haloscan-recent p a

Powered by 部分のリンク。