各ファイルの設定
この項目では、マンガビューアを実際にWEB上で使えるようにするために必要な設定について解説していきます。
とはいえ、しっかり設定すべきファイルは「index.html」のみなので、そんなに怖いことはありません。
Comicファイル
こちらは、同名のファイルだとフォルダの中身が上書きされてしまうため、作品ごとに別の名前にリネームするのが必須と言えます。
ファイル名はWEB上にアップロードするので「横文字（英数字）」にしましょう。
先程の例ですと「Yamadakun」「Hanakosan」にすればOK。
このフォルダ名はWEB上のアドレスにもなります。
https://ほにゃらら/Yamadakun/ のようにアドレスバーに表示されますので、あまり変な名前にはしないほうがいいかも…。
画像ファイル
これはシンプルで、1P目は「1」、2P目は「2」…とシンプルにリネームすればOKです。2桁は10、11…と、特に考える必要はなく、サクっとやっちゃいましょう。
ただ、画像ファイルの縦横サイズは同じにしておいたほうがいいと思います。
私はしたことがないのでなんとも言えませんが、表示にガタつきが出る、サイズが小さいものが拡大されてボヤけて見えてしまうなどのケースが考えられます。
画像サイズについてですが、公式サイトにて作者様は長辺を1500ピクセル程度にされているとのことです。
私もそのくらいのサイズにしていますが、フルHDのモニタでみてもぼやけるといったことはないので、だいたいそれくらいあれば十分かと思います。
index.html
ここが難問/課題となる方も多いのかなと思います。
まず編集する前に、「HTMLエディタ」をダウンロードすることをおすすめします。
メモ帳ですとこのように、書いてあるのは書いてあるでわかるんですが…
エディタを使うとこのように色分けされて、ぐっとファイルが見やすくなります。
私は王道の「サクラエディタ」を使っています。
今のところWin11でも機能してくれているので大丈夫…多分。不安な方は11対応の別のエディタをお探しください！
「ダブクリしたらブラウザが開いてしまうんやけど！？」という方は、右クリック→「プログラムから開く」でサクラエディタを選択してください。
一覧にない場合は「別のプログラムを開く」（画像内黄色枠）を選択し、サクラエディタを見つければOK！
さて、前置きが長くなりましたが、実際のindex.htmlの中身はこんな感じ。
基本的に編集する部分はピンク枠で囲った部分です。
画像内の各部分について、更に詳しく見ていきます。
var page =
「ページ数」との記載がある通りです。画像ファイルが何枚あるかという考え方でOKです。
var imgtype =
リネーム済みの「Comic」フォルダに入っている画像の拡張子を記載します。png、jpgなどお好みで。
私は最近webpを使っていますが、こちらも対応していました。
var title =
マンガのタイトルです。日本語（2バイト文字）OK。ビューアの上部や最後に表示されます。
var site =
最後のページの「サイトに戻る」先のURLです。
例えばマンガ一覧ページを「comic」としているなら、「https://ほにゃららら/comic」と記載すればOK。
個別の作品ページがあるならそのページのアドレスを記入しましょう。
var copy =
著者名です。
var display =
ページの始まりです。
ファイル内にも説明がありますが、左ページ始まりなら0を、右ページ始まりなら1を記載します。
大体日本ではマンガが左ページからスタートするので、初期設定でいいかなと思います。
ページ数調整とか必要なら1で！
最後ページ部分のカスタマイズ
最後のページのカスタマイズは、ファイル下部から設定します。
このピンクで囲った部分を自力で編集することになるので、CSSなどに詳しくない方にはあまりおすすめはしません！
公式サイトでも
Q:最後のページにweb拍手や告知等のコンテンツを追加したい。
A：index.htmlの
<!–フリー追加ゾーンここから–> ～ <!–フリー追加ゾーンここまで–>
の間に収まるようにコンテンツを追加してください！
との記載がありますが、それ以上は言及されていないことからも「やるなら自己責任でね！」という感じだと思います。
私の場合はここにお礼メッセージを入れています。
CSSとか使っていますが、文章だけでも全然問題ないと思います。
私がどんなCSSを使ってどういう風にやっているのかは、後の項目「【応用】フリースペースのカスタマイズ」をご覧ください。
