【Tampermonkey 】セリフの行「」だけをハイライトするスクリプト【小説家になろう / カクヨム】

更新日：2024年1月13日

小説家になろう・カクヨムのセリフ行( 「」『』() )をハイライトして、読みやすくするスクリプトを紹介します。

拡張機能のTampermonkeyに下記スクリプトをコピペして使用してください。

ver0.3

2024-01-13

対応サイトにカクヨムを追加しました。
空白始まりの「」に対応しました。

// ==UserScript==
// @name         「」行をハイライト
// @namespace
// @version      0.3
// @description  「」行をハイライト
// @author       Bookyakuno
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @match        https://ncode.syosetu.com/*
// @match        https://novel18.syosetu.com/*
// @match        https://kakuyomu.jp/works*
// @license      MIT
// @grant        none
// ==/UserScript==



$(function() {
//    $("p:contains('「')").css({"cssText" : "color : skyblue !important"});
//    $("p:contains('『')").css({"cssText" : "color : #62c8c3 !important"});


    const p_tag = document.getElementsByTagName('p');

    var css_text_skyblue = "<div style='color:skyblue !important;'>";
    var css_text_dubble_kakko = "<div style='color:#62c8c3 !important;'>";


    for(var i = 0; i < p_tag.length; ++i){
        var new_text = p_tag[i].textContent;


        if(new_text.startsWith('「')){
            var new_text = css_text_skyblue + new_text + "</div>";
            p_tag[i].innerHTML = new_text;
        }
        else if(new_text.startsWith(' 「')){
            var new_text = css_text_skyblue + new_text + "</div>";
            p_tag[i].innerHTML = new_text;
        }
        else if(new_text.startsWith('  「')){
            var new_text = css_text_skyblue + new_text + "</div>";
            p_tag[i].innerHTML = new_text;
        }

        else if(new_text.startsWith('『')){
            var new_text = css_text_dubble_kakko + new_text + "</div>";
            p_tag[i].innerHTML = new_text;
        }

        else if(new_text.startsWith('（')){
            var new_text = css_text_dubble_kakko + new_text + "</div>";
            p_tag[i].innerHTML = new_text;
        }
        else if(new_text.startsWith('(')){
            var new_text = css_text_dubble_kakko + new_text + "</div>";
            p_tag[i].innerHTML = new_text;
        }


   }



});

ver0.2

意図しない行がハイライトしてしまう問題を修正しました。
- 今まで「」がある位置に関わらず行を検索していたので、前方一致で色付けするようにした。
『』行も色付けするようにしました。

// ==UserScript==
// @name         「」行をハイライト
// @namespace
// @version      0.2
// @description  「」行をハイライト
// @author       bookyakuno
// @match        https://ncode.syosetu.com/*
// @match        https://novel18.syosetu.com/*
// @license      MIT
// @grant        none
// ==/UserScript==



$(function() {
    const p_tag = document.getElementsByTagName('p');

    for(var i = 0; i < p_tag.length; ++i){
        var new_text = p_tag[i].textContent;


        if(new_text.startsWith('「')){
            var new_text = "<div style='color:skyblue !important;'>" + new_text + "</div>";
            p_tag[i].innerHTML = new_text;
        }

        if(new_text.startsWith('『')){
            var new_text = "<div style='color:#62c8c3 !important;'>" + new_text + "</div>";
            p_tag[i].innerHTML = new_text;
        }


   }



});

ver0.1

サイトに外部JavaScriptを適用できるTampermonkeyアドオンを使い、JavaScriptライブラリであるjQueryの、「contains」を使用して、特定文字列の行をハイライトする。

Tampermonkeyのサンプルコード

小説家になろうのサイトにて、pタグ内に"「 "がある場合、テキストをスカイブルーに変更するサンプル。

@requireでjQueryをロードする
containsにより指定する。
cssは"cssText"で変更する。
- ダークテーマにするcssと併用しているとcssが上書きされてしまうので、!importantを使える書き方にした。

// ==UserScript==
// @name         「」行をハイライト
// @namespace    
// @version      0.1
// @description  「」行をハイライト
// @author       bookyakuno
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @match        https://ncode.syosetu.com/*
// @match        https://novel18.syosetu.com/*
// @license      MIT
// @grant        none
// ==/UserScript==



$(function() {
    $("p:contains('「')").css({"cssText" : "color : skyblue !important"});

});

TampermonkeyでjQueryを使用する方法 | JavaScript / jQuery

特定の文字列が含まれているテキストの色を変えるjQuery | HTML・CSS・jQuery・PHPを徹底解説！【Web担当者の作り方】

3Dモデルなどの制作依頼はこちら