凍結
0 @ iPhone
『表紙に名前変換』という小説テンプレをお借りしています。
小説ページが増えてきたので、
添付した写真のようにページ下部に数字が並んだページネーションというものを使いたいのですが変更可能でしょうか?
また可能な場合はどこをどのように変更すれば良いのでしょうか?

どうぞよろしくお願い致しますm(__)m
10/01 00:05
返信
コメント投稿 検索
1 Anonymous Chrome
ページネーションは、各小説から[ページネーション設定]をクリック

  基本設定
  全体デザイン
  ├表紙画面編集
  ├目次画面編集
  ├ページリストレイアウト編集
  └文章画面編集
> □ページネーション設定
  □テンプレから探す
 └公式テンプレ

##pagination##
↑上の独自タグコピペすればページネーション自体はできます
ですがこのままだとcssは影響しておらず、縦並び、横に丸い点がついているだけで
画像のようにするには自分でCSSをデザインしなければなりません

(#独自タグを貼ると以下のソースが生成されます。)
     <div class="PageNavi">
      <ul class="pagination">
      <li><a>«</a></li>
      <li><a><</a></li>
      <li><a>1</a></li>
      <li><a>2</a></li>
      <li><span class="active">3</span></li>
      <li><a>4</a></li>
      <li><a>></a></li>
      <li><a>»</a></li>
      </ul>
     </div>

見た感じ追加で書き込みが必要なのはこのぐらい?
.PageNavi{/*divタグ ページネーション全体*/}
.pagination a{/*ulタグ A{}も必要だと思う*/}
.active{/*spanタグ 現在のページ。画像で言うところの『5』のデザイン*/}


●リスト/横並び

【習得必須】CSSでリストを横並びにする簡単な方法を徹底解説 - WEBCAMP MEDIA

Webサイトを制作する上で、リストを横並びにする場面は頻繁にあります。特にグローバルメニューを作成する場合は必須の知識です。本記事では、CSSでリストを横並びにする方法を紹介します。メニューを横並びにする方法を手順を追って解説するのでコードを打ちながら学習しましょう。

web-camp.io

●ページネーションのデザイン

↑調べた当初一番わかりやすいなと思ったサイト

デザインいろいろ。ページネーションのことを考える。 | Little Things

デザインいろいろ。ページネーションのことを考える。

littlethings.jp


10/01 09:51
返信