前回のエントリーの続きとして、今回は実際にプロフィール欄の消し方を試してみたいと思います。 1.コメントフォームのデザイン 今回実践するコメントフォームは以下のようなデザインです。 このフォームのHT...

produced by Blades co.,ltd.



Entry Detail

Rating ---

  • 1
  • 2
  • 3
  • 4
  • 1

MTコメント送信フォーム:サインイン時のプロフィール情報欄の消し方 [3]...実践編

前回のエントリーの続きとして、今回は実際にプロフィール欄の消し方を試してみたいと思います。


1.コメントフォームのデザイン

今回実践するコメントフォームは以下のようなデザインです。

コメントフォーム

このフォームのHTMLソース(MTテンプレート)は以下のようになります。

<MTIfCommentsAccepted>
<div id="comment-form">
    <h3><mt:If name="feedback_template"><mt:If name="comment_preview_template">コメントを編集・投稿する<mt:Else>この記事にコメントを投稿する</mt:Else></mt:If></mt:If></h3>
    <div class="fr-cc"><div><div><div><div><div><div><div><div>
    <MTIfRegistrationAllowed>
        <div id="comment-form-external-auth">
            <script type="text/javascript">
            <!--
            <MTIf name="comment_preview_template">is_preview = true;</MTIf>
            writeCommenterGreeting(commenter_name, <$MTEntryID$>, <$MTEntryBlogID$>, commenter_id, commenter_url);
            //-->
            </script>
        </div>
    </MTIfRegistrationAllowed>
    <form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
        <input type="hidden" name="static" value="1" />
        <input type="hidden" name="entry_id" value="<$MTEntryID$>" />
        <input type="hidden" name="__lang" value="<$MTBlogLanguage$>" />
        <div id="comments-open-data">
            <dl>
                <dt class="comment-form-name"><label for="comment-author">名前</label></dt>
                <dd class="comment-form-name"><input type="text" id="comment-author" name="author" size="30" value="<MTIf name="comment_preview_template"><$MTCommentAuthor encode_html="1"$></MTIf>" /></dd>
                <dt class="comment-form-email"><label for="comment-email">E-mail</label></dt>
                <dd class="comment-form-email"><input type="text" id="comment-email" name="email" size="30" value="<MTIf name="comment_preview_template"><$MTCommentEmail encode_html="1"$></MTIf>" /></dd>
                <dt class="comment-form-url"><label for="comment-url">あなたのウェブサイトURL</label></dt>
                <dd class="comment-form-url"><input type="text" id="comment-url" name="url" size="30" value="<MTIf name="comment_preview_template"><$MTCommentURL encode_html="1"$></MTIf>" /></dd>
            </dl>
            <p id="comment-form-remember-me"><label for="comment-bake-cookie"><input id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" type="checkbox" />ログイン情報を記憶</label></p>
            <MTIfNonEmpty tag="MTCaptchaFields">
            <MTIfCommentsAccepted><MTIfRegistrationAllowed><MTElse><$MTCaptchaFields$></MTIfRegistrationAllowed></MTIfCommentsAccepted>
            <div id="comments-open-captcha">
            </div>
            </MTIfNonEmpty>
        </div>

        <p id="comments-open-text"><label for="comment-text">コメント内容</label><textarea id="comment-text" name="text" rows="10" cols="30"><MTIf name="comment_preview_template"><$MTCommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></MTIf></textarea></p>
        <p id="comments-open-footer"><input type="submit" accesskey="v" name="preview" id="comment-preview" value=" 確 認 " /><input type="submit" accesskey="s" name="post" id="comment-submit" value=" 投 稿 " /><MTIf name="comment_preview_template"><input type="button" name="cancel" id="comment-cancel" value=" キャンセル " onclick="window.location='<$MTEntryPermalink$>'" /></MTIf>
</p>
    </form>
    </div></div></div></div></div></div></div></div></div>
</div>
</MTIfCommentsAccepted>

上記ソース中に class="comment-form-name" 及び class="comment-form-email" と記述している箇所があります。この指定個所を表示・非表示するようにmt.jsをカスタマイズします。言い換えると、表示・非表示処理を加えたい個所にこのclass名を指定するようにコーディングするということになります。


2.mt.jsのカスタマイズ

Javascriptの処理を簡素化するために、ここではjQueryを使用することを前提とします。

まず、以下のようにhideDocumentElement関数を修正します。引数をselectorとしているのは単に意味を分かりやすくするためです。

function hideDocumentElement( selector) {
    var el = document.getElementById( selector);
    if (el) {
		el.style.display = 'none';
	} else if($("."+selector)) {
		$("."+selector).each(function(){
			$(this).get(0).style.display = 'none';
		});
	}
}

同様に、以下のようにshowDocumentElement関数を修正します。

function showDocumentElement( selector) {
    var el = document.getElementById( selector);
    if (el) {
		el.style.display = 'block';
	} else if($("."+selector)) {
		$("."+selector).each(function(){
			$(this).get(0).style.display = 'block';
		});
	}
}

これでカスタマイズは完了です。実際にテンプレートを適用してみて、以下のように名前欄とEmail欄が非表示になれば成功です。

コメントフォーム

ここまでお読みいただいてお気づきかと思いますが、特に難しいことをしたわけではなく、ただ単にid名で要素を取得していた箇所をclass名で取得するように変更しただけです。

コメントフォームのデザインを変更したいけど、Javascriptの処理がどうもおかしいなあとお困りの方はぜひお試しください。



関連ページ

MTコメント送信フォーム:サインイン時のプロフィール情報欄の消し方 [1]...導入編
MTコメント送信フォーム:サインイン時のプロフィール情報欄の消し方 [2]...分析編


Comments(0)

お気軽にコメントまたは評価を投稿してください。

お名前とE-mailアドレスをご入力の上、コメント本文または評価を入力してください。※E-mailアドレスは掲載されません。

Trackbacks(0)

お気軽にトラックバックしてください。

Monthly Archives


Category Archives



About Blades LAB

知的好奇心探究サイト 先端研究ブレイドLAB

先端研究ブレイドLABは、株式会社ブレイドが自社で開発したサービス・製品について紹介するサイトです。社員が興味を持った技術を駆使してサービス・製品へと昇華し、広く世間に対して公表することで、技術ノウハウを共有することを目指します。

また、2009年度まで運営していたMT/CMSブログを統合し、WEBに関する最先端の技術トピックスも紹介しております。


Project Blog!

本記事の連載は終了いたしました。

プロジェクトブログ

Blades.co.,ltd. WEB CM

ムービーを再生する

株式会社ブレイド設立2周年を記念して制作したWEB限定CMです。Adobe After Effects CS3で制作しました。
※CM中の企業ロゴは旧ロゴです。

ムービーを再生する