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

Top ＞ Movable Type ＞カスタマイズ＞コメント＞サインイン後のページ遷移でコメント投稿フォームを表示する

News

各種ブログテンプレート

2008年10月24日

エントリー本文

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

Posted at October 24,2008 1:23 AM
Category：[コメント]
Tag：[Comment, Customize, MovableType]

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
５項を追加しました。

Posted by yujiro

« CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする | Main | たどり着いた »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

こんにちは、いつも参考にさせていただいてます。

今回の対策で、素直に(?)<a name="_login">を使う事に何か不都合はあるのでしょうか？

[1] Posted by まにてん

: October 24, 2008 10:23 AM

＞まにてんさん
こんにちは。
ご質問の件につきまして、５項を追記致しましたので、そちらを参照頂ければ幸いです。
それではよろしくお願い致します。

[2] Posted by yujiro

: October 24, 2008 1:26 PM

なるほど、XHTMLでは使えないんですね。
今までXHTMLについてはほとんど意識していなかったので、この機会に勉強してみようかと思います。
回答ありがとうございました。

[3] Posted by まにてん

: October 24, 2008 1:44 PM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

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