【はてなブログTOPページでのネタバレ記事のコメント欄】お前を消す方法

例えば、とある映画を公開初日に観てきました。

で、その感想を早速はてなブログに書きました。

内容に触れる部分は、ネタバレ防止策としてもちろん「続きを読む」以降に。

そんな風に気をつけたとしても

コメント欄でネタバレされたら意味ないんですよね。

まあ、TOPページのコメント欄全部消すのであれば

この辺りを参考にすれば、デザインCSSに追加するだけで

あっさり解決するのですが、

今回私がやりたかったのは、「ネタバレ記事だけ」

TOPページではコメントを表示しないようにしたいというもの。

その対策に至るまでの備忘録となります。

なお、流用する場合は自己責任でお願いします。

で、考えたのは

特定のカテゴリを設定している場合のみ

コメントを表示しないようにすればいいのでは？と。

結果、フッタ部分に以下のコードを追加してみました。

案1．「ネタバレ」カテゴリの位置からコメント欄を探す

<script type="text/javascript">
//page-index＝TOPページでのみ存在するクラス名
var bd=document.getElementsByClassName( "page-index" );
if(bd.length!=0)
{
    //「ネタバレ」カテゴリーのある記事を探す
    var tag = document.getElementsByClassName( "entry-category-link category-ネタバレ" );
    if(tag.length!=0)
    {
        for(i=0;i<tag.length;i++)
        {
            //カテゴリーを記載している位置
            //#entry-*** > div > header > div.entry-categories.categories > a.entry-category-link.category-ネタバレ
            //コメント欄の位置
            //#entry-*** > div > footer > div.comment-box
            //なので、headerの1つ上まで戻ってからコメント欄を特定
            tag[i].parentNode.parentNode.parentNode.getElementsByClassName( "comment-box" )[0].style.display="none";
        }
    }
}
</script>

これで、「ネタバレ」カテゴリが設定してある記事は

TOPページ上ではコメントが表示されず

「続きを読む」までして初めて

コメントの読み書きが出来るようになった・・・はず？

とはいったものの

「parentNode.parentNode.parentNode」とか正直スマートではないなーと。

現状はともかく、はてなブログのフォーマットが変更されて

この階層構造が変わってしまったらおしまいなので

もうちょっとましなのに修正してみました。

案2．各記事のarticleタグからカテゴリ名およびコメント欄を探す

<script type="text/javascript">
//page-index＝TOPページでのみ存在するクラス名
var bd=document.getElementsByClassName( "page-index" );
if(bd.length!=0)
{
    var inner=document.getElementById( "main-inner" );
    if(inner!=null)
    {
        var art=inner.getElementsByTagName( "article" );
        if(art.length!=0)
        {
            //記事毎に検索
            for(i=0;i<art.length;i++)
            {
                var tag = art[i].getElementsByClassName( "entry-category-link category-ネタバレ" );
                if(tag.length!=0)
                {
                    //ネタバレ記事なので、コメント欄を非表示に
                    art[i].getElementsByClassName( "comment-box" )[0].style.display="none";
                }
            }
        }
    }
}
</script>

各記事はarticleタグでくくられているのでそれを取得し

その配下にあるカテゴリ名を確認し

該当カテゴリがあれば、コメント欄を非表示にする方法。

3つ上に戻るよりはマシ・・・と思いたい。

ただ、こちらもID名やクラス名を変えられたら

効かなくなるのは同じなんですけどね。

とりあえず、対策した結果を実際に確認してみました。

当ブログのトップ記事として固定しているサイトマップっぽいもの。

これを該当カテゴリに設定してみました。

（例では「ネタバレ」カテゴリでしたが

ここでは「TOPページではコメント非表示」という名のカテゴリに）

その結果、左下に「コメントを書く」ボタンがないのがおわかりでしょうか。

これが、実際にその記事をクリックしてみると・・・

今まで通り、「コメントを書く」ボタンも、コメント欄も表示されると。

そんな感じで、望んだ結果は一応得られましたけど

やっつけ作業なのは否定しません。