サイトの漫画ページを、縦スクロールで読んでいく形式から見開きで読めるビューアに変更したのでソースコードなどメモ。
ビューアはこちらを拝借。MITライセンスとのことなので、カスタマイズもしてみたよ。
レスポンシブ漫画ビューア「なんかいい感じのマンガビューア～slick-custom～」
デフォルトの使い方は省略して、以下はカスタマイズした部分。
1. 目次ページを作成
描いてる漫画は長編1本しかないので、まずは漫画ページのホームとなる目次を固定ページで作成。各話ページ上部に表示されるメニューと、最後のページに表示されるページャーの「目次（サイト）に戻る」ボタンから飛べるように設定した。
2.ページャー部分を編集
デフォルトのページャーには個人的に不要と感じた情報があったのでコメントアウトで削除、「次の話へ」ボタンはもっと分かりやすくしたいなと思ったので画像を使うことに。
元々の漫画ページで使っていたデザインをほぼそのまま流用して適当に整えた。
<a href="../1b/index.html">
<div class="pagenation-cover">
<img src="../thumb/1b.png" alt=""
class="fromBlur toClor trim-cover">
<div>次の話：1/3Gの職場（後編）</div>
</div>
</a>
<p>
<input type="button" value="目次へ戻る"
class="button o_button orange button-margin">
<a class="button" href="../00/index.html">前の話へ</a>
</p>.pagenation-cover { position: relative; }
.pagenation-cover div {
position: absolute;
top: 50%;
left: 3rem;
font-size: 1.4rem;
color: #fff;
transform: translate(0%, -50%);
margin: 0;
padding: 0;
}
@media screen and (max-width:576px) {
.pagenation-cover div {
font-size: 1.2rem;
}
}
.button-margin{
margin: 20px 0;
}まず画像を貼って、その上に表示させたい文字を「position」プロパティ（「relative」＝相対位置）で画像の上に乗っかるように持ってきている。あとはマウスオンで画像のぼかしが解けて明るくなるようにしたよ。
そんで上記でできたのが下のやつ。画像ボタンは前のみたくカラー画像が良かったんだけど、中身は白黒漫画だからねー。扉絵より漫画の切り抜きのほうが続きが気になってもらえるかなと思いカラーは断念。
3. メニュー部分を編集
あとはページ上部のメニューの中身を適当に削除変更。
その他、最初に出る操作ガイドをプロローグ以外のページで非表示にしてる。多分他のビューアで慣れてるだろうし、そんな難しいものでもないのでいいかな～と。
そんな感じで移行完了。そのうちtwitterカードも入れようかな。→ 入れました（下に追記）
ところで修正前の絵を久しぶりに見たけど、記憶って美化されるものなんだなと…。
来年か再来年も今描いてる6話見て絶句したいね。
twitterカードの実装
<head>～</head>内に以下を追加で完了。
<!-- Twitterカードの設定 -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ユーザーID" />
<!-- OGPの設定 -->
<meta property="og:type" content="article" />
<meta property="og:title" content="リアルインベーダーゲーム" />
<meta property="og:description" content="プロローグ：最短6千万キロの彼方で" />
<meta property="og:url"
content="このページのurl" />
<meta property="og:site_name" content="負け犬ラプソディ" />
<meta property="og:image"
content="カードに使う画像のURl" />