エントリー本文
サインイン後のページ遷移でコメント投稿フォームを表示する
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 属性によるフラグメントが可能です。
2008.10.24
５項を追加しました。
こんにちは、いつも参考にさせていただいてます。
今回の対策で、素直に(?)<a name="_login">を使う事に何か不都合はあるのでしょうか？
: October 24, 2008 10:23 AM＞まにてんさん
こんにちは。
ご質問の件につきまして、５項を追記致しましたので、そちらを参照頂ければ幸いです。
それではよろしくお願い致します。
: October 24, 2008 1:26 PMなるほど、XHTMLでは使えないんですね。
今までXHTMLについてはほとんど意識していなかったので、この機会に勉強してみようかと思います。
回答ありがとうございました。
: October 24, 2008 1:44 PM
