adbird（広告鳥） 備忘録

web小説をユーザースタイルシートで縦書き表示（Vivaldiブラウザ）

css Vivaldi

web小説サイトの「小説家になろう」と「カクヨム」の作品ページを、Vivaldiブラウザのページアクションの機能でユーザースタイルシートを適用させて縦書き表示にする方法。

Vivaldiのページアクションにはすでに縦書き表示できる「リーダービュー」が入っているけど、それだと

  • 「小説家になろう」では「前へ」「次へ」のリンクが表示されず、ページ遷移ができない。
  • カクヨムではそもそもリーダービューが機能しない。

ということもあって、ユーザースタイルシートを適用させることにした。

Stylus というアドオンでもできるのだけど、かつて似たようなアドオンで問題（閲覧履歴の収集が発覚した「Stylish」拡張機能、“Chrome ウェブストア”からも削除）もあったし、できることならアドオンを使わないようにしたいので。

なお、「小説家になろう」と「カクヨム」のサイトのトップページでは表示が大きく崩れるので、縦書き表示するのは個々の作品のページだけにすること。

追記：青空文庫にも一応、対応したつもり。なので、cssの名前を「小説家になろう・カクヨム.css.css」から「web小説.css」に変更しました。
追記：「web小説.css」を修正。（2020.08.13）
追記：「web小説.css」を修正。（2022.08.23）

フォントをインストール

下記cssでは源暎ちくご明朝 を使う前提になっているので、ダウンロードしてインストールしておく。

任意のフォルダ内で「web小説.css」を作成

適宜、調整を。なお、閲覧しているページのcssのクラス名等を調べたい場合は、ページ上で 右クリック ＞ 検証 で要素等を調べられる。

web小説.css

/*源暎ちくご明朝のバージョン番号(v3)を適宜変更*/ 
*{font-family:"源暎ちくご明朝 v3","GenEi Chikugo Mincho v3:style=Regular","Noto Serif JP" !important;  
background: #faf4e8 !important; /*背景色*/
}
body{-webkit-writing-mode: vertical-rl !important;
    text-orientation: upright;}
p,.main_text{font-size:16pt !important; /*本文フォントサイズ*/
    color: #000000 !important;}


/*小説家になろう対応*/
div.chapter_title {
    font-size: 110%;
    padding: 30px 15px 0 0 !important;
    font-weight: bold;
}
.chapter_title {line-height: 150%;}
#container {margin: auto 0 !important;}
#novel_header {display: none;}
#novel_honbun {
    margin: 60px auto 60px !important;
    padding: 0 20px 0 20px !important;
    width: auto !important;
    line-height: 1.7 !important;
}
#novel_contents {
    margin: 0;
    width: 100%;
    padding: 0px 0px 10px 0px;
}
.contents1 {
    margin: 0 !important;
    padding: 40px 20px !important;
    width: auto !important;
    font-size:14pt !important;
    line-height: 1.7 !important;
}
#novelnavi_right #menu_on {display: none;}
#pageBottom {display: none !important;}
#novel_p {width: auto !important;;}
.novel_bn {
    text-align: center;
    margin: 10px 20px 10px 20px;
}
#novel_a {width: auto !important;}
dl.novel_sublist2 dd {width: 20px !important;}
dl.novel_sublist2 dt {width: 25px !important;}
#writter_menu_top {display: none !important;}
#navigate {display: none !important;}
#header {width: auto !important;}
#sub_top {width: auto !important;}
#novel_footer,#footer,#twitter-widget-0,.wrap_menu_novelview_after,.box_announce_bookmark,.p-novelpoint-form,element.style,#impression, #review,#novel_attention,.novelrankingtag,.koukoku_728,#recommend,.twitter-share-button {display: none;}
.p-novelgood-form__intro{display:none !important;}
.p-novelgood-form__info,.customlayout-color{display:none !important;}
.p-icon--thumbs-up-line-off {display: none !important;}
.p-novelgood-form__icon {display: none;}

/*カクヨム対応*/
#page-works-episodes-episode.writingDirection-horizontal #worksEpisodesEpisodeHeader.isShown {top: 0;}
#page-works-episodes-episode.writingDirection-horizontal.isPC #contentMain-inner, #page-works-episodes-episode.writingDirection-horizontal.isPC #contentMain-nextEpisode, #page-works-episodes-episode.writingDirection-horizontal.isPC #contentMain-previousEpisode, #page-works-episodes-episode.writingDirection-horizontal.isPC #episode-bottomAd-PC, #page-works-episodes-episode.writingDirection-horizontal.isPC #episodeFooter{
    min-width:auto !important;}
.widget-episode-inner {
    text-align: left !important;
    display: inline-block !important;
    max-width: none !important;
    max-height: 660px !important;/*本文の最大高さ*/
}
#page-works-episodes-episode.writingDirection-horizontal #contentMain-header .widget-episodeTitle {
    margin: 2rem 1.5rem 60px !important;
    font-weight: bold !important;
}
#page-works-episodes-episode #contentMain-header .widget-episodeTitle {
    color: #222;
    font-size: 18pt !important;
}
.emphasisDots>span {
    padding: 0 !important;
    background: none !important;
    -webkit-text-emphasis: filled dot !important;
}/*圏点*/
nav,#worksEpisodesEpisodeHeader-breadcrumbs,#worksEpisodesEpisodeHeader-logo,#worksEpisodesEpisodeHeader-tools,#page-works-episodes-episode.writingDirection-horizontal.isPC #episodeFooter-recommendCheerAction-inner,#page-works-episodes-episode.writingDirection-horizontal.isPC #episodeFooter-recommendCheerAction,.isPC #globalHeaderPC-search input,#episode-bottomAd-PC,
.isPC #globalHeaderPC-globalNav,.isPC #globalHeaderPC-subNav,#page-works-work #recommendedWorksList {display: none !important;}


/*青空文庫対応*/
.main_text{line-height: 2em !important;}/*行間*/
.contents_visible {
    display: block;
    margin-left: 1em !important;;
    text-indent: -1em;
}
.jisage_5{ margin-right:2em !important; margin-left:0em !important;}
.sesame_dot {font-style: normal; padding: 0 0 !important; background: none !important; -webkit-text-emphasis: filled sesame !important;}/*傍点*/

web小説.css を設定フォルダ内にコピーする

Ubuntuの場合

「web小説.css」の入っている任意のフォルダ内で、マウスの右クリックで「端末で開く」、以下を実行する。

$ sudo cp web小説.css /opt/vivaldi/resources/vivaldi/user_files

Windowsの場合

Windowsなら、以下のフォルダ内に「web小説.css」を入れる。

C:\Users\（ユーザー名）\AppData\Local\Vivaldi\Application\3.1.1929.45\resources\vivaldi\user_files

3.1.1929.45のところには、適宜、Vivaldiのバージョン番号が入る。

Vivaldiのバージョンは　ヘルプ　＞　概要　で分かる。

ページアクションで「web小説.css」を有効にする

Vivaldiブラウザを再起動させて、ページアクションで「web小説.css」を有効にする。

フォントサイズはVivaldiブラウザの右下の画面の拡大縮小（または「Ctrl　＋」「Ctrl　−」）で調整するか、cssをいじるかしてください。

↓適用前

↓適用後。