小説家になろう・カクヨムの縦書き表示はすでに
で実現できているのだけど、諸々の事情もあって、この方法を考えた。
web小説をユーザースタイルシートで縦書き表示（Vivaldiブラウザ）で示したCSSをほぼそのまま、ブックマークレットで適用させる方法。
以前はVivaldiブラウザにしかないページアクションという機能を使う方法だったので、Vivaldiブラウザ以外ではCSS適用ができなかったけど、下記の方法であれば、どんなブラウザからもブックマークレットを起動してCSSを適用させることが可能になった。
スマホ（Androidでのみ確認済み）でも可能。ただし、青空文庫の表示については、スマホではうまくCSSが適用してくれない（素直に「えあ草紙」などを使えば良い）。
フォントをインストール
※PCの場合だけ。
基本は源暎ちくご明朝を使う前提になっているので、PCの場合、ダウンロードしてインストールしておく。
スマホの場合はとくにフォントをインストール必要はない。
スマホの場合、僕の使っているAndroidでは日本語の明朝体がインストールされていない＆後からインストールもできないので、無料のwebフォント「Noto Serif JP」を使って表示するように設定している。
webフォントは、初回だけはフォントをダウンロードするために表示が遅いはず…。
一度、ダウンロードしてしまえば、あとはブラウザのキャッシュに残るため、表示は速くなるはず…、たぶん。
参考：webフォントを使うとページ表示が遅くなる？
ブラウザで下記の内容の新しいブックマークを作成する（適当なページをブックマークして、それを編集する）だけ。
ブックマークの保存場所はどこでもいい。
- ブックマークの名前は「縦書きブックマークレットbbbbb」
- 名前は何でもいい。「bbbbb」をつけたのは、後述するようにアドレスバー兼検索バーでブックマークレットを呼び出す際に、簡単に呼び出せるようにしているだけ。
- ブックマークのURL（アドレス）のところに以下の内容を入れる。コピペしづらい時はこちらを開いてください。
※セキュリティの関係か、ブックマークレットの記述をアドレス欄にコピペすると、冒頭の「javascript:」が消えてしまう場合あるようだ。そのときは、コピペ後、手動で冒頭に「javascript:」を入力してください。
javascript:(function(){s=document.body.style;s.writingMode='vertical-rl';s.margin='2em';var style=document.createElement('style');var head=document.getElementsByTagName('head');style.setAttribute('type','text\/css');style.innerHTML='@import url(\'https://fonts.googleapis.com/css?family=Noto+Serif+JP\');*{font-family:"源暎ちくご明朝 v2","GenEi Chikugo Mincho v2:style=Regular","Noto Serif JP" !important;background: #faf4e8 !important;}body{-webkit-writing-mode: vertical-rl !important;text-orientation: mixed;}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%;}.novel_subtitle {font-size: 170% !important;font-weight: bold !important;}#container {margin: auto 0 !important;}#novel_header {display: none;}#novel_honbun {margin: 30px auto 30px !important;padding: 0 20px 0 20px !important;width: auto !important;line-height: 1.7 !important;}#novel_contents {margin: 0;width: 100%;padding: 0px 0px 0px 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 {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;}/*傍点*/';head[0].appendChild(style);})();
補足
CSSを追加する場合、
冒頭の
javascript:(function(){var style=document.createElement('style');var head=document.getElementsByTagName('head');style.setAttribute('type','text\/css');style.innerHTML=' と最後の
';head[0].appendChild(style);})();
の間に、
CSSを書く。ただし、改行やタブは挟んではいけない。
PCのブラウザの場合
パソコンであれば、読みたい作品のページを開いた状態で、登録したブックマークレットをクリックすればいいだけ（iPhoneのSafariも同様らしい）。
スマホのブラウザの場合
スマホ（Android）のVivaldiやChromeでは、ほんの少しだけ手間がかかる（大した手間ではない）。
下記の手順が分かりづらい時は、画像付きで説明している スマホのブラウザで「えあ草紙」を使って電子書籍（Web小説）を縦書きで読む をご参考に。
①アドレスバー兼検索バーでブックマークレットを呼び出す。
小説家になろう やカクヨムで読みたい作品の話のページをブラウザで開いたら、画面上部のアドレスバー兼検索バーに登録したブックマークレット名を入力。
ブックマーク名を「縦書きブックマークレットbbbbb」にしていたら、「bbbbb」と入力すれば、ブックマークレットが呼び出せる。
ブックマークレット「縦書きブックマークレットbbbbb」が候補に上がってくるので、それをタップしたらで縦書き表示される。
参考リンク
