超超初心者向け漫画サイトのつくり方【ページ番号をふる。】

ページ番号を振って、番号をクリックするとそのページに飛ぶ。というものを作ってみようと思います~

ページめくりタイプ用と、縦スクロールタイプ用の2タイプ作ります。

ページめくりタイプのページ番号

↓こんな感じのページ番号を漫画下にふっていきます。

全体図は、こんな感じ

htmlに、番号を記述して

<ol>
    <li><a href="2ページ目の場所">2</a></li>
    <li><a href="3ページ目の場所">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ページ目の名前">1</a></li>
    <li><a href="#2ページ目の名前">2</a></li>
    <li><a href="#3ページ目の名前">3</a></li>
</ol>

頭に#を付けて、画像に付けた名前を記述。そうすればそのページの位置にジャンプします。

まとめ

うーん。

縦スクロールタイプのページ番号は、誤タップで最終ページに飛んでしまいネタバレ事故を起こしそう…。

個人的には縦スクロールタイプにページ番号はいらないと思う。。

ただ、私のポンコツセンスでは必要性を見いだせないだけで、活用方法があるかも知れないので色々作ってみてください~

ちょっと頑張ってjQueryを導入したら、するする~っとリンク先にスクロールさせる事もできます。

あと、私の経験談で申し訳ないですが

私、ページ番号をふらないホームページを作っていました。ページめくりタイプで。

1話に一体、何ページ存在するか分からない。1ページ前か先にしか行けない。という不親切設計でした。

人に読んでもらう。という意識が乏しかったんですよね…。

「ページ番号あった方がいいよー」と指摘をいただいてから設置しました。

ページめくりタイプには、ページ番号は必須だと今は思っています。

趣味漫画といえ、ユーザビリティは大事!

おまけ

なんかグダグダで、すみません(;´Д`)

一応、使ったタグの説明入れときます。知りたいひとだけ読んでください。

「ol」…順番の付いたリストを囲うタグ。今回は、1ページから3ページまでと順序のあるものをリスト化したのでこっちを使いました。同じくリストを囲う「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で付けた名前を使う場合、頭に#を付けます。記述が反映されない原因で多いのが、この#漏れ。

全然意味わかんなーい( ;∀;)ってなったら、丸々同じ記述して自分のホームページに合わせて調整していけば何とかなる!きっと!

コメント