設置方法

 アーカイブを展開すると、下図のmanga2ディレクトリ(フォルダのこと)を除いた構成になっています。commonディレクトリは基本的にはさわりません。manga1ディレクトリ中にサンプルが入っていますので、そこのindex.htmlをダブルクリックして閲覧してみてください。

 新しい作品を置く場合は、manga1ディレクトリをコピーして、同じ場所に配置します(例:上図のmanga2)。imageサブディレクトリ下に漫画用の画像ファイル群を格納し、ファイル名を1からの連番にします。そしてsetting.jsをテキストエディタで開き、作品固有の設定を行ないます。

 自分のサイトに置くときは、WebManga以下をそのままアップロードすればOKです(サンプルのmanga1ディレクトリは不要です)。

setting.js - 作品固有の設定

 タイトルなど、作品ごとの設定は setting.js の内容を書き換えます。Windowsのメモ帳のようなテキストエディタで開いて編集してください。
 必須設定項目は必ず設定しなければならない項目です。作品に即した設定にしないと正常に動作しません。
 任意設定項目は見た目を制御するための項目です。つまり設定を変更しなくても動作上の支障はありません。

必須設定項目

【画像拡張子】 Extension
漫画用の画像ファイルの拡張子です。大文字小文字、全角半角は区別されます。すべての画像ファイルが同じ拡張子である必要があります。
【最終ページ番号】 LastPage
先頭ページを1とした場合の最終ページ番号です。2以上の数値を指定します。JavaScriptの場合、ディレクトリに格納されているファイルがいくつあるかを取得することができないため、ここで記載するようにしています。
作品を少しずつ公開している場合、あらかじめ画像ファイルのみすべてアップロードしておき、あとからこの値だけ書き換えたsetting.jsをアップロードすることで、最終表示ページを制限することが可能です。画像ファイルが10ページまであったとしても、最終ページ番号を8とした場合は8ページ目までしか表示されないからです。
当項目は、画面左下の「総ページ数」の表示にも使われます。
【画像ディレクトリ】 Dir
漫画用の画像ファイル群を格納したディレクトリの名前です。index.htmlからの相対パスで記載します。サンプルmanga1をコピーしたまま使う場合、変更する必要はありません。拡張子と同様、大文字小文字、全角半角は区別されます。
【ファイル名接頭辞】 Prefix
漫画用の画像ファイル名の接頭辞です。ファイル名を sample1.jpg、sample2.jpg としている場合、接頭辞は"sample"です。
画像ファイル名が連番だけで構成されている場合は不要なので、初期設定の "" のままにします。
【ゼロ詰めしているか】 PaddingZero
漫画用の画像ファイル名は、1からの連番でつけます。拡張子がjpgだとすると、1ページ目は1.jpg、2ページ目は2.jpg――という具合になりますが、001.jpg、002.jpg のようにゼロ詰めしたい場合もあります。
ファイル名の連番をゼロ詰めしている場合は1、ゼロ詰めしていない場合は0を指定します。
【ファイル名の桁数】 DigitNumber
上記でファイル名をゼロ詰めしている(1)とした場合、最大で何桁なのかを指定します。ファイル名が 001.jpg だった場合、ゼロを詰めて3桁にしていますので3、0001.jpg の場合は4を指定します。

任意設定項目

【タイトル】 Title
作品のタイトルです。ここに記載した文言が、画面上部中央に表示されます。
【見開きか】 PageDouble
単ページ表示(0)か、見開き表示(1)かを指定します。
【見開き起こしか】 StartDouble
見開き表示モードにした場合のみ、有効な設定項目です。最初から見開きで表示する場合のみ1を設定してください。それ以外は0にします。
単ページ表示モードの場合、この設定は使われません。
【終了メッセージ】 EndMsg
見開き表示モードにした場合のみ、有効な設定項目です。最終ページが片面だった場合、余ってしまう次ページに表示する文言――End、Fin、終わり、つづく、等々――を指定します。HTMLも書けるので、リンクを仕込むことも可能です。
最終ページも両面の場合、この設定は使われません。
【左右ページ間余白】 CenterSpace
見開き表示モードにした場合のみ、有効な設定項目です。左右のページの間に設ける空白の幅をピクセルで指定します。
【画像の縦横サイズ】 PageHeight、PageWidth
1ページ当たりの画像の縦横のサイズです。単位はピクセル。
通常は先頭ページとなる画像ファイルからサイズを取得しますので、特に設定する必要はありません。しかし訪問者の閲覧環境によっては、画像サイズを取得できない恐れがあります。そこで煩雑ではありますが、ここで画像サイズと同じ値を設定しておくことで、多少問題のある環境でも正常なレイアウトで表示できるよう配慮しています。
JavaScriptをご存じのかた向けにもう少し詳しい説明をしますと、画像はImageオブジェクトを使うのではなく、テーブルセルの背景として設定することで表示しています。CSSに対応してさえいれば、Imageオブジェクトのsrcへの設定が反映されないなど、不具合のある環境でも動作するからです。ただしそのためにはテーブルセルのサイズを自前で漫画画像サイズにフィットさせる必要がありますから、Imageからサイズを取得できなかった場合、当項目の値を使用するようにしています。
なお、すべての漫画画像は同じサイズでなければなりません。正確には、同じサイズにしないと表示の際に端が切れたり、逆に余白ができたりします。逆に言うと基準となる先頭ページ用の画像さえ充分な大きさなら、ページごとに多少サイズが異なってもレイアウトが崩れる心配はありません。
【サイドバー用の記号】 NextArrow、PrevArrow
NEXT/PREVサイドバー用の矢印記号です。
【ナビゲーションボタンのラベル】 NaviButtonLabel
ナビゲーションボタン用のラベルです。画面に表示されている順、つまりLAST→TOPの順で指定します。

setting.js - 設定後の動作確認(Windowsの場合)

 setting.js自体、JavaScriptファイルですので、プログラム的に正しい書き方をしている必要があります。
 と言っても「プログラム的に正しい書き方」かどうかの確認は簡単。setting.jsをダブルクリックしてみて「何も起きなければOK」です。もしエラーダイアログが表示された場合は、その内容にそって修正する必要があります。

初期表示ページを変える

 漫画表示用HTMLファイルを開いたとき、通常は先頭ページから表示されます。もし途中ページから表示させたい場合は、漫画表示用HTMLファイル末尾にリクエストパラメータを付加することで変更可能です。
 たとえば10ページ目を表示したい場合は、URL末尾に ?p=10 を付加します。

http://example.jp/manga1/index.html?p=10

 ある程度以上の長さの漫画を連載している場合、リクエストパラメータなしのURLで「最初から読む」、リクエストパラメータつきのURLで「最新更新ぶんを読む」という二種のリンクを用意すると親切かもしれません。