以前からこんなことを思っていた。我が城「アルバトロスと黄金の泉」、スマホで見るのはｷｯﾂｲと。topページはまだしも、小説を読むページはスマホだとかなり見にくい。
たとえばPCで見る分にはこう見えるページも……
一転、スマホ（※ブラウザの開発者ツールによる疑似表示）だとこんな感じになる。
上の画像だと下部に横スクロールバーが出てないんで分かりにくいかもですが、横にスライドする手間がえげつないんですね。もはやスクロールバーが点に見えるページすらある。
そんなこんなで、スマホでも読みやすいように改良したいなと考えていた。それが「縦組み×縦スクロール」というデザインである。
ひとまず完成したので見て欲しい。以下のようなデザインになった。
縦組みだけど、縦スクロールです。↑の画像はPC版。スマホ（※ブラウザの開発者ツールによる疑似表示）だと、↓の画像のようになります。
横にスクロールではなく、縦にスクロールになるので、これならスマホでも苦じゃない（ただ、縦にクッソ長い）。
一行の長さは１８～２２文字ほど（画面の表示％によって変動あり）。PCでもスマホでも、これぐらいの長さが読みやすいレベルなのかなと思って、そういうデザインにしました。
またカラム数（段数）は、文章量に応じて自動で変化します。↑↑の画像みたいに、ｽﾞﾘｬｧｧｧｧと長くも出来ますし、↓みたく２段程度に収めることも可能。
難しい制御とかは必要ないです。ｈｔｍｌにある「 <!-- 本文ここから -->」と「<!-- 本文ここまで -->」の間にテキストを流し込めばいいだけ。<p>タグで囲う必要もなく、ただ行末に<br>タグだけ入れてもらえれば、それでok。
そんなわけで、完成したものを配布します。cssとhtml、あとjsをzipにまとめてあります。いまどき自サイト、それもWordPressとかでなくhtmlサーバーで小説を公開している文字書きがどれだけいるのかは分からないし、需要があるかも分からんが、公開しておくよ。
ライセンスとかは特にないですが、一応「用途は個人サイトのみ」「再配布さえしなければ好きに改変してもok。ただし暘 弥涼は、このテンプレートの使用に際して発生した、いかなる損害もトラブルも、その保証をしない。また個別の質問等にも一切答えない」としておきます。要するに「好きに使ってくれ」ってことです。
webコーディングのプロが作ったわけじゃなく、下手の横好きが半日で作ってみただけのやつなんで。そこは承知しておいてください。
あと動的メニューも導入されてます。そちらはコチラのサイトをがっつり参考にさせていただきました。
こんな感じにメニューが表示されます。
メニュー背景の画像はデフォルトでは「img/img001.jpg」に設定されています。画像を差し替えたい場合は、そのファイルを同名の別のファイルで置き換えるか、またはcssの134行目を変えて下さい。
