Movable Type-投稿者のコメントだけをハイライトにする方法

投稿者のコメントだけをハイライトにする方法

Six Apart - Movable Type プラグインディレクトリで紹介されているCompare Plugin for Movable Typeを使います。

このプラグインを使い、コメント投稿者の入力名で条件分岐をするように設定しCSSセレクタを切り替えます。

Compare Plugin for Movable Type

MTタグの値を元にした条件分岐の機能を追加します。標準で<MTIfNonZero>や<MTIfNonEmpty>という、 MTタグの値が0や空でないかを判定するタグはありますが、このプラグインを使うと、MTタグの値を文字列と比較したり、数値の大小の比較をすることもできます。

基本的な使い方は、「a」というアトリビュートに指定した値と、「b」というアトリビュートに指定した値とを比較させることになります。

ダウンロードサイト

Compare | Plugins for Movable Type | staggernation.com

http://www.staggernation.com/mtplugins/Compare

導入

DLした【Compare.pl】ファイルを、Movable Typeのpluginsディレクトリにアップロードします。

Compareプラグインタグと使い方

Compareプラグインタグの詳細は、Compare Plugin for Movable Typeにて確認ください。（エントリーが長くなりますので省略します。）

コメント投稿者の入力名で条件分岐をする

今回は、<MTIfEqual></MTIfEqual>タグと<MTElse></MTElse>タグを組み合わせて実装します。

MTIfEqual

aの値とbの値が等しいかを判定します。

MTIfEqualテンプレートコード

以下のようなコードを使います。コメント投稿者はMovable Type 3.2以降では、<$MTCommentAuthor$>の利用を推奨していますので

"a"のアトリビュートにMTCommentAuthorを指定します。

"b"のアトリビュートに自分の投稿者名を指定します。

<MTIfEqual a="[MTCommentAuthor]" b="自分の投稿者名">commentauthor（任意のセレクタ指定）<MTElse>comment（デフォルト指定セレクタ）</MTElse></MTIfEqual>

上記のコードを使うと、

投稿者の名前が自分の投稿者名である場合、commentauthor（任意のセレクタ指定）がコードに生成表示されます。

投稿者の名前が他の場合、<MTElse></MTElse>内に指定したcomment（デフォルト指定セレクタ）がコードに生成表示されます。

コードの追加先

上記のMTIfEqualテンプレートコードを以下のように個別コメント欄のクラス指定セレクタ部分に書き換えます。デフォルトコードを使って追加先を紹介します。

	<div id="comments" class="comments">
		<MTComments>
			<MTCommentsHeader>
				<div class="comments-content">
					<h3 class="comments-header">コメント (<$MTEntryCommentCount$>)</h3>
			</MTCommentsHeader>
					<a id="c<$MTCommentID pad="1"$>"></a>
					<div class="<MTIfEqual a="[MTCommentAuthor]" b="自分の投稿者名">commentauthor（任意のセレクタ指定）<MTElse>comment（デフォルト指定セレクタ）</MTElse></MTIfEqual>" id="comment-<$MTCommentID$>">
						<div class="comment-inner">
							<div class="comment-header">
								<$MTCommentAuthorLink default_name="匿名" show_email="0"$><MTIfNonEmpty tag="CommentAuthorIdentity"> <$MTCommentAuthorIdentity$></MTIfNonEmpty>:
							</div>
						<div class="comment-content">
							<$MTCommentBody$>
						</div>
						<p class="comment-footer">
							投稿者:
							<$MTCommentAuthorLink default_name="匿名"$> <$MTCommentAuthorIdentity$> |
							<a href="#comment-<$MTCommentID$>"><$MTCommentDate$></a>
						</p>
						<p class="comment-footer-experimental">
						 	日時:
							<a href="#comment-<$MTCommentID$>" title="このコメントへのパーマリンク"><$MTCommentDate format="%x %H:%M"$></a>
						</p>
					</div>
				</div>
			<MTCommentsFooter>
	</div>
			</MTCommentsFooter>
		</MTComments>

上記のコードの8行目の部分は、デフォルトのコードの場合以下のようなコードです。

<div class="comment" id="comment-<$MTCommentID$>">

この部分を以下のように書き換えます。

<div class="<MTIfEqual a="[MTCommentAuthor]" b="自分の投稿者名">commentauthor（任意のセレクタ指定）<MTElse>comment（デフォルト指定セレクタ）</MTElse></MTIfEqual>" id="comment-<$MTCommentID$>">

あとは、CSSにcommentauthor（任意のセレクタ指定）の指定を追加することで表示を変えることができます。

今回私のブログでは、自分のコメントに関してのみ背景を変えるように指定しました。こんな感じです。（スカイが私の投稿者名）サンプルコメント

Compareプラグインは、かなりいろんな条件分岐をすることができるので、シーン別でさまざまな条件分岐に使えます。このプラグインを使って他のシーンや参考になる使い方をしている方法などあればトラックバックください。よろしくお願いします。

それから、ブログ機能をうまくカスタマイズすることでユーザービリティ向上を図ることができそうなコンセプトがあればいろいろとチャレンジしてみたいです。こんな使い方をしてみたいという意見・要望もできたらコメントください。

付録：考えられる他の方法

javascriptでCSSのセレクタ指定を切り替えることができるような気がします。全くコードがわからないのでプログラムのカスタマイズができないのです。javascriptであれば、MTだけでなくさまざまなブログでも応用できると思いますので、あれば便利ですよね。わかる方がいましたら一度作ってみてください。

今回できそうな感じの参考になるパターンとコードがありましたので紹介しておきます。

stroll::blog | コメント投稿者名別アイコン表示

http://melrose.jugem.cc/?eid=132

この方法をちょっと変えるだけで可能のような気がします。いろいろと調べましたが、まったく基礎が無いため断念しました。