Movable Type 備忘録

 投稿されたコメント、トラックバックの強調表示

  • Dec292006
  • Vote:
    http://bizcaz.com/archives/2006/12/29-194141.php
  • Categories: JavaScript
  • Tags:
  • Social Bookmark

エントリ・アーカイブ・テンプレートでは、投稿されたコメントやトラックバック欄が表示されます。 MovableType MEMOで配布しているテンプレートでは、そんなコメント欄やトラックバック欄上にマウスカーソルを重ねると強調表示するようにしています。

Firefoxなどのモダン・ブラウザでは以下のような方法で強調表示させることができます。

  1. <dl class="comments-content">
  2.     <dt id="c<$MTCommentID$>" class="comments-content-header">
  3.     Posted by <$MTCommentAuthorLink default_name="Anonymous" spam_protect="1" show_email="0"$> <$MTCommentAuthorIdentity$></dt>
  4.     <dd><$MTCommentBody$></dd>
  5.     <dt class="comments-content-footer">Posted on <$MTCommentDate language="en" format="%B %e, %Y"$></dt>
  6. </dl>

上記はMovableType MEMOで配布しているエントリ・アーカイブ・テンプレートのコメント欄を抜粋したものです。 このXHTMLに対して以下のようなCSSにすることでコメント欄を強調表示させることができます。

  1. dl.comments-content:hover {
  2.     background-color: #fafafa;
  3. }

でも、この方法だとIE6.0では強調表示されません。 IE6.0でも同様な強調表示させるにはJavaScriptの力を借りる必要があります。

IE6.0でも強調表示させる場合

まずJavaScriptをエントリ・アーカイブ・テンプレート内に追加します。 もちろん、外部ファイルとして保存してかまいません。 外部ファイルとすることで、他のテンプレート内からも同様のことができるようになります。
MovableType MEMOでは、StyleCatcherの関係上、エントリ・アーカイブ・テンプレートおよび、コメント・プレビューの各テンプレート内に埋め込んでいます。

  1. <script type="text/javascript">
  2. <!--
  3. function strongbg(obj, bg) {
  4.     obj.style.backgroundColor = bg;
  5.     return;
  6. }
  7. //-->
  8. </script>
  9. </body>

青い字の部分が強調表示させるためのJavaScriptになります。 このJavaScriptをページの一番後ろ、</body>タグの上辺りに追加します。

次に強調表示させたいコメント欄、トラックバック欄のXHTMLを以下のように変更します。

  1. 変更前
  2. <dl class="comments-content">
  3.  
  4. 変更後
  5. <dl class="comments-content" onmouseout="strongbg(this, '#ffffff');" onmouseover="strongbg(this, '#fafafa');">

青い字の部分では、マウスカーソルが離れた時用で赤い字の部分はマウスカーソルが重なった時用です。緑の字のところでそれぞれの背景色を指定します。
一通り変更したら保存して再構築します。

以上で、マウスカーソルが重なった時にコメント欄、トラックバック欄の背景色を変更することで強調表示させることができます。
これを応用して、サイドバーの各アイテムの背景色を強調表示することもできますね。

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード