忘却まとめ

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

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

その他

更新日:

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

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© 忘却まとめ , 2023 All Rights Reserved Powered by STINGER.