スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
公開: --年--月--日, カテゴリ: スポンサー広告

FC2ブログのコメント表示を掲示板風にする方法

ブログ改装メモ(4) コメント表示を掲示板風に変更してみたでこのblogのコメント表示を掲示板風に変更したことを書いたが、あれは自分用のメモのつもりで書いていたので微妙に分かりにくいと思う。 私が理解していればそれでよかったのだけれど、年末にGoogle Analyticsを眺めていたら検索キーワードに『コメント 表示 掲示板』のようなものを幾つか見掛けた。 自分でやる時に検索で調べたので分かるけど、解説しているところが見当たらないの。だから折角辿り着いても理解できなかったらと思うと不憫に思わなくもないような気持ちには特にならなかったものの、これも何かの縁と言うことで新たに方法を書いてみることにした。 ああそうそう、書いている途中で思い付いたけどこの記事のサブタイトルは『Re: FC2ブログのコメントを2ch風にしたいんだがえろい人教えて』ってことにしよう。理由はこの記事を読み進めていけば分かるかもしれないし分からないかもしれない。それはさておき。

更新: 2011-05-07

前提条件

例文

以下に例文として某スレッドフロート型掲示板の某スレッドより一部引用する。ちなみにソース見れば気付くだろうけど引用箇所のマークアップはこのblog向けに変更している。

FC2 blog vol.62

205 :Trackback(774):2010/11/22(月) 16:37:00 ID:iVtnAoXF
FC2ブログのコメントを2ch風にしたいんだが
えろい人教えて
206 :Trackback(774):2010/11/22(月) 16:39:27 ID:5Zv/lAW8
>>205
自力でがんばれ

この記事では上記のようなシンプルな掲示板のやり取りをブログのコメントで再現してみることにする。えろい人じゃないけど出来るだけ理解してもらえるように書いてみよう。

さて。以下に上記例文のHTMLソースを記述しておく。このマークアップは某掲示板そのまま。

<h1 style="color:red;font-size:larger;font-weight:normal;margin:-.5em 0 0;">FC2 blog vol.62</h1>
<dl class="thread">
<dt>205 :<font color=green><b>Trackback(774)</b></font>:2010/11/22(月) 16:37:00 ID:iVtnAoXF
<dd>FC2ブログのコメントを2ch風にしたいんだが<br>えろい人教えて
<dt>206 :<font color=green><b>Trackback(774)</b></font>:2010/11/22(月) 16:39:27 ID:5Zv/lAW8
<dd>>>205<br>自力でがんばれ
</dl>

ソースを見て分かる特徴を以下に書き出しておく。

FC2ブログの環境設定の変更

『環境設定の変更』 → 『ブログの設定』タブを選択し、『コメント設定』の中の設定を以下の通りに変更する。

テンプレートの変更例と解説(HTML)

  1. <!--comment_area-->
  2. <!--topentry-->
  3. <h3 class="thread-title">コメント欄のタイトル</h3>
  4. <!--/topentry-->
  5. <dl class="thread">
  6. <!--comment-->
  7. <dt><%comment_no> :<strong><%comment_url+name></strong>:<%comment_year>/<%comment_month>/<%comment_day>(<%comment_wayoubi>) <%comment_hour>:<%comment_minute>:<%comment_second> ID:<%comment_trip></dt>
  8. <dd><%comment_body></dd>
  9. <!--/comment-->
  10. </dl>
  11. <!--/comment_area-->

テンプレートの変更例と解説(CSS)

h3.thread-title
    {
    margin:-.5em 0 0;
    color:red;
    font-size:larger;
    font-weight:normal;
    }
dl.thread dt strong
    {
    color:green;
    }
dl.thread dt a:link
    {
    color:blue;
    }

完成例

Re: FC2ブログのコメントを2ch風にしたいんだがえろい人教えて

0 :Silentminority(774):2011/01/12(水) 00:00:00 ID:aV/dabIU
コメントを書き込もうかと思ったけどそんなことをしなくてもこのようにして
記事中に同じように表示させる事ができるんだった。うっかりうっかり。

なお、この例文では滅多に使わない強制改行をふんだんに盛り込んでみました。
過度な強制改行は読みやすいらしいので。ゆーざびりてぃだそうです。

また、h3要素はこのblogでは使わないスタイルなのでstyle属性で設定しています。

この記事を読んでもさっぱり理解できなければあきらめて下さい。と言いたいところだけど、
藍色通信 附属書(P152) - Re: FC2ブログのコメントを2ch風にしたいんだがえろい人教えて
に目を通せばもしかしたら何とかなるかもしれない。それでダメなら私には手に負えないの。
えろいひとに訊いて下さい。
以上、思い付き記事終わり。
1 :Silentminority(774):2011/05/07(土) 00:00:00 ID:aV/dabIU
記事を読み返したらごちゃごちゃして読み辛かったので内容を修正。
あと、記事ごとに1から順に番号を振る方法を附属書に追記したので参考にどうぞ。
まあ、別にDL要素にこだわらなくてもOL要素使えばいいんじゃないのということ。
公開: 2011年01月12日, カテゴリ: ぶろぐいじり

現在の書き込みは、-件です。

現在の書き込みは、4件です。

585 :mick:2011/01/12(水) 03:18:59 ID:9fN258Kw
共有テンプレートにはブログそのものを2ch風にするテンプレートもあるようですよ(テンプレート名「bbs」)
586 :藍色:2011/01/12(水) 23:22:10 ID:aV/dabIU
mickさん
 先程検索で探してプレビューで試してみましたけど、まさにそのもので面白いですね。あそこまで再現してしまうとは。
589 :匿名希望 :2011/01/20(木) 02:03:57 ID:-
>585
安価test
631 :藍色:2011/05/07(土) 21:49:24 ID:aV/dabIU
 いや、何か今更ではあるけど気付いたのでメモ代わりに書き込んでおく。
 私は記事中で"dt{display:list-item;list-style-type:decimal;} とすれば一応再現できるけど、CSS無効化したときに番号が消える"云々と書いているけど、そんなことしなくてもol要素を使えば何の問題も無かった。li要素に投稿者情報を、書込みの内容はli>pでマークアップしておけばいい。
 あと、記事が何だかごちゃごちゃして見辛い見辛い。というわけで少し記事内容修正しておく。ol要素の件は附属書の方にでも追記するか。