忘却まとめ

Blenderの中級者・上級者向けの踏み込んだ情報や、アドオン・3DCGに関する情報を記事にします

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

その他

更新日:

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

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

空行を削除

コード内の「空行を削除」を有効化することで、空行を削除できます。
(「// 」を削除することで有効になります)
やたらと空行の多い小説を読みやすくすることができます。

ver0.4

2024-09-26

  • 「」の表記揺れや種類に対応しました。
  • コードを整理しました。
  • コメントアウトで「空行を削除」するコードを追加しました。
    • 「// 」を削除することで有効になります。
// ==UserScript==
// @name         「」行をハイライト
// @namespace
// @version      0.4
// @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://www.pixiv.net/novel/*
// @match        https://kakuyomu.jp/works*
// @license      MIT
// @grant        none
// ==/UserScript==




$(function() {
    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;
        var dialogue = ['「', ' 「', '  「', ' 「','[', '{', '〈','〔'];
        var b_dialogue = ['『','《','(','('];

        for (const tgt_text of dialogue) {
          if(new_text.startsWith(tgt_text)){
            var new_text = css_text_skyblue + new_text + "</div>";
            p_tag[i].innerHTML = new_text;
          }
        }

        for (const tgt_text of b_dialogue) {
          if(new_text.startsWith(tgt_text)){
            var new_text = css_text_dubble_kakko + new_text + "</div>";
            p_tag[i].innerHTML = new_text;
          }
        }

        // 空行を削除
        // if(p_tag[i].innerHTML.startsWith('<br>')){
        //     var new_text = "<div></div>";
        //     p_tag[i].innerHTML = new_text;
        // }


   }
});


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

    var css_text_skyblue = "<span style='color:skyblue !important;'>";
    var css_text_dubble_kakko = "<span 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 + "</span>";
            p_tag[i].innerHTML = new_text;
        }
        else if(new_text.startsWith('『')){
            var new_text = css_text_dubble_kakko + new_text + "</span>";
            p_tag[i].innerHTML = new_text;
        }


   }

});


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モデルなどの制作依頼はこちら

-その他

Copyright© 忘却まとめ , 2024 All Rights Reserved Powered by STINGER.