ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
FC2ブログ  管理人のコメントを区別  コメント  

名前の装飾 と 管理人のコメントを区別 について

2010/01/24 (日)  カテゴリー: FC2共有テンプレート

共有テンプレートユーザーさんへ

FC2ブログの コメントの管理 → 返信 から 「名前の装飾」 (fc2_owner_comment) 機能を使った際の不具合 について。 その原因と対応策 についてお知らせします。

ari_seoシリーズ では、この「名前の装飾」 を使ってしまうと レイアウト崩れを起こしてしまうことが判っています。

原因は、コメントの返信で使った 「名前の装飾」 と テンプレートにカスタマイズ済みの 「管理人のコメントを区別する機能」 (スタイルシートの設定だけで使えるようにしてある機能) の 併用 によるものです。

原因の詳細 は後半に載せておきますが、要は、併用 によるものなので、「名前の装飾」 を使わなければ、この問題が起きることはありません。 ...で、問題は 「名前の装飾」 を使って レイアウトが崩れてしまった (もしくは既に 「名前の装飾」 を多用してきた) 場合の直し方 なのですが、これはそれぞれの状況などにより異なりますので、以下を参照してお試しください。



ついでに、
  • 管理人のコメントにちょっとした背景画像を追加する方法 (図3
  • 最近のコメント一覧 (ナビゲーション部分) にも 「管理人のコメントを区別する機能」 を追加するためのカスタマイズ (図4
も紹介します!

名前の装飾 を使ってレイアウトが崩れてしまった場合の対応策

A. パスワード を 設定していて、該当する件数も少ない場合

ブログの 該当コメントから 「編集」 を選択し、(特に何もせず) 上書きをすればOK! 更新されたコメントからはレイアウト崩れは直っているはずです。

当初、名前を変えたりしないとダメなのかと思っていましたが、実際にテストしてみたところ 単に 「編集」 送信 をするだけで大丈夫でした。 ということは、裏を返せば 「名前の装飾」 で付けた色は コメントを編集しちゃったら維持できないってことですよね。。。

B. パスワード を 設定しているが、該当する件数が多い場合

以下のいずれかの方法を選択してください。

  1. A. と同じ方法。 ひたすら 「編集」 → 送信 を繰り返す。 推奨
  2. 面倒なので、テンプレートを別のものに変更する。
  3. テンプレートから 「管理人のコメントを区別する機能」 をはずす。
  4. テンプレートの <!-- ▼記事へのコメント▼ --> 部分で使っている class設定 を
    class="n_<%comment_name>" から class="T-<%comment_trip>" のような形に変更して使う。

<!-- ▼記事へのコメント▼ -->

<!--comment-->
<div id="comment<%comment_no>" class="n_<%comment_name>"><br />

<div class="cm_body"><b><%comment_title></b><p><%comment_body></p></div>

<div class="t_right cm_bottom">
<%comment_mail+name>&nbsp;|&nbsp;
<script type="text/javascript"><!--
a="<%comment_url>";
if (a!="") document.write('<a href="'+a+'" target="_blank">URL</a>&nbsp;|&nbsp;')
//--></script>
<%comment_year>/<%comment_month>/<%comment_day> (<%comment_wayoubi>) <%comment_hour>:<%comment_minute> <!--comment_edit-->[ <a href="<%comment_edit_link>" title="コメントの編集">編集</a> ]<!--/comment_edit--> No.<%comment_no>
</div><!--/class=t_right-->

</div><br /><!--/class=n_名前-->
<!--/comment-->

<!-- ▲記事へのコメント▲ -->

3. の場合、 class="n_<%comment_name>" を削除すればOK!
4. の場合、 class="T-<%comment_trip>" のように書き換える。

<%comment_trip> は、パスワードを暗号化した8文字(トリップ) を表示できる 変数 なのですが、これを使うには 自分のパスワードのトリップ を確認する必要があります。
[ 参考 : てんぽ FC2ブログで管理人のコメントを区別して表示するカスタマイズ ]

C. パスワード を 設定していない場合

該当する件数にもよりますが...

  1. コメントの管理画面から 該当コメントを削除する。 (←件数が1・2件なら...)
  2. 面倒なので、テンプレートを別のものに変更する。
  3. テンプレートから 「管理人のコメントを区別する機能」 をはずす。 B.-3 参照
  4. これまでの分は諦めてそのまま使う。 今後、併用しなければOKです。


管理人のコメントにちょっとした背景画像を追加する方法

スタイルシートに 太字部分 を追加しただけです。 私は 横540px × 縦72px の画像を使っています。 なまえ 部分は書き換えて。

/* 管理人のコメントを区別 */
.n_なまえ {
color:#003366;
}
.n_なまえ .cm_body {
border:1px solid #ccccff;
background:url(http・・・/ひよこエンピツ.png) no-repeat right top;
}

最近のコメント一覧 (ナビゲーション部分) にも 「管理人のコメントを区別する機能」 を追加するためのカスタマイズ

ナビゲーションメニュー の中から <%rcomment_name> という変数を探し、それを <span class="r_n_<%rcomment_name>"><%rcomment_name></span> と変更します。 ↓ 丸ごと置き換えでもOK!

<!--==========区切り-->
<li>
<a href="./?xml&amp;comment" class="navitop" target="_blank">Comments &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<!--rcomment-->
<li>
<a href="<%rcomment_link>#comment<%rcomment_no>"><%rcomment_month>/<%rcomment_day> <span class="r_n_<%rcomment_name>"><%rcomment_name></span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><a href="<%rcomment_link>"><span class="sentence"><span><%rcomment_title></span><%rcomment_body> …</span><br />親記事 「<%rcomment_etitle>」 へ</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--/rcomment-->
<li><a href="./?xml&amp;comment" title="コメントのRSSフィード" target="_blank">Comment RSS</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--==========区切り-->

スタイルシートに以下を 「追加」

.r_n_なまえ {
color:#0099cc;
}
#nav a:hover span.r_n_なまえ,
#nav li:hover > a span.r_n_なまえ {
color:#e0ffff;
}

※最後の 灰色部分 の設定にある :hover(マウスオーバー時など) の文字色 は IE6以下 だと上手く反映されないので 文字色(color:#0099cc; 部分) は選んだほうが無難です。

プルダウン時(background:#ffffff)
color:#0099cc;
01/23 paruparu
(background:#ffffff)
color:#0099cc;
01/23 paruparu
マウスオーバー時(background:#006699)
color:#e0ffff
01/23 paruparu
IE6, IE5.5 だと文字色が
上の色(#0099cc)に...
01/23 paruparu
[ 関連記事 : 自作Webカラーチャート ColorChart349 ]

IE6 でも同じ表示になるもっと良い設定がありそうなのですが。。。



図2. のようなレイアウト崩れの原因 (詳細)

コメントの管理 → 返信 から 「名前の装飾」 を行った場合には、
<span class="fc2_owner_comment" style="color:#CC0000;">なまえ</span> などのようなタグが挿入されるのですが...このタグ、そのコメントの <%comment_name>(or <%comment_mail+name>) と <%rcomment_name> に相当する名前 に対して挿入しているようで、この仕様が テンプレート中の <div id="comment<%comment_no>" class="n_<%comment_name>"> の部分まで影響を及ぼし、
○ <div id="comment200" class="n_なまえ">・・・ で良いものが
× <div id="comment200" class="n_<span class="fc2_owner_comment" style="color:#CC0000;">なまえ</span>">・・・
と、文法的に間違った 変な形に書きかえられてしまう からのようです。

ちなみに、FC2ブログに 「名前の装飾」 機能が設置されたのは 2009年7月22日頃。 管理画面 からの返信 だけにしてあることで、「なりすましコメントの防止にも役立つ」 という意図もあるようです。

キーワード検索 : FC2ブログ  管理人のコメントを区別  コメント  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-106.html

2010/01/24 ~ | Comment (2) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

2 Comment


質問です

どうも ご無沙汰してます。

%rcomment_nameをclass指定してCSSに反映させるやり方ですよね?

これって、ユーザー名を全角で入力して、全角文字でclass指定すると無視されちゃうんでしょうか?

以下のブログを見ると全角でも大丈夫そうですが・・
http://rgrg.blog61.fc2.com/blog-entry-185.html

あと、ある程度規則性を持った変数タグは使えそうですね。
例えば、カレンダーの当月をCSSに反映させて月ごと背景を変えるとかできそうな気がします。

denpaboy2 |  2010/02/19 (金) [ 編集 ] No.305


denpaboy2 さん!

ご無沙汰してます。 実は、かなり探していました。。。
別のブログにコメント入れてみましたが、連絡取れなかったので、引退されてしまったのかと。

で、本題ですが、全角文字でも問題なく反映されますよ。 CSS的には厳密にはあまり良くないのかもしれませんが、私のテストブラウザ (ページ下に書いてあります) などでは問題なく反映されます。

※ .なまえ だとちょっと危険だと思うので、 .n_なまえ (class="n_<%comment_name>" ) のように 何か接頭語をつけておいた方が安全かもしれません。 万一、テンプレートのスタイルで設定している class名 と同じ名前のコメント投稿者がいたら その記事の レイアウトが乱れてしまう可能性もあるので... (念のためですが。)

>例えば、カレンダーの当月をCSSに反映させて月ごと背景を変えるとか

そうですね。 私も、ちょこちょこそれに似たようなことをして遊んでいます。

paruparu |  2010/02/19 (金) [ 編集 ] No.306

コメントを投稿する 記事: 名前の装飾 と 管理人のコメントを区別 について


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback