以前から、サイト内で漫画をどうやってうまく表示したらいいか結構悩んでいました。
最初はWordpressのギャラリー機能を使おうとしたものの、ページのサイズを揃えられなかったり見やすく表示できなかったりしたため断念。他にもギャラリー系のプラグインをいくつか試しましたが、思うような動作にならず諦めていました。
結局、SNSにアップしている画像を原寸のまま1枚ずつ貼り付ける、というシンプルな方法に落ち着きましたが、これも問題が。スマホならページがいい感じに縮小されて見やすくなるのですが、パソコンでは大きく表示されすぎてしまう……。
こういうとき、コードの書ける人なら対処できるのでしょうが、そこまで知識もないので、仕方なく放置していました。
いい感じのビューアを見つける
しかし、たまたま調べ物をしていたら、個人サイト向けの漫画ビューアがあるという情報を発見。早速、その中でも使いやすそうだったこちらの「なんかいい感じのマンガビューア」さんを使わせていただきました。
こちらのビューアは、サーバーに任意のファイルを置くだけで簡単に設置できる漫画用のビューアです。パソコンでもスマホでも読みやすいサイズに画像を表示してくれるレスポンシブ対応もしています。
土台にはjQuery向けのslickというプラグインを使用しているものの、特に公式サイトで配布されている以外の素材のダウンロードは必要ないとのこと。正直、私はhtmlですら怪しいくらいプログラミングの知識はないのですが、それでも問題なく設置できました。
設置の手順
設置方法は公式サイトの指示どおりですが、一応書いておくとこんな感じです。
①公式サイトからフォルダをダウンロード
②公式サイトのとおりに連番の画像ファイルを用意して任意のフォルダにいれる
③公式サイトのとおりにindex.htmlを編集する
④フォルダをサーバーにアップする
若干手間取ったのが、index.htmlの「サイトのURL」の編集です。当初、マンガビューアで表示したい漫画のページのURLを書くのだと思っていたのですが、これだと「サイトへ戻る」ボタンを押してもビューアのページから出られなくなってしまう。あとから「サイトに戻る」でリンクしたいURLを書くのだと気づき、トップページのURLに書き直しました。
まるでアプリのような使い勝手
そして、実際に設置してみたのがこちらです。
なんと読みやすいのでしょう！横開きなうえに、パソコンでもスマホでもいい感じに表示されて、不要なボタンもない……。
普段、スマホアプリで漫画を読むことが結構あるのですが、まるでそういう公式アプリを使っているかのような感覚でスムーズに読めるのがとてもいいです。こんなすごい機能を無料で配布してくれるとは、制作者の方に感謝です。
準備に時間がかかるので段階的にはなりますが、今後は昔の漫画もビューアで見られるようにしていけたらいいなと思っています。やっぱり個人サイトは色々作り込めるのが楽しいですね。