今回は、WEB拍手でリクエストをいただきまして…鉄は熱いうちに打てということで、
WEBマンガ用ビューア「なんかいい感じのマンガビューア」について解説します。
色々と至らない部分もあると思いますが、少しでも設置したい方のお力になれれば幸いです。
ただ、めっちゃくちゃ長くなってしまったので、ページを分けています。
- 1P目:機能とファイルの紹介
- 2P目:各ファイルの設定方法
- 3P目:ファイルのアップロード
- 4P目:陥りがちなミス&最後ページカスタマイズ
- 5P目:私の作品掲載の方法(WPとのリンク)&代替WPプラグイン&まとめ
見たいところが決まっている方は上記番号を参考にページに飛んでいただいて、
どんな内容を書いているのか細かく知りたい方は、下の目次をチェックしていただけたらと思います。
「なんかいい感じのマンガビューア」とは?
「なんかいい感じのマンガビューア」とは、宮幻ハツ様が開発された、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つずつ簡単にどんなファイルかを説明していきます。
説明はいらん!という方は次に飛んでね。
comi_style.css
「css」という拡張子の通り、マンガビューアの見た目に関する項目を設定しています。
いわゆる「スタイルシート」と呼ばれるものです。
メモ帳でファイルを開くとどのような設定がなされているのかわかりやすく書かれていますが、必要な場合以外はいじる必要はありません。
comic.js
ビューア自体の動作に関する設定ファイルです。
こちらもJavascriptに詳しく、自分で何かしらの動作を変えたいなどの考えがあるなら別ですが、基本は触らなくてOK。
「images」フォルダ
ビューアに表示される画像(ヘルプ画像やページ送りなど)が入っています。
こちらも特別カスタマイズする必要はないかと思いますので、そのままにしておきましょう。
「Comic」フォルダ
ここからカスタマイズする必要が出てくるゾーンです。
「Comic」フォルダは、作品1個につき1つ必要になるフォルダです。
例えば「山田くん」と「花子さん」という2つのマンガがある場合、「Comic」フォルダをコピーし、「山田くん」と「花子さん」のフォルダを作成すればいいわけです。
元フォルダは念の為に残しておくと安心です。

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

index.html
重要ファイル!
マンガビューアを表示させるためのhtmlファイルです。
このファイルはマンガビューアを正しく作動させるための大事なファイルなので、しっかり見ながら設定していきましょう。
詳しくは、次項「各ファイルの設定」にて解説します。