「なんかいい感じのマンガビューア」をサイトに設置する方法と陥りがちなポイントを解説するよ

今回は、WEB拍手でリクエストをいただきまして…鉄は熱いうちに打てということで、
WEBマンガ用ビューア「なんかいい感じのマンガビューア」について解説します。

色々と至らない部分もあると思いますが、少しでも設置したい方のお力になれれば幸いです。

ただ、めっちゃくちゃ長くなってしまったので、ページを分けています。

見たいところが決まっている方は上記番号を参考にページに飛んでいただいて、
どんな内容を書いているのか細かく知りたい方は、下の目次をチェックしていただけたらと思います。

クリックで目次表示（長いので注意！）

「なんかいい感じのマンガビューア」とは？

「なんかいい感じのマンガビューア」とは、宮幻ハツ様が開発された、WEB上で快適に見開きマンガを閲覧するためのビューアーです。

PCなどの大きな画面では見開き、スマホでは1Pずつ、快適にスクロールしてマンガが読める！

無料でダウンロードできますので、興味がある方はぜひ公式サイトからダウンロードしてみてください。
解説も記載されています。
（2025年10月現在このページのみ公開中で、作者様の個人サイトはメンテナンス中のようです）

このビューアを利用するためには、自身でFTPソフトやサーバーが提供しているファイルマネージャーなどを利用し、自身でファイルをアップできる環境なら誰でも利用できます。

ただし、Fc2やWordpressの無料プランなどでは利用できない可能性がありますので、その点はご注意ください。

私は自身でサーバーをレンタルし、サーバー上にアップロードすることで使用しています。

さて、「なんかいい感じのマンガビューア」をDLし解答すると、以下のファイルが生成されます。

初めに.html
「slick_custom_ver2.1」フォルダ
　∟comi_style.css　
　∟comic.js　
　∟「images」フォルダ
　∟「comic」フォルダ
　　∟連番の画像ファイル　(1～開始で任意の数を用意)　
　　∟index.html

ファイルの扱いに慣れてない方からすると「なんじゃこれは…」となるかと思いますが、1つずつ簡単にどんなファイルかを説明していきます。

説明はいらん！という方は次に飛んでね。

「css」という拡張子の通り、マンガビューアの見た目に関する項目を設定しています。

いわゆる「スタイルシート」と呼ばれるものです。

メモ帳でファイルを開くとどのような設定がなされているのかわかりやすく書かれていますが、必要な場合以外はいじる必要はありません。

ビューア自体の動作に関する設定ファイルです。

こちらもJavascriptに詳しく、自分で何かしらの動作を変えたいなどの考えがあるなら別ですが、基本は触らなくてOK。

ビューアに表示される画像（ヘルプ画像やページ送りなど）が入っています。

こちらも特別カスタマイズする必要はないかと思いますので、そのままにしておきましょう。

ここからカスタマイズする必要が出てくるゾーンです。

「Comic」フォルダは、作品1個につき1つ必要になるフォルダです。

例えば「山田くん」と「花子さん」という2つのマンガがある場合、「Comic」フォルダをコピーし、「山田くん」と「花子さん」のフォルダを作成すればいいわけです。

元フォルダは念の為に残しておくと安心です。

これがマンガ本文の画像に該当します。

もともとのComicフォルダには1～4までの画像ファイルが入っていますが、それを消去して自分の入れたい画像ファイルを入れ、「1」から必要な枚数分リネームしましょう。

重要ファイル！

マンガビューアを表示させるためのhtmlファイルです。

このファイルはマンガビューアを正しく作動させるための大事なファイルなので、しっかり見ながら設定していきましょう。

詳しくは、次項「各ファイルの設定」にて解説します。