« トラックバックをポップアップ・ウィンドウで表示する | Main | PowerBook G4にまで反日感情か? »

May 13, 2005

コメントをポップアップ・ウインドウで表示する

エントリーの“Posted by”に並んで表示される“Comments (0)”をクリックすると、ポップアップ・ウィンドウが表示されるよう、カスタマイズを行ってみよう。

STEP 01: Main IndexテンプレートにJavaスクリプトを記述する

1) MovableTypeの管理画面[mt.cgi]にアクセスし、テンプレート編集画面のIndex Templatesから[Main Index]テンプレートをクリックする。

Main Menu > Your Blog > Templates

2) テンプレート内の<head></head>タグの間に、以下のJavaスクリプトを記述する。青文字で示した数値、属性は、任意に変更してかまわない。

function OpenComments (c) {
window.open(c,
'comments',
'width=640,height=480,scrollbars=yes,status=yes,resizable=no');
}

//-->
</script>

3) テンプレートをSave & Rebuidして終了。

STEP 02: Main Indexテンプレート内のタグを修正する

1) テンプレートからPosted byで始まるタグの中から、以下の青文字で表示した部分を選択し、

<p class="posted">Posted by <$MTEntryAuthor$> at <a href="<$MTEntryPermalink valid_html="1"$>"><$MTEntryDate format="%X"$></a>
<MTEntryIfAllowComments>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#comments">Comments (<$MTEntryCommentCount$>)</a></MTEntryIfAllowComments>
<MTEntryIfAllowPings>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks">TrackBack (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>
</p>

2) 以下に示したタグでそっくり置き換える。

<a href="<$MTCGIPath$><$MTCommentScript$>?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false">Comments (<$MTEntryCommentCount$>)</a>

3) テンプレートをSave & Rebuidして終了。

Comments (0)をクリックすると、ポップアップ・ウインドウが表示される。

tsutomu PermaLink