⏱このページは5分ぐらいで読めます
必ず下記内容をご確認いただいた上でご利用ください。
htmlテンプレート配布の趣旨
当サイト『おものべ』ではhtml形式の同人小説を執筆・販売していますが、その時に使っている自作のテンプレートです。
単に文章をべた貼りするだけでもコンテンツとしては一応成立しますが、ユーザビリティという観点でいろいろ問題があります。スタイル（CSS）を定義して、最低限の見栄えを整える必要がありました。
あくまでも自分用ですので、けっして万人受けするものではありません。しかしこれを一から作るのは意外と大変でしたし、せっかくですので無料で配布することにしました。
そもそも、どうしてpdf形式で小説を書かないのか？
あくまで私見ですが。
一般に、同人で小説を出すと言ったらpdf形式が1番多いかと思います（あとはepubとか）。
しかしPixivなどウェブでの執筆に慣れている人――特に私のようにウェブライティングを流派（？）としている人にとって、畑違いのpdf形式というのはなかなか書きにくい部分があります。
- 縦書きと横書きでは、ぱっと見の雰囲気が全く違う
（もっとも、pdfでも横書きはできますが） - 改行を多めに取ったり漢字を開いたりする癖があるから、ページ数がやたら多くなって読みにくい
- これらの項目を配慮して書き分けるのが面倒くさい
など。そんな人たちにとっては、html形式のほうが書きやすいです。あと小説程度のコンテンツで議論するには些末な違いですが、ファイルが軽いです。
問題は、印刷が絶望的ということ。販売を電子書籍に限定しているなら問題ありませんが、紙媒体の本にして出そうと考えている方はpdfやepubなどをお使いください。
また販売サイトによっては、html形式だとオンラインのビューアに対応していない場合があります。2022年6月現在、DLsiteならオンラインビューアでhtmlを閲覧できますが、FANZAは対応しておらず端末にダウンロードする必要があります。
（当サイトではDLsiteでの購入を推奨しているため、この点についてはあまり困ってはいません）
総じて、html形式の小説は『こちらのほうが絶対にいい！』とはけっして言えず、むしろニッチな部類です。自分で使っておいて何ですが、『本当にpdfではだめなのか』『htmlにするべき確かな理由があるのか』はしっかり検討したほうがいいかと思います。
テンプレートの特徴
①目次ページと小説ページの二種構成
簡単に表すならこんな感じ。
目次ページ (0_index.html)
├ 小説ページその1 (1_novel.html)
├ 小説ページその2
└（以下略）
小説ページその2以降は、1_novel.htmlをコピペ＆リネームしてください。
タイトルやディスクリプション、サブタイトルなど、最低限必要な要素はそろっていると思います。目次ページから全ての小説ページに移動でき、また小説ページの末尾にも目次を掲載する項目があり、さらに先頭の表紙画像をクリックすれば目次ページに戻れますので、アクセシビリティは高いです。
②パソコン・スマホの両方に対応（簡易的ですが）
htmlで小説を書くとき、意外と重要になってくるのが横幅です。
CSSを定義していないと、パソコンで見たときに、画面の端から端までびろーんしてしまいます。これは目が左右に行ったり来たりして非常に読みにくい状態です。
（ブラウザのウィンドウを狭めれば文章の横幅も追従してくれますが、ユーザーにそれを強いるのは少々不親切です）
本テンプレートでは、文章の横幅を最大700px（max-width: 700px;）として、横にびろーんしないようになっています。
近年のウェブデザインのトレンドと比較すると少々狭めの横幅ですが、当サイト『おものべ』と同じ横幅。また一行当たりの文字数が、文庫本の一列当たりの文字数とだいたい同じ（40字前後）に調整されています。
スマホでは、普通に横幅いっぱいまで表示されます。
パソコン・スマホの双方で読みやすくなっているかと思います。
③ルビ振り対応
htmlに元からある機能ですが。
「<ruby>単語<rt>ルビ</rt></ruby>」で「単語」になります。「<ruby>単<rt>・</rt></ruby>語<ruby><rt>・</rt></ruby>」で単語になります（擬似的な傍点）。傍点の打ちにくさはちょっと課題ですね。
「<ruby><rt>・</rt></ruby>」を辞書登録しておくと使いやすいかと思います。
なお、当サイト内の小説は、作業の手間を省くためにWordpressのプラグインを使って別の方法でルビを振っています。そのため見栄えがテンプレートのものと変わるためご注意ください。
（見栄えを確認する場合は当サイト内ではなく、テンプレートのものをご参考ください）
④CSSは全てhtml内に記載
外部のcssファイルを読み取るのではなく、htmlファイルのheadに直接記載されたコードを読み取ります。
一般的には少々邪道な方法ではありますが、フォルダごと販売する都合上、ユーザーにとって関係のないファイルは少ないほうがいいかと思います。
⑤改造はしやすいと思います
非常に簡易なコードですので、htmlやcssを多少かじったことがある方なら問題なく改造できると思います。
注意事項
- ご利用・改造はご自由に。ただし改造・未改造関係なく、テンプレート自体を再配布・販売することはおやめください。
- ネットワーク関連のいろいろな要素を削ったhtmlですので、サーバーで動作する普通のホームページには使わないほうがいいです。
（というより、たぶん使えません） - 改造は利用者ご自身でお願いいたします。ご要望をいただいても対応できません。
- htmlやcssの扱い方、小説の書き方、配布・販売の仕方など、『そもそもの部分』に関するご質問・ご要望にはお答えできません。
- 利用時の報告は不要ですが、クレジットなどに本ホームページをご記載いただければ幸いです。
- エロはOKです（そもそもウチがエロサイトですし）。ただし違法行為に関わる、極めて攻撃的・差別的な内容であるなど、当サイトが不適切であると判断した場合はご利用をご遠慮いただく場合がございます。
コメント