既刊情報に漫画ビューアを導入するまで(備忘録)

既刊再録などの長編漫画を掲載するとき、ギャラリーに全部並べていくととんでもない量になってしまう……Wordpressでも導入できるいい感じのビューアないかな…という時に出会ったこちらのビューアスクリプト。

なんかいい感じのマンガビューア~slick-custom~
https://guardian.bona.jp/st/cv/

・最低限の編集でOK
・複数枚の画像を自動で連番表示
・PCの大きな画面では見開き表示、スマホの小さな画面では単ページ表示に自動で切り替わるレスポンシブ仕様
……と便利な仕様がモリモリで、本当に便利でありがたいスクリプトです…!無料で使わせていただいていいクオリティではない…すごすぎる…

ただ、自分がお借りしているWitchserverは少々特殊なサーバーらしく、専門家の力をお借りしてようやく導入できたので忘れないうちに残しておきます。

【wordpress上の準備】

① WordPressで固定ページを作成。(当サイトではbooks
② 漫画の表紙画像を並べる。

【ローカル上の準備】

① ビューア(Zipファイル「slick_custom_ver2.1(現在)」)をダウンロードする。
② Zipファイルを解凍し、デスクトップなどに保存。好きなフォルダ名に変更。
※Wordpressのディレクトリと干渉しないよう、既存に無いディレクトリ名を付けること(ここではcomicsとする)
③ comics内の「comic」フォルダの名称を好きなものに変更(ここではcomics001とする)
④ comics001に画像を入れ、画像に1、2、3……と連番で名前を付ける。
⑤ comics001内のindex.htmlテキストエディタで開く。
※自分はTerapadを使用してるけど何でもOK。ダウンロードしてデスクトップに保存しておくと便利。
⑥ 以下のテキストを修正。

/** 入力ここから **/
var page = 4; //ページ数 ←掲載したいページ数(例:10Pの漫画なら「10」と)入力
var imgtype = “png”; //画像の拡張子 ←jpegかpng
var title = “タイトル名”; //タイトル名 ←作品名
var site = “   ”; //サイトのURL ←ビューアの「サイトへ戻る」で戻りたいページを入力
var copy = “作者名”; //作者名 ←作者名
var display = 0; //左ページ始まりは「0」、右ページ始まりは「1」 ←0か1どちらかを選択
/* *ここまで **/

【FFFTP上での設定】

FFFTPをダウンロード。
※FTPソフトなら何でもOK。
⑧FFFTPを起動し、接続>新規ホストでホストの設定をして接続する。
ホストの設定名:適当でOK
ホスト名:witchserverパネルホーム「ドメイン設定」に記載のドメイン名を入力
ユーザー名:witchserverパネルホーム「FTP設定」に記載のユーザー名を入力
パスワード:witchserverパネルホーム「FTP設定」に記載のパスワードを入力
※FTP設定でユーザーを追加してない場合は追加しておく。パスを忘れずに!
⑨ comicsフォルダを丸ごとFTPでアップロード。
※アップロード先は必ず「/public_html/wordpress/wp-content/uploads」内にすること。
(サイトURL)/wp-content/uploads/comics/comic001/で、ビューアが問題なく開くかどうか確認。

【wordpress上】

⑪ ①~②で作成した固定ページ内の表紙画像に⑩のURL((サイトURL)/wp-content/uploads/comics/comic001/)を紐づけて完成。
※画像クリックで「編集」ボタンが出る。
画像詳細>表示設定>リンク先「カスタムURL」>⑩のURLを入力。

これで、画像クリックでビューアが開くようになります!
2回目からはcomics内にcomic002フォルダを作成し、comic001同様に作業していくだけ。FTP上では「/public_html/wordpress/wp-content/uploads/comics」内にcomic002をアップロードすればOK。

【ビューア導入にあたっての注意点】

■当サイトで使用しているwitchserverは少々特殊なサーバー。
→Wordpressをインストールすると、他のディレクトリにロックがかかり、アクセスできなくなる仕様となっているらしい。
(※サーバー側でディレクトリをドメインネームに置換する処理が行われており、publit_html内の /wordpress ディレクトリがドメインネームに置換されているため、/wordpress以外のディレクトリが認識されなくなっているらしい)

■Wordpressをインストールしたディレクトリは有効で、アップロード先をそちらにすることで解決が可能。
WordPressの構成ディレクトリである「wp-content/uploads」に配置したらアクセスが可能に。(wp-content以下のディレクトリであれば可能)

■Witchserver以外なら、
・public_html/内にアップロード
・サイトURL/comics/comics001/へアクセスするとビューアが開く
らしい。

※本記事は、2023.02に専門家にお聞きした内容を備忘録としてメモしたものです。