ページ番号を振って、番号をクリックするとそのページに飛ぶ。というものを作ってみようと思います～
ページめくりタイプ用と、縦スクロールタイプ用の２タイプ作ります。
ページめくりタイプのページ番号
↓こんな感じのページ番号を漫画下にふっていきます。
全体図は、こんな感じ
htmlに、番号を記述して
<ol>
<li><a href="２ページ目の場所">2</a></li>
<li><a href="３ページ目の場所">3</a></li>
</ol>
cssで装飾
ol {
list-style: none;
display: flex;
width: 200px;
}
ol li {
margin: 10px;
padding: 5px 15px;
background: #000;
color: #fff;
border-radius: 50%;
}これで、ページ番号の完成です。
黒丸の色を変えたい場合は、background: #000;の、「＃000」を打ち換えればOKです。
白文字の色を変えたい場合は、color: #fff;の「#fff」を打ち換えてください。
↓丸を白（#fff）文字を黒（＃000）にしたら、こんな感じ。
丸じゃなくて四角にしたい場合は、border-radius: 50%;を削除。
↓四角にしたら、こんな感じ。
自分のセンスに合わせて、作っていってください♡
縦スクロールタイプのページ番号
正直、縦スクロールタイプだと存在価値があまりなさそう。
ページ番号をクリックするより、すわ～っとスクロールした方が早くないかね？
まあいいか。
最初に、漫画画像に名前を付けます。
<p id="好きな名前">
<img src="画像の場所" alt="画像の説明" >
</p>
次に、htmlに番号を記述。先ほどとリンク方法が違います。
<ol>
<li><a href="#１ページ目の名前">1</a></li>
<li><a href="#２ページ目の名前">2</a></li>
<li><a href="#３ページ目の名前">3</a></li>
</ol>
頭に＃を付けて、画像に付けた名前を記述。そうすればそのページの位置にジャンプします。
まとめ
うーん。
縦スクロールタイプのページ番号は、誤タップで最終ページに飛んでしまいネタバレ事故を起こしそう…。
個人的には縦スクロールタイプにページ番号はいらないと思う。。
ただ、私のポンコツセンスでは必要性を見いだせないだけで、活用方法があるかも知れないので色々作ってみてください～
ちょっと頑張ってjQueryを導入したら、するする～っとリンク先にスクロールさせる事もできます。
あと、私の経験談で申し訳ないですが
私、ページ番号をふらないホームページを作っていました。ページめくりタイプで。
１話に一体、何ページ存在するか分からない。１ページ前か先にしか行けない。という不親切設計でした。
人に読んでもらう。という意識が乏しかったんですよね…。
「ページ番号あった方がいいよー」と指摘をいただいてから設置しました。
ページめくりタイプには、ページ番号は必須だと今は思っています。
趣味漫画といえ、ユーザビリティは大事！
おまけ
なんかグダグダで、すみません(;´Д｀)
一応、使ったタグの説明入れときます。知りたいひとだけ読んでください。
「ol」…順番の付いたリストを囲うタグ。今回は、１ページから３ページまでと順序のあるものをリスト化したのでこっちを使いました。同じくリストを囲う「ul」は順序を問わないリスト。
「li」…リスト。
「 list-style: none; 」…olで囲うと、デフォルトで頭に数字を振られるので、それを消す指定。
「 display: flex; 」…横並びにする。
「 width: 200px; 」…横幅を200pxにする。これは自分のホームページデザインに合わせて数字を調整してください。
「 margin: 10px; 」…数字と数字のすき間を10pxにする指定。詰めたかったら数字を少なく、広げたかったら数字を大きくしてください。
「 padding: 5px 15px; 」…数字の背景色の大きさ調整（正確には語弊があるんだけど、今回の使い道としての意味はコレ）
「border-radius: 50%;」…カドマル。数字を減らすとカクカク四角に戻っていく。50％で、丸。
「id=”好きな名前”」…唯一無二の名前。class=”好きな名前”はグループ名的な位置。idは個人名。ページ内リンクをはる場合、唯一無二の相手先へ飛んでいく必要があるため、idでの名付けが必要。
「＃idで付けた名前」…idで付けた名前を使う場合、頭に＃を付けます。記述が反映されない原因で多いのが、この＃漏れ。
全然意味わかんなーい( ;∀;)ってなったら、丸々同じ記述して自分のホームページに合わせて調整していけば何とかなる！きっと！
コメント