Skip to content

小説家になろうキレイな縦書き段組スタイル(ダークテーマ対応) | Narou Clean Vertical Writing Multicolumn Style (Dark Theme Supported) by canonselphycp400

Screenshot of 小説家になろうキレイな縦書き段組スタイル(ダークテーマ対応) | Narou Clean Vertical Writing Multicolumn Style (Dark Theme Supported)

Details

Authorcanonselphycp400

LicenseCC-BY-4.0

Categorysyosetu, 小説家になろう, なろう, narou

Created

Updated

Size7.9 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

*Note お知らせ: This theme is originally light mode. You have to use a browser extension called "Dark Reader" to make it dark mode.
このスタイルはもともとライトモード用です。ダークモードにするには、「Dark Reader」というブラウザのアドオンを使う必要があります。https://darkreader.org/

PC向けの縦書き段組スタイル。「小説家になろう」というサイト用のスタイル。
A vertical writing column style for PC. Made for "Shousetsuka Ni Narou".
Preview Video プレビュー動画: https://imgur.com/a/VQqYN87

Main Features 主な機能: 
-Vertical Writing Style 縦書きスタイル
-Hidden Tabs and Main Menu 隠しタブとメインメニュー
-Compatible with "Dark Reader" if you want a dark theme「Dark Reader」に対応(Dark Themedになりたい場合)

Contact 連絡:
バグ、おすすめなどをディスコードユーザー名 Discord Username: canonselphycp400に報告お願いします。

Notes

このスタイルについて


unicloneさんのものをベースとしています。リンクはこちら: https://uso.kkx.one/style/125201

ウェブページの位置を問わず、まえがきやあとがき、いいねなどはいつでも左側に展開することができます。
上側のメインメニューも下側のナビゲーションメニューも同様に制御することができます。
タブはない場合もあるので、必ずしも左側にタブが現れるは限りません。

フォントサイズと各ページの寸法は設定メニューで入力することができます。
デフォルトのフォントをセリフフォントに変えました。(Yu Mincho/游明朝体)。フォントも設定メニューから変えることができます。
ウェブページのアニメーション機能は省かれています。

ダークテーマを使いたい場合「Dark Reader」というブラウザのアドオンを使うことで実現できます。
ダークテーマプレビュー:https://userstyles.world/api/style/preview/3065.jpeg

About This Stylesheet


Based on the work of uniclone.
Found here: https://uso.kkx.one/style/125201

Regardless of the position of the web page; foreword, afterword, likes, etc. can always be expanded on the left side. In the same manner, you can control the main menu at the top as well as the navigation menu on the bottom. Sometimes, tabs may be empty, so not all tabs on the left will necessarily appear.

The font size and dimensions for each page can be entered in the settings.
The font style has been changed to a serif font (Yu Mincho). The font can also be changed in the settings menu.
Web page animations have been removed.

If you want to use a dark theme, this style is supported by the browser add-on "Dark Reader".
Dark Theme Preview:https://userstyles.world/api/style/preview/3065.jpeg


Changelog 変更ログ:


08/21/2022
-You can now change the line spacing in the settings menu.
設定で行間を調整できるようになりました。
06/16/2022
-Changed the default settings to work better from the start.
初期設定を変更しました。一回目の発動からもっと調整しやすいです。
04/07/2022
-Fixed some grammatical errors in the Japanese description.
日本語の説明の文法をいくつか訂正しました。私はまだ初心者なので大目に見ていただければと思います。
-Added a preview video! See the stylesheet in action by clicking the link in the description.
プレビュー動画を追加しました!スタイルシートの挙動を見たい場合は説明内のリンクを押してみてください。


Contact 連絡:


Please let me know in Discord if you encounter any problems. My username is canonselphycp#400. Also, if you would like to send a cheer, suggest other features, or just chat, feel free to send a message. 
不具合を発見した場合はディスコードにて教えていただければと思います。ユーザー名はcanonselphycp#400。なお、声援を送りたい方、新たな機能を提案してくれる方、雑談したい方は是非メッセージを送ってください。


Special thanks to eel-dog for checking my Japanese.
私の日本語をチェックしてくれたeel-dogさんに感謝します。🙇‍♂️

Source code

/* ==UserStyle==
@name           小説家になろうキレイな縦書き段組スタイル
@namespace      USO Archive
@author         canonselphycp400
@description    `
PC向けの縦書き段組スタイル。「小説家になろう」というサイト用のスタイル。
A vertical writing column style for PC. Made for "Shousetsuka Ni Narou".
https://userstyles.world/style/3065/default-slug
`
@version        08.21.2022
@license        CC-BY-4.0
@preprocessor   uso
@advanced text charsize "Char Count (Vertical) 文字数(縦)" "24"
@advanced text linesize "Line Count (Horizontal) 行数(横)" "26"
@advanced text gapsize "Page Gap Size 段組間隔" "10em"
@advanced text linespacing "Line Spacing 行間" "1.8"
@advanced text fontsize "Font Size 文字サイズ" "24pt"
@advanced text fontfamily "フォントスタイル" "'游明朝', 'Yu Mincho', YuMincho, 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'MS ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif"

==/UserStyle== */
@-moz-document regexp("https://(ncode|novel)\\.syosetu\\.com/n\\d{1,4}[a-z]{1,2}/(\\d+/)?") {


    :root > body > *:not(#novel_header):not(#container),
    :root #container > *:not(.contents1):not(#novel_contents):not(#recommend):not(#contents_main),
    :root #novel_color ~ *:not(#novel_hyouka):not(#impression):not(#review):not(#novel_footer):not(.p-novelgood-form) {
        display: none;
    }

    :root {
        overflow: visible;
        font-size: /*[[fontsize]]*/;
        /* フォントサイズ */
    }
    
    #pageBottom
    {
        display:none;
        pointer-events:none;
        opacity:0;
    }

    .contents1{
        padding-top:50px;
    }
    .contents1,
    .nothing {
        background-color: inherit;
    }

    
    .novel_subtitle{
        padding-bottom:/*[[gapsize]]*/;
    }
    
    .novel_view {
        overflow: visible;
    }
    
    body{
        padding-bottom:30px;
    }
    
    :root #container {
        overflow-y: auto;
        margin: 0;
        padding: 0 0 0;
        height:calc(100vh - 30px);
    }


    :root #novel_color {
        margin: auto;
        width: auto;
        color: inherit;
    }

    :root #novel_ex,
    :root .index_box,
    :root .novel_writername,
    :root .novellingindex_bookmarker_no {
        margin: 20px auto;
        width: 730px;
    }

    :root #novel_honbun {
        font-family: /*[[fontfamily]]*/;
        font-weight: normal;
        margin: 0 auto;
        padding: 0;
        width: calc(/*[[linesize]]*/rem * 1.8);
        max-width: calc(100% - 3rem - 0px);
        height: /*[[charsize]]*/rem;
        max-height: calc(100vh - 50px);
        column-span: all;
        column-width: /*[[linesize]]*/rem;
        column-gap: /*[[gapsize]]*/;
        writing-mode: vertical-rl;
        font-size: 1rem !important;
        line-height: /*[[linespacing]]*/ !important;
    }

    :root #novel_header {
        position: fixed;
        left: -15px;
        opacity: 0;
        border: none;
        box-shadow: 0 0 5px #0000005e;
        z-index: 2
    }

    :root #novel_header:hover {
        left: 0;
        opacity: 1;
    }

    :root .novel_bn:last-child {
        position: fixed;
        bottom: 0;
        margin: auto;
        left: 0; 
        right: 0; 
        margin-top: 50px;
        width: 300px;
        opacity: 1;
        background:rgba(255, 255, 255, 0);
    }

    :root .novel_bn:last-child::before {
        content: 'ナビゲーション';
        white-space: pre;
        font-size: 12px;
    }


    :root .novel_bn:last-child:hover {
        left: 0;
        opacity: 1;
    }

    :root .novel_bn:first-child {
        height: 0;
        width: 0;
        text-height: 0;
        opacity: 0
    }


    :root #novel_p {
        position: fixed;
        left: -15px;
        opacity: 0;
    }

    :root #novel_p:hover {
        left: 0;
        opacity: 1;
    }

    #novel_p,
    #novel_a,
    #novel_hyouka,
    #impression,
    #review,
    #novel_footer,
    #recommend,
    .p-novelgood-form {
        position: fixed;
        z-index: 5;
        overflow: hidden;
        height: 75px;
        width: 0px;
        margin: 0;
        padding: 0 0 0;
        border: none;
        opacity: 0.90;
        align-items: center;
        display: block;
    }

    #novel_p::before,
    #novel_a::before,
    #novel_hyouka::before,
    #impression::before,
    #review::before,
    #novel_footer::before,
    #recommend::before,
    .p-novelgood-form::before {
        left: 0px;
        position: fixed;
        height: 60px;
        width: 25px;
        z-index: 5;
        display: block;
        font-size: 12px;
        padding-bottom: 10px;
        padding-top: 10px;
        text-align: left;
        writing-mode: vertical-rl;
    }

    #novel_p {
        top: calc(50px + 11vh * 0);
    }

    #novel_a {
        top: calc(50px + 11vh * 1);
    }

    .p-novelgood-form {
        top: calc(50px + 11vh * 2);
    }

    #novel_hyouka {
        top: calc(50px + 11vh * 3);
    }

    #impression {
        top: calc(50px + 11vh * 4);
    }

    #review {
        top: calc(50px + 11vh * 5);
    }

    #novel_footer {
        top: calc(50px + 11vh * 6);
    }

    #recommend {
        top: calc(50px + 11vh * 7);
    }


    #novel_p::before {
        content: 'まえがき';
    }

    #novel_a::before {
        content: 'あとがき';
    }

    .p-novelgood-form::before {
        content: 'いいね';
    }

    #novel_hyouka::before {

        content: '評価';
    }

    #impression::before {
        content: '感想';
    }

    #review::before {
        content: 'イチオシ';
    }

    #novel_footer::before {
        content: 'フッター';
    }

    #recommend::before {
        content: 'おすすめ';
    }


    #novel_p:hover,
    #novel_a:hover,
    #novel_hyouka:hover,
    .p-novelgood-form:hover,
    #impression:hover,
    #review:hover,
    #novel_footer:hover,
    #recommend:hover {
        border-right: 10px;
        border-color: #AAAAAA;
        overflow-y: auto;
        padding: 1em 2em;
        width: 500px;
        max-width: 80vw;
        height: calc(100vh);
        top: 0;
        z-index: 4;
        padding-left: 115px;
        background-image:initial;
        background-color: inherit;
        opacity: 0.90;
        box-shadow: 0 0 5px #0000005e;
    }

    #novel_p:hover::before,
    #novel_a:hover::before,
    #novel_hyouka:hover::before,
    .p-novelgood-form:hover::before,
    #impression:hover::before,
    #review:hover::before,
    #novel_footer:hover::before,
    #recommend:hover::before {
        opacity: 1;
        z-index: 10;
        left: 0px;
    }

    #novel_p:hover::before {
        top: calc(50px + 11vh * 0);
    }

    #novel_a:hover::before {
        top: calc(50px + 11vh * 1);
    }

    .p-novelgood-form:hover::before {
        top: calc(50px + 11vh * 2);
    }

    #novel_hyouka:hover::before {
        top: calc(50px + 11vh * 3);
    }

    #impression:hover::before {
        top: calc(50px + 11vh * 4);
    }

    #review:hover::before {
        top: calc(50px + 11vh * 5);
    }

    #novel_footer:hover::before {
        top: calc(50px + 11vh * 6);
    }

    #recommend:hover::before {
        top: calc(50px + 11vh * 7);
    }
    
    div, ul, li { background-color: inherit; }
}

Reviews

No reviews yet.