昨日に引き続き、スクリプトの修正の仕方を。
前回記事の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
も修正する箇所は見開きの場合と同様です。
小さいディスプレイを想定して、タイトルやメニューを省いてしまったので、
新しいウィンドウで開くとか、ホームに戻るリンクを追加するとかしないと、
閲覧者が迷子になる仕様になっています。
「03.漫画用見開き閲覧スクリプト」カテゴリーアーカイブ
WEB漫画見開き閲覧用スクリプト更新しました
サイトの更新に合わせて、WEB漫画閲覧スクリプトも更新しました。
いつの間にやらHTML5とか、世界が変わってたので、
ネットを検索しながら調整してみました。
–(ここから2018.01.21追記)–
こんな感じに見開きで表示されます。
左右の画像か、下のnextやBackボタンのクリックで頁が進んだり戻ったりします。
真ん中の入力欄で指定頁にジャンプします。
–(ここまで2018.01.21追記)–
変更したところは
・外部CSS・・・書き方古いのとか見苦しいのをだいぶ減らしました。
・JSも外部にしちゃいました。
・iPadからだと最初からinputにフォーカスしてるとぐいぐいキーボードが上がってくるので、外しました。
・画面狭い人用に1頁表示のスクリプトも用意しました。
(この場合は漫画部分をクリックしても進んだり戻ったりしません)
注:動作確認は、
MacOS10.10.5 safari10.1.2
Windows7SP1 IE11
iPad Pro 10.5インチ iOS11+safari
アンドロイドとiPhoneは持ってないのでわかりません。
入力欄に数字入れた後、iPadのキーボードが引っ込んでくれません。
うかつにスクリプト書き足すと泥沼にはまりそうなので諦めました。
管理人のスクリプト能力はこの辺が限界です。
サンプルをアップしました。
WEB漫画閲覧用スクリプトのサンプル
使ってみたい方はこちらの圧縮ファイルをダウンロードしてください。
見開きスクリプト(zipファイル)
改造等はご自由にどうぞ。
管理人、久しぶりにDreamweaver触ったので、
いろいろおかしいところはあると思いますが、
笑って見逃してやってください。
修正の仕方は明日あげます。