小粋空間  -  a cheap joke and a play on words site

サインイン後のページ遷移でコメント投稿フォームを表示する

Movable Type のブログ記事ページやウェブページでの認証コメントでは、コメントフォームにサインインした後、ブログ記事ページのトップに戻ってしまいます。

例として、Movable Type のあるブログ記事にサインインします。

サインイン後は、サインインしたページの先頭に戻ってしまいます。

ファイルサイズが小さいページであれば、少しスクロールすればコメントフォームを表示できますが、大量のコメントの下にコメントフォームがある場合など、再びコメントフォームに移動するのは結構面倒です。

本エントリーでは、サインイン後に表示されるブログ記事ページ（またはウェブページ）でコメントフォームの位置までスクロールして表示するカスタマイズを紹介します。

このカスタマイズを行えば、サインイン後に、次のようにコメントフォームの位置までスクロールした状態で表示します。

このブログでも少し前からこのカスタマイズを適用していますので、動作を知りたい方はとりあえずコメントフォームにサインインしてみてください。

１．Movable Type 4.2 デフォルトテンプレート「既定のブログ」の場合

「コメント」テンプレートモジュールの h2 要素に id 属性「_login」を追加します。

変更前

...前略...
<mt:IfCommentsAccepted>
<div class="comments-open" id="comments-open">
    <h2 class="comments-open-header">コメントする</h2>
    <div class="comments-open-content">
...後略...

変更後

...前略...
<mt:IfCommentsAccepted>
<div class="comments-open" id="comments-open">
    <h2 id="_login" class="comments-open-header">コメントする</h2>
    <div class="comments-open-content">
...後略...

２．当ブログの Movable Type 4.2 配布テンプレートの場合

「コメント入力フォーム」テンプレートモジュールの h2 要素に id 属性「_login」を追加します。

変更前

<mt:entryIfCommentsOpen> 
<div class="comments-open" id="comments-open">
   <h2 class="comments-open-header">コメントする</h2>
   <div class="comments-open-content">
..後略...

変更後

<mt:entryIfCommentsOpen> 
<div class="comments-open" id="comments-open">
   <h2 id="_login" class="comments-open-header">コメントする</h2>
   <div class="comments-open-content">
..後略...

３．スクロール表示できる仕組み

大体お分かりだと思いますが、サインイン後にリダイレクトされた URL の末尾に「#_login」が付与されます。これをフラグメントとして利用している訳です。

なお、ブログ管理者がブログ管理画面などにログインしているブラウザと同じブラウザで、ブログ記事のコメントフォームにサインインしても、このカスタマイズのようなスクロールは行われません。

４．マークアップの妥当性について

XHTML では id 属性値が "_" で開始しても問題ありません。ただし、HTML4.01 では違反ですので気をつけてください。

ハイパーリンクを提供する - 名付けたフラグメントにリンクする

５．name 属性によるフラグメントについて

４項では id 属性を用いたフラグメント方法を紹介しましたが、name 属性を用いたフラグメント、例えば、

<a name="_login"></a>

という方法については、

• XHTML では id 属性によるフラグメントに変更（name 属性自体が XHTML 1.1 で廃止）
• Movable Type デフォルトテンプレート・配布テンプレートはXHTML

という理由で紹介をしておりません。ただし、HTML4.01 でマークアップをしている場合は name 属性によるフラグメントを行ってください。

なお、XHTML 1.0 で、id 属性によるフラグメントをサポートしていないブラウザに対応させたい場合は、１項または２項の変更で id 属性と name 属性を併記してください。

<h2 id="_login" name="_login" class="comments-open-header">コメントする</h2>

最近の主なブラウザ（IE/Firefox/Opera/Safari/Google Chrome）では id 属性によるフラグメントが可能です。

• ハイパーリンクを提供する - 文書の特定の場所へのリンク
• XHTMLの書き方と留意点

2008.10.24
５項を追加しました。