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

記事内に広告が含まれています。

【余談】私の掲載のやり方

本当に余談なのですが、拍手メッセージにて投稿ページとの兼ね合い的なお話も出ていたので、さくっとご紹介します。

私の場合はこんな手順でやってます。

  • WP(Wordpress)の投稿ページで作品ページを作ります。
  • 1P目の画像を掲載します。
  • 1P目の画像にビューアへのリンクを貼ります。

これだけ!1P目のレイアウトは「パターン」ブロックにし、毎回いちいち面倒なことにならないようにしています。

とはいえ、index.htmlはちょこちょこ編集します。

例としてこのページを出しますね。

このページのアドレスはWPの投稿ページなので「https://maronica.work/takamagahara_09/」です。

1枚目画像にビューアである「https://maronica.work/comics/takamagahara/09/index.html」を貼っている形です。

で、この「09」は「作品フォルダ」に該当するので、マンガの画像とindex.htmlが入っています。

このindex.htmlで変更している場所はここ。

ページ数は画像の枚数。拡張子はこの時pngだったので。
サイトのURLは「サイトに戻る」の行き先。トップページでもいいのですが、私は作品ページに戻したいので、WPの投稿ページのアドレスを記載しています。

あとは別に変更することはそうそうないので初期のまま。

あとはフリースペースより下のこの箇所。

上記画像の中に<!–最終ページにボタンを追加する場合は以下をコメントアウト解除して編集–>とあるように、初期では画像2行目(改行マークのみ入っているところ)に「<!–」、7行目、</p>と<p>の間の改行マークのみ入っているところに「–!>」が入っています。

この<!– –!>で囲まれていると「コメントアウト」といい、表示されない、コードとして認識されないようになっているんです。

ここを消去することで始めて「次の話へ/前の話へ」ボタンが現れます。

このボタンを使うときに注意すべきは、「href=」以降。きちんとリンクを貼ってあげないと機能しません。

私はWPの投稿ページのリンクを貼り、ビューア内で移動ではなく、投稿ページを一度見ていたくようにしています。このへんは個人の好みだと思います!

連載作品でやりがちなミス&気をつけていること

私がよくやりがちなミスは

  • 画像リネーム忘れ/数字ミス
  • index修正ミス

です!まあそれ以外は普通に動くというか、1のミスさえしなければ問題はないんですけど…。

index修正ミスは単純に戻るページ(Var site)をコピー元のページにしたままだったり、次の話/前の話のURLを間違えてたりって感じですね。

あと、ページ数が決まっている作品ならいいんですが、違う場合はページ数もしっかり変えておくとかかな。

【別案】難しい!ときはWPプラグインで妥協も視野に

ここまで書いておいてなんですが、「いや難しい…」って場合もあると思います。

そのときは、見開きではなく1Pずつのページ送り形式にはなってしまうものの、Wordpressプラグインで可能です。

「FooGallery」というプラグインで、超有名なので名前だけは知っているという方も多いかと思います。

Responsive Photo Gallery Plugin – FooGallery
Photo gallery plugin for WordPress — responsive image galleries with lightbox, masonry, justified grid, carousel, albums...

インストール方法など詳しい内容は割愛しますが、無料版でも十分使えます。
このプラグインについては解説記事もたくさんあるので、ぜひ有用な解説を参考にしてください!

設定をこのようにすることで

こんな感じで簡単にマンガ(1P単位)が表示できます。

この記事で実際の動作が確認できますので、気になる方はどうぞ。

私は昔マンガをこれで表示させてたんですが、「いい感じのマンガビューア」に乗り換えた形です。

おわりに

…ということで、かなりの駆け足だったと思いますが、応用より基本!という感じでまとめてみました。

少しでもどなたかの参考になれば幸いです。

また、この記事を読んで「ここはわからないんだけど…」ということがあれば、遠慮なくページ下部のWEB拍手からメッセージをいただけましたら、わかる限り解答いたします!

また、ざーっと一気に書いたので、誤字脱字などあるかと思いますが、その際もお知らせいただけたらと思います。

それでは、よきWEBマンガライフを!

創作メモ

    拍手していただきありがとうございます!
    とっても励みになります。
    お礼イラストは下のリンクよりどうぞ!

    拍手お礼ページ



    お名前

    メッセージ

    RSS購読(オレンジアイコン)すると、サイト更新がすぐわかります!
    タイトルとURLをコピーしました