昨日に引き続き、スクリプトの修正の仕方を。
前回記事のzipのなかみは以下のとおりです。
CSSフォルダ・・・見開き用と1頁用の2種類。
必要に応じてサイトの雰囲気に合わせて書き換えてください。
imgフォルダ・・・ボタン用画像。そのまま使っても書き換えてもOK。
jsフォルダ・・・・見開き用と1頁用のスクリプト。
アラートの文章なんかは好みがあると思うので書き換えてください。
mangaフォルダ・・作品を入れる場所。
作品の数だけこのフォルダを複製してください。
フォルダの名前は作品名などにしても大丈夫です。
画像は適当なサイズのjpgでお願いします。
html内にかいてある450×639にすると
ファイルをいじらなくて済むので楽です。
jpgの名前はページ順にナンバリングしてください
番号の前に0をつけるのは不可です。
0頁とか、存在しない頁は白紙ページを用意して
偶数始まり奇数終わりに整えてください。
(レイアウトは崩れないと思うけど、
リンク切れの表示が出てきてしまうので)
2つのhtmlは画像を表示させるメインのページです。
見開きと1頁表示、不要であれば削除してOKです。
test2.html・・・・mangaフォルダのhtmlを呼び出すテスト用html。
manga/index.htmlを呼び出すときは普通のリンクで大丈夫ですが、
長編を定期更新していて、更新頁から表示させたいときは、
このhtmlファイルにあるように後ろに「?12」という感じで
開始頁を指定してください。
リンクのサンプルなので、最終的には不要なファイルです。
index.htmlのなかみ
書き換える場所は
・ ヘッダー内のタイトル
・ 17、18行目の作品の最初の頁と最後の頁
(用意した白紙頁を含む偶数始まり奇数終わり)
・ cssとjsのファイルを移動させた場合は、その場所を指定
・ 29〜39行目 サイト名やコンテンツメニューを表示させる場所。
・ 42と45行目。画像の縦横サイズ。サイズ指定消してもいける気がするけど、
極端にサイズが違う場合はレイアウト崩れが
生じる可能性があるのでCSSで調整してください。
・ フッターのコピーライトうんぬん。
comic.jsのなかみ
特に変更が必要な箇所はありません。
alert(“ ”);
でくくられた日本語はエラーのときに表示されるアラートなので、
お好みの文章に変えてもらって大丈夫です。
1頁表示の
index-m.html,
comic-m.css,
comic-m.js
も修正する箇所は見開きの場合と同様です。
小さいディスプレイを想定して、タイトルやメニューを省いてしまったので、
新しいウィンドウで開くとか、ホームに戻るリンクを追加するとかしないと、
閲覧者が迷子になる仕様になっています。