2-2 Blogger做自適應文章目錄列表

2-2 Blogger做自適應文章目錄列表-01

在2-1已和大家介紹過，上、下章和回目錄的按鈕，寫作Blogger和一般Blogger另一個不同，大概就是目錄。同樣由於是個人創作的部落格，不可能會有專屬手機APP，目錄最好也是能夠，自動調節成合適的大小。

同樣是編輯CSS和利用無序清單元素的<li>就能辦到，而且語法也相差不大。同樣要先說明的是，我套用的Blogger版型，原本就是響應式（自適應），會隨螢幕的大小，進行網頁寬度的調節，所以不適用非響應式的版型。

未避免沒看過上一章的人不知道。同樣提示CSS（樣式）擺放位置，一般會放置在]]></b:skin>或</style>之前。進入到Blogger後台／主題／自訂／編輯HTML，進到裡面後，點進html內文，可利用Ctrl＋F進行搜尋。

那麼就開始來做目錄列表，一樣從框架設定開始，如下圖：

.ac-page { border: 1px solid #1895a3; border-right: 2px solid #1895a3; margin: 20px 0; overflow:hidden; background:#85cbcc}

根據我的部落格內文的寬度，我設置成五欄位式的列表，你可依所需調整，如下圖：

.ac-page li.item001, .ac-page li.item002, .ac-page li.item003, .ac-page li.item004, .ac-page li.item005 { height:35px; margin:0px -2px 0px 0px; float: left;  border:1px solid #1895a3; background:#85cbcc;}
.ac-page li.item005 { border-right :0px}

最後設定表列、文字、滑鼠滑過的樣式，如下圖：

.ac-page li { width: 20%; display: inline; float: left; text-align: left; font-size: 15px; overflow:hidden}
.ac-page li a { position: relative; display: block; padding: 3px 7px 3px; color:#444443}
.ac-page li a:hover { color: #ffffff; background:#1895a3;}

最後只要於文章內，置入以下代碼即完成，是不是和按鈕製作，同樣簡單容易。

<div class="ac-page">
    <li class="item001"><a href="章節網址">第00章</a></li>
    <li class="item002"><a href="章節網址">第01章</a></li>
    <li class="item003"><a href="章節網址">第02章</a></li>
    <li class="item004"><a href="章節網址">第03章</a></li>
    <li class="item005"><a href="章節網址">第04章</a></li>

    <li class="item001"><a href="章節網址">第05章</a></li>
    <li class="item002"><a href="章節網址">第06章</a></li>
    <li class="item003"><a href="章節網址">第07章</a></li>
    <li class="item004"><a href="章節網址">第08章</a></li>
    <li class="item005"><a href="章節網址">第09章</a></li>
    
    <li class="item001"><a href="章節網址">第10章</a></li>
    <li class="item002"><a href="章節網址">第11章</a></li>
    <li class="item003"><a href="章節網址">第12章</a></li>
    <li class="item004"><a href="章節網址">第13章</a></li>
    <li class="item005"><a href="章節網址">第14章</a></li>
</div>

因為Blogger的『網頁』的數量有限制，考慮到長期使用的情況，把目錄也用『文章』來設計，所以有一些限制，比如：倒序、條列等變化方式，不太能順利轉換（不過也可能是和我非專業有關）。未來較有時間時，會再多加研究，讓其更具功能性。

全部的CSS代碼：

.ac-page { border: 1px solid #1895a3; border-right: 2px solid #1895a3; margin: 20px 0; overflow:hidden; background:#85cbcc;}
.ac-page li.item001, .ac-page li.item002, .ac-page li.item003, .ac-page li.item004, .ac-page li.item005 { height:35px; margin:0px -2px 0px 0px; float: left;  border:1px solid #1895a3; background:#85cbcc}
.ac-page li.item005 { border-right :0px}
.ac-page li { width: 20%; display: inline; float: left; text-align: left; font-size: 15px; overflow:hidden}
.ac-page li a { position: relative; display: block; padding: 3px 7px 3px; color:#444443}
.ac-page li a:hover { color: #ffffff; background:#1895a3}