FC2ブログの「コメントを受け付けない + コメント表示」設定時のカスタマイズ

弊テンプレートの仕様

全てではないんですが、最近のものはこんな感じです。

ボタン状になっているものとテキストのものとがありますが、ともかく

• コメント編集ページへの遷移(編集用パスワード記入者のみ)
• 簡単返信(コメントタイトル入力「To xxさん」)
• コメント一覧top位置まで移動
• コメント投稿フォームまで移動

用途としては上記の通りです。

問題点

まず新規設定の設定を新旧投稿画面で確認。

コメントの受付を 停止 する場合に利用する設定ですね。これまで受信済みの既存コメントはそのまま表示し、新規のコメントは受け付けない、という設定です。

この設定を行うと 投稿フォームが非表示化されます。ページ上から無くしてしまうことでコメント不可にする、という単純な仕組みですね。ところが コメント受付け状態か拒否状態かを見分ける独自変数が無い んですよねぇ (´・ω・｀)

前章で説明した各種ボタン類はコメント投稿フォームが無ければ存在意義を失ってしまいます。コメント編集ページへのリンクはもう編集不可ですから移動できません。簡単返信は返信不可ですから無意味。コメント一覧のtop位置移動はかろうじて有効。コメント投稿フォームへの移動はコメントフォーム自体が無いのですから無意味。つまり意味を失ったボタンやテキストは押しても何も起こらないので 閲覧者が戸惑う可能性が高い。

解決策(JavaScript)

独自変数さえあれば至極簡単に解決できるんですけどね。例えば一案として <!--accept_comment--> <!--/accept_comment--> は「コメント受付中の場合は」で、<!--refuse_comment--> <!--/refuse_comment--> は「コメント拒否中の場合は」とか。状態の切り分けができれば良いのだけれど。そしたらユーザーさんの手を煩わせることなくテンプレート製作者側で補完可能。

といくら言ったところで現状で無いものは無いんで、JSでどうにかする、と (´・ω・｀)
本設定の導入後、なんとかしないとなぁ、と延ばし延ばしにして 気づいたら2年経っとる。すみませんホント ^^;

<!--permanent_area-->
<script>
if(!(document.getElementById('comment_form'))){
for(var d=document.getElementsByClassName('comment_btn-list'),i=0;i<d.length;i++)d[i].style.display='none';
}
</script>
<!--/permanent_area-->

上記コードはどのテンプレートでもコピペだけで使えるとは限りません。

コード中に comment_btn-list という文字列があり、これはボタン類(あるいはテキスト類)をまとめているラッパーに付けられているclass名です。ところがこれがねぇ、私がその都度得手勝手に名称を変えてるんですよ(笑)
毎回同じにしとけよ！って感じ (*ﾉｪﾉ)

なので申し訳ないんですが各テンプレートで確認を行ってください。ごめんなさい。わからないという方は当記事もしくは該当テンプレートの専用記事でお尋ねください。多くの場合 comment_btn-list comment-btn-list comment-info とかそんな感じだと思います ←

上記JSをテンプレートhtmlの </body> の直前に貼り付けてください。ボタン類をまるごと非表示にします。

説明

本JSについてはテンプレートへのデフォルト導入は避けたいと思います。というのは、私個人としてはこの設定を利用しているユーザーさんが多いとは思えないのです (´・ｪ・｀)

考えられるアプローチはいくつかあります。

1. 投稿フォームが有る場合はcreateElementでボタンを 作成
2. ボタン類の初期状態のCSSのdisplay値をnoneにしておき、投稿フォームが有る場合はblockに変更(可視化)
3. ボタン類の初期状態のCSSのdisplay値をblockのままにしておき、投稿フォームが無い場合はnoneに変更(不可視化)

などなど。今回採用したのは③です。結局は「コメント受付の停止が発生する頻度」ですよね。最初から一貫してコメントを受け付けない方は元よりコメント関連のhtmlは不要なので削除するのが妥当ですし、逆にずっと受け付けているという場合も多いと思います。停止ってのは割合的に少ないのではないか。

発生頻度が低い状況に対応するために「要素を追加作成(①)」は消去法で無し。同じく「デフォルト非表示(②)」の場合はつまり「コメント受付なしをデフォルトとする」のと同じなのでこちらも消去。残ったのが③です。

いずれにしろ「コメント停止設定を利用する可能性が非常に低い、あるいは無い」という方にとっては全くもって無駄なJSなので、利用する可能性がある、という方へは任意カスタマイズという形で対応してもらった方が良いと判断しました。

別の方法

もう一つの方法は コメント受付を停止する「記事」の末尾にJSを記載 する方法です。実際操作するのはCSSだけ、style要素の追加なんですが、記事内にstyle要素を書いてしまうとバリデートエラーになりますので、それを避けるためにJSでもってstyle要素をhead内に差し込む、という回りくどい方法を使います。回りくどいとはいえ汎く利用される方法ですし、何かを後回しでheadに追加する、というのはスピード対策など至るところで見られる手法ではあります。
* 今回はスピード対策にはあたりません。

<script>
var styleElm = document.createElement('style');
styleElm.innerText = '.comment_btn-list{display:none}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

こちらの方法を採用する場合でもやはり .comment_btn-list とは限りませんので確認を(重ね重ねすみません)

コメントの受付を停止する、ということは 記事編集画面を一旦は開く ということですから、もしかしたらこちらの方が良いかもしれませんね。毎回作業は発生しますが、関係の無いページでJSが読み込まれることがありません。

ただこの方法だと テンプレートを変更したらどうするの という問題が。

まとめ

まとめとして、最初に記載したJS内容を書くのは「テンプレートhtml」です。後者の方は「記事内容の末尾」です。前者は「一度作業すれば後は自動適用」後者は「設定を変更する都度作業が発生」「テンプレート変更に対処できない(クラス名が同じとは限らない)」です。どちらを採用するかはご自身で選択してくださいね。

運営さん、できれば変数を作って欲しい。リクエスト出してるけど期待薄かなぁ (´・ｪ・｀)