縦書きについて
メリット
タブレットの場合
スマホやKindleの画面は縦長ですので、そもそも縦書きが適しています。
横持ちにして横書きで読んでもいいですが。
iPhoneのブラウザにはアドオンが無いため、縦書き表示は無理かと思います。Androidなら可能かもしれません。
PCの場合
PCでは、段組み（ページ単位の表示）にすることに意義があるかもしれません。文字数の感覚に慣れができます。表示が縦長になるため、タブやウィンドウのタイリングとも相性が良いでしょう。
webページを縦書きにする方法
最近のブラウザには、もともと縦書きの機能がついています。縦書きは、CSS3のwriting-modeを設定することで有効になります。確認したところ、スマホのChromeですら、縦書き機能がありました。
したがって、サイトのCSSを差し替えることで、文書を縦書きにすることができます。
こんなに簡単そうなことを、なぜ公式がやってくれないのか……。そう思うのは、ユーザの勝手でしょうか。
縦書きの導入（PCのみ）
ハーメルンの場合、サイトをモバイル版表示に切り替えることで、実験機能である縦書きを有効にできます。折り返しがウィンドウの幅と同じになるため、割り切って、閲覧用のブラウザ（のインスタンス）を分けると良いかもしれません。
以下では、なろうのためのアドオンを導入します。
アドオンを入れる
CSSを差し替えるため、StylishかStylusをブラウザに入れます。
Stylishは、ユーザの情報を企業に送っていたことがバレて、炎上したことがあるようです。が、ネットはそういうものでしょう。どちらを使っても大差無いかと。気になるならStylusを入れます。
いずれも、userstyles.orgにユーザがアップロードしたcssを、任意のサイトに適用するアドオンです。導入は5分以内。検索サイトやSNSなどの配色も変更できます。
プロパティの設定
なろうのホームでStylusのアイコンをクリックし、『小説家になろう 縦書き段組』を導入します。 その名の通り、段組みにして表示してくれます。また、画面端にカーソルを持っていくと、メニューがポップするようになります。
CSSから、以下の部分を好みで編集します。
/* 23行目 */ font-size: 14pt; /* フォントサイズ */ /* 28行目、29行目 */ color: #666; /* 文字色 */ background-color: #eee; /* 背景色 */ /* 77行目 */ width: calc(24rem * 1.8); /* 行数 (24remの値を変更) */ /* 79行目 */ height: 38rem; /* 行あたり文字数 (38remの値を変更) */
mobaの場合、文字色は白に近い灰色（#b9b9b9）にしてみました。背景は真っ黒 (#000000) です。
参考までに、1ページあたりの文字数は、電撃文庫は42文字17行、講談社タイガは40文字17行、講談社ラノベ文庫も同様です。なろうの場合、PCから見ると、行あたり37文字でした。
縦書き用CSSのカスタマイズ
さらにCSSを編集します。検索結果を参考にしました。
線で段を区切る
:root #novel_honbun { } 内を編集します。まず、column-gap: 10em;は広過ぎるため、2.5emくらいにします。emは親要素の文字サイズを表すそうです。
column-rule: solid 1px #808080;を追記して、段区切りの線を入れます。色はお好みで。
及ばぬあれこれ
にわか仕込みのmobaでは至らぬところがあります。
- タイトルと本文の間に区切り線を挿入したい
- 連続する改行を圧縮したい（切実）
- 見開き表示（1段に2ページ表示）にしたい
まあ今ので十分かなと思っています。凝りたい人は頑張ってください。そして、シェアしてください。興味のある部分なので、僕も泣いて喜びますよ！（どうでもいい）
