2007年05月19日

seesaaブログのカスタマイズ『コメントに一部タグを有効にする』

seesaaブログのテンプレートは、基本的にコメント内(投稿者名も
含めて)はタグの使用が出来ないようになっている。
でも、コメントを書いて下さった方へのお返事で、名前がわかり
やすいようにするためには、やっぱりタグを有効にしたい 
と考えた。
で、seesaaブログが採用しているタグに関連する関数は

  • tag_bleak
      b,i,img,aタグを許可し、その他のHTMLタグは無効
  • tag_strip
      HTMLタグはすべて無効
  • test_summary
      HTMLタグを有効にした上でテキスト部分を指定byte以降を表示しない


以上の3つ。本当は名前部分の色を変更したいと思ったんだけど、
そうなるとすべてのタグを有効にする必要がある。
しかし、BBSや、こういった誰でもが書き込める場所にタグを有効に
すると、悪意のあるタグを貼られるケースもあるらしく、それは
あまりよろしくないので、今回は、一番上の、一部のタグのみ有効
というのを設定することにした。

それによって、表示できるようになった状態がこちら↓

コメント欄

コメント本文のところと、投稿者のところと、二箇所を変更。
やりかたをご紹介。

1. まず自分で画像を用意する。
2. 「記事投稿」→「ファイルマネージャ」で、作った画像をアップロードしておく。
3. 「デザイン」→「コンテンツ」→「記事」→「コンテンツHTML編集」

編集画面内のだいたい真ん中あたりに、コメントに関する以下の
記述があります。
<div class="comments-head">この記事へのコメント</div>
<% loop:list_individual_article_children -%>
<div class="comments-body">
<div class="text"><% comment.body | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') %></div>
<div class="comments-post">Posted by <% if:comment.homepage %><a href="<% comment.homepage | tag_strip %>" target="_blank" rel="nofollow"><% comment.writer | tag_strip %></a><% else %><% comment.writer | tag_strip %><% /if %> at <% comment.createstamp | date_format('%Y年%m月%d日 %H:%M') %><br /></div>


変更するのは、この中の、赤字のところと紫字の後
この二箇所だけになります。

まずは、赤字のところ
ここでコメント本文のタグを有効にします。
つまり 
tag_strip | → tag_break | に変える

たったそれだけです。ただ、もしも私のように画像を使うので
あれば、このままだと画像のURLへリンクがつく形でテキスト表示
されてしまうので、その場合は、緑字の部分はばっさりカットしてください。
あとは保存をして、全ページの再構築をかけて完了。

で、自分がコメントを書く際に、私の場合は、ゲストさんのお名前の
前に画像のURL
お名前は太字お名前後にまた画像のURLを入力、
あとは普通にコメントを書いてます。

それから、投稿者名のところを、管理人だけ変えるバージョンは、
紫字の後に以下を挿入。
(投稿者名の前に画像をつけて、投稿者名は、他の投稿者に対し自分
だけ色を変えています。)

付け加えたところが、青字になっています(締めの、<% /if %> も忘れないでね)。
Posted by <%if:comment.writer eq 'まりりん' %><img src="画像のURL" border="0" align="middle"><span style="color:#B83D14;">まりりん</span><% else %><% if:comment.homepage %><a href="<% comment.homepage | tag_strip %>" target="_blank" rel="nofollow"><% comment.writer | tag_strip %></a><% else %><% comment.writer | tag_strip %><% /if %><% /if %> at


で、保存をかけて、全ページの再構築をして完了!
ただし、このやり方だと、投稿者名のところに、自分以外の人が、
まったく自分と同じ名前(私の場合、まりりん ね)を書かれて
しまっても、自分が書いた時と同じ表示が出てしまう という
デメリットがあるので、管理人独自の名前にした方がいいとは思い
ますけども。

とまあ、こんな感じです。あくまでも私のやり方ですけども、もしも
ご参考になれば。

---------------------------------------------------
え〜〜〜、『特に個性のないブログ』のエデンさんより、コメントで
「確認画面には反映されないの?」というご指摘をいただきまして、
よ〜〜〜〜く調べたら出来ましたので、追記ページに
記載しますので、ご参考になさりたい方はどうぞ!↓

確認画面内での反映の仕方ですが、まずは反映した結果がこれ↓

     kakunin.gif

それではやり方を説明します。

「マイブログ」→「デザイン」→「HTML」で、自分が使っている
HTML名をクリック

で、HTML編集画面の中ほどにあるこの部分

コメントを書く

<form action="/pages/user/comments2/regist/input"method="post">
<input type="hidden" name="article_id" value="" />
<input type="hidden" name="article_child__article_id" value="" />
<div class="comments-body">

お名前: <% article_child__writer | html %><br />
<input type="hidden" name="article_child__writer" value="" /><br />
メールアドレス: <% article_child__email | html %> <br />
<input type="hidden" name="article_child__email" value="" /><br />
ホームページアドレス: <% article_child__homepage | html %><br />
<input type="hidden" name="article_child__homepage" size="50" value="" /><br />
コメント: <br />
<% article_child__body | html | nl2br | clickable('target="_blank" rel="nofollow"') %>
<input type="hidden" name="article_child__body"><br />

<input name="posted" type="submit" class="input-submit" value="書き込む"> <br />
</div>
</form>


まずは、投稿者名のところ。
これは、ピンク字の前と、オレンジ字の後に挿入して、以下に変更します。
(新しく挿入したものを赤字にしてます。)

<%if:article_child__writer eq 'まりりん' %>お名前: <img src="画像のURL" border="0" align="middle"><span style="color:#B83D14;">まりりん</span>
<input type="hidden" name="article_child__writer" value="" /><br /><% else %>

お名前: <% article_child__writer | html %><br />
<input type="hidden" name="article_child__writer" value="" /><br /><% /if %>


次に、コメント内のタグ有効

こちらは、紺字

html → tag_break に変えて、あと画像も使いたいなら
緑字部分をばっさりカットしてください。

全部の作業を終了したら保存をかけてすべてに再構築をかけて終了です。
posted by まりりん at 00:25 | Comment(3) | TrackBack(0) | ブログ関連
▲ページトップへ
この記事へのコメント
うおっ、なんかすげー!
確認画面では反映されないのかな、bタグを使おうと思ったけどやめた。
それにしてもすごい。
Posted by エデン at 2007年05月19日 23:59
エデンさん
コメントどうもありがとうございます!

うおっっっ!!なんかそう言っていただけると、なんか
すっごく嬉しい!!思わずサルも木に登っちゃうぞ〜〜!!
みたいな〜〜(笑)
なんかお褒めにあずかり大変光栄でございます!!

しかし、確認画面ね〜〜〜、これは無理みたいですね。
そもそも確認画面は完全にjavascriptの領域っていうか
確認画面のURL見ると、フォルダが別フォルダっぽいです
よね。まあ、その辺がちょっと辛いところではあるんです
けどもね。とりあえず ってことでやってみました。

今度は是非ともBタグ使ってみてくださいね〜!
では、またよろしくです〜!
Posted by まりりん at 2007年05月20日 00:37
エデンさん
ごめんなさ〜〜〜〜〜〜い!!!
私、↑のお返事で確認画面での反映は無理って書いたけど、
今じっくり見てたら、HTMLの編集画面で出来ますねえ!!
ほんと適当でごめんなさい!!(汗)

てことで、この記事に追記として、確認画面用もこれから
記載しときます。ご指摘どうもありがとう!!
Posted by まりりん at 2007年05月20日 22:15
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL
http://blog.seesaa.jp/tb/42189516
▲ページトップへ