#1 - 05 レイアウト変更方法
なろう小説のレイアウトを自分好みに変更する方法は作者側とは別にユーザー側でもある程度は可能である。
筆者はオフラインで読む事が多い。pdfファイルよりHTMLファイルで。
まず該当する小説を『名前を付けて保存』する時、『webページ完全』ではなく『HTMLのみ』を選択する。話数が多い小説は手がつりそうになるけれど根気よく頑張ってもらいたい。――作者側もそのことに配慮すれば話数をもっと節約できる筈なのに。
共通するフォルダを一つに統合し、各ページのソースを書き換えていく。そうすることで無駄を省き容量を節約する。
最初に保存する時に『webページ完全』でフォルダの中身を得ておく。後はコピーして使い回しする。
保存した時、生成されたフォルダの中にいくつかの『css』ファイルがある。その中の『kotei.css』が小説のレイアウトに関係する。これはノクターン、ミッドナイト、ムーンライトと共通である。
個人の好みもあるだろうけれど、興味があれば変更してみるも良し。
※2020年12月より『ncout.css』は『kotei.css』に名称が変更された。
● ☆ ●
背景を変更する場合、更新時に作者側で行っているとcssファイルではなくhtmlファイルに直接書き込まれている場合がある。
その際に変更する例は以下の通り。あくまで一例として――
とある作品のHTMLファイル。
<style type="text/css"><!-- body {background-color:#ffffff;}dl.novel_sublist2 {border-bottom:1px solid #ffffff;}#novel_color {color:#444444;}#novel_contents div.novelrankingtag {color:#444444;}#novel_contents a {color:#0033cc;}.upper a {color:#0033cc;}#novel_contents a:visited {color:#885577;}.upper a:visited {color:#885577;}#novel_contents a:hover {color:#339933;}dl.novel_sublist2:hover {border-bottom:1px solid #339933;}.novel_view {font-size:100%;}.novel_title {font-size:170%;}.novel_subtitle {font-size:170%;}.novel_view {line-height:180%;} --></style>
自分好みに変更する時、上記の全てを変える必要は無い。
『置換』する部分は『background-color:#ffffff』だ。これは一か所だけ。
これを『background-color:#c8bebe』とする。カラーコードは自分好みに選んでおく。
文字の大きさ、色の変更も個人好みに変えていくことも可能。
● ☆ ●
『一字下げ』はcssでは出来ない。出来る方法があれば教えてほしいものである。――直接、一字スペースすればいい、と言われるかもしれない。だが、長文を一括で変更するのは至極面倒である。作者側がしっかりとやってもらいたいものだ。
● ☆ ●
多くの作者はデフォルト設定のままである。
上記に示したように『kotei.css』のソースを書き換えていく。
通常背景を長時間見ていると疲れ目になりやすい。特に明るい色調はきつい。かといって黒がいいというわけにもない。
その辺りは各個人が自分の目に優しくなる色を見つける必要がある。
以下に変更例を載せる。該当する箇所はテキストエディタの『検索』を使用する。
背景色。
body {
background: rgb(200, 190, 190); color: rgb(68, 68, 68); font-family: "Lucida Grande", sans-serif; font-size: 14px; -webkit-text-size-adjust: 100%;
}
本文の横幅調整。
#novel_honbun {
margin: 30px auto 50px; padding: 0px 20px; width: 600px;
}
本文の文字色。
#novel_color {
width: 100%; color: rgb(70, 70, 100); font-size: 22px;
}
※短編の場合、フォントサイズ18~20pxを推奨。
筆者の作品群は『#novel_honbun』のみ変更。ソースは以下である。
#novel_honbun {
margin: 30px auto 50px; padding: 0px 2px; width: 800px;
}
色は事前に設定済みなので。
――個別の色を変更するタグや文字の大きさを指定するものが欲しいところである。