色々とご丁寧に教えて下さりありがとうございます！

自分で弄ってもみたのですがどんどんおかしな感じになってしまいまして…お二方の仰ってることが難しすぎて私の頭では理解出来ませんでした…m(__)m
なので今回は諦めようと思います(T_T)
本当にすみません。ありがとうございました…！

>>4　現在のページのみ丸囲みにできる？
→できます。

ただ>>5さんの仰るとおり、そのデザインにするには>>3のCSSより大幅な書き換えが必要です。

なのでもし可能でしたら、
#現在のCSSを書き込んでください。

デザイン関係で問題が起きたときは、現状のCSSを書き込んだ方が、
読んだ人も「ここをこうすればいいな」と問題点等が分かりやすいのでお勧めです。

>>4
#現在のページのみ円で囲む

それなら
.pagination{〜〜}.pagination a{〜〜}
では何も指定せず
.active{〜〜}でデザインを作っていくことになります。
というのも
> <li><span class="active">3</span></li>
の部分が現在のページを表示している場合のソースなので


そこで必要なのは<span>で円をつくるときはinline-block化をすることです。
というのも<span>の初期値は「display: inline;」となっており、
inline要素だと円を作るときに必要な横幅・縦幅の指定ができません。
そのため(.active{}は<span>タグに使われているので)書き忘れると丸がつくれない！ということが発生します。

>>3

とても丁寧に教えて下さりありがとうございます！

現在、写真1枚目の状態までもってきました。
リンクを貼って下さった写真2枚目のように◯で現在ページの数字のみを囲いたいのですが、可能でしょうか？
リンク先を全て飛んでみましたが難しすぎて苦戦中です…。お手数おかけしますがよろしくお願い致しますm(__)m

>>1
パンくずとあんまし変わらないのでは？って思ったので
お手軽に『inline-block』で作ってみたけど
コレジャナイ感が半端ないのであくまで参考に
多分こういうアプローチで合ってると思うけど
横幅によってはぎっちぎちになったり広くなったりするんだろうから
もしかしたら別かもしれないです。無責任で申し訳ない…

/*-----------------------------------------------*/
【HTML】
##pagination##

【CSS】>
a{text-decoration:none;}
ul{text-align: center;
list-style: none;}
ul li{display: inline-block;　　/*　ulタグとliタグをinline-block化　*/
}

.pagination{　　/*<ul class="pagination">の部分*/
background: #059edc;
}
.pagination a{　　/*　<li><a></a></li>　*/
padding:10px;
color:#333;
background:#fff;
border:solid 3px #FF0000;
border-radius:.5em;
margin-left:5px;
}
.pagination a:hover{
padding:10px;
color:#fff;
background:#a0d7f5;
}

.active{　　/*　 <li><span class="active">3</span></li>　*/
font-weight:bold;
color:#fff;
background: #FF0000;
padding:10px;
border:solid 3px #FF0000;
border-radius:.5em;
margin-left:5px;
}
</style>
/*-----------------------------------------------*/

以下は自分用メモ
・フォント次第ではうまくいく？
　→等幅フォント？
・marginで無理やり左側に空間をつくる
　→.pagination a{}/.active{}
　　　　margin-left:5px;
・float
　→横並びにはなるけれど表示が×
・block
　→width×height×

>>1

お返事ありがとうございます！
ちょっと遅くなりますが夜にやってみますm(__)m

ページネーションは、各小説から[ページネーション設定]をクリック

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

##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』のデザイン*/}


●リスト/横並び

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

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