小説家になろうのセリフ行( 「」『』() )をハイライトして、読みやすくするスクリプトを紹介します。
カクヨムは一部対応しています。
拡張機能の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担当者の作り方】