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

閱讀時間約 8 分鐘
2-2  Blogger做自適應文章目錄列表-01

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}
2-2  Blogger做自適應文章目錄列表-02

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

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

.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}
2-2  Blogger做自適應文章目錄列表-03

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

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

.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;}
2-2  Blogger做自適應文章目錄列表-04

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

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

<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}
avatar-img
7會員
44內容數
分享個人創作。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
NoEnd│莫盡 的其他內容
寫作Blogger和一般Blogger最大的不同,就是有無上、下章和回目錄的按鈕了。又由於是個人創作的部落格,不可能會有專屬手機APP,這些按鈕最好是能夠,自動調節成合適的大小。 那麼會不會很難呢?其實並不難,一樣是編輯CSS就能辦到,這次會利用到的,還有無序清單元素的<li>。但要先說明的是
不知道你會不會,在寫作到一半時,對於必須重複打的字詞,感到生厭,甚至連剪下、貼上都懶。這時你就非常的需要,Quick Text Paste幫你快速作業。簡單說明,即利用其建立快速鍵,而能快速貼上字詞。 Quick Text Paste是由Software OK.com(直接連官網)免費提供,該
最開始真的只是,想用語音來校稿,但有了音檔,就想可順手放上YouTube,最好還能放張圖片。一個、二個檔的時候,倒也還好,但當檔案多的時候,就又想,難道沒有批次處理的工具嗎?未曾想,還真有,而且簡單到讓人嘖嘖稱奇,忍不住想讓更多人知道。 這個工具就是FFmpeg(直接連官網)。首先你可到官網,
大家寫文章時,都是用什麼「語言」存檔案呢?應該有不少人和我一樣,是用中文吧!可若偏偏遇上一個,不認「中文」的程式,也只能更名了!可難道一個個改?但為這去買或裝個軟體,好像又太過了,沒事誰又需要批量更名。 這時你就需要Rename Master(直接連官網),到了網頁,你可看見它大大提示著Freew
每個人的寫作習慣不一樣,我的習慣是每章分開存檔,除了方便查看外,檔案間也不會互相影響。另外就是,發佈文章時,能夠快速的生成章節目錄,方便快速的進行作業。 而要做到這點,也非常的容易,只要打開記事本,輸入六字符(只佔兩個中文字),並自訂檔名,最後於存檔前,將副檔名 .txt 改為 .bat 檔,
因為沒有安裝其他的語音套件,所以Balabolka就只有很簡單二種語音引擎,那麼要如何新增語音套件呢?其實很簡單,只要到設定裡的時間與語言/語音/管理語音,就能新增語音。 選擇自己需要的語音套件進行安裝。譬如原本只有繁體中文(台灣),此次,我新增了二種語音套件,分別是中文(簡體,中國)以及英文
寫作Blogger和一般Blogger最大的不同,就是有無上、下章和回目錄的按鈕了。又由於是個人創作的部落格,不可能會有專屬手機APP,這些按鈕最好是能夠,自動調節成合適的大小。 那麼會不會很難呢?其實並不難,一樣是編輯CSS就能辦到,這次會利用到的,還有無序清單元素的<li>。但要先說明的是
不知道你會不會,在寫作到一半時,對於必須重複打的字詞,感到生厭,甚至連剪下、貼上都懶。這時你就非常的需要,Quick Text Paste幫你快速作業。簡單說明,即利用其建立快速鍵,而能快速貼上字詞。 Quick Text Paste是由Software OK.com(直接連官網)免費提供,該
最開始真的只是,想用語音來校稿,但有了音檔,就想可順手放上YouTube,最好還能放張圖片。一個、二個檔的時候,倒也還好,但當檔案多的時候,就又想,難道沒有批次處理的工具嗎?未曾想,還真有,而且簡單到讓人嘖嘖稱奇,忍不住想讓更多人知道。 這個工具就是FFmpeg(直接連官網)。首先你可到官網,
大家寫文章時,都是用什麼「語言」存檔案呢?應該有不少人和我一樣,是用中文吧!可若偏偏遇上一個,不認「中文」的程式,也只能更名了!可難道一個個改?但為這去買或裝個軟體,好像又太過了,沒事誰又需要批量更名。 這時你就需要Rename Master(直接連官網),到了網頁,你可看見它大大提示著Freew
每個人的寫作習慣不一樣,我的習慣是每章分開存檔,除了方便查看外,檔案間也不會互相影響。另外就是,發佈文章時,能夠快速的生成章節目錄,方便快速的進行作業。 而要做到這點,也非常的容易,只要打開記事本,輸入六字符(只佔兩個中文字),並自訂檔名,最後於存檔前,將副檔名 .txt 改為 .bat 檔,
因為沒有安裝其他的語音套件,所以Balabolka就只有很簡單二種語音引擎,那麼要如何新增語音套件呢?其實很簡單,只要到設定裡的時間與語言/語音/管理語音,就能新增語音。 選擇自己需要的語音套件進行安裝。譬如原本只有繁體中文(台灣),此次,我新增了二種語音套件,分別是中文(簡體,中國)以及英文
你可能也想看
Google News 追蹤
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
美股因多家熱門話題與龍頭企業市值快速增長受到關注,本文介紹如何透過國泰世華CUBE App 開設台股及美股複委託帳戶、定期理財的便利性。 定期投資適合單筆資金有限、經驗不多的理財小白、上班族,或者忙碌、沒時間研究基本面的朋友,國泰世華CUBE App美股定額投資功能,操作便利性幾乎完勝海外券商。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
  崔沄希不知道該怎麼回應,索性帶開話題,「你不是去準備早餐了嗎?幹嘛進來啦!」   「我想問崔組長今天要吃太陽蛋還是歐姆蛋?要不要加番茄醬?」鄭宇炫又換上小奶狗撒嬌的傻笑,接著眼神不自主地往下漂移,停在她胸前。   崔沄希順著他的目光往下看,發現自己穿著T恤的胸口已經一片濕透,呈半透明狀,若隱
Thumbnail
Blogger 搬家工具敲碗推出! vocus 專注於建立多樣性內容、互動性強的社群(Community)環境,為了讓來自各創作領域的創作者經營多平台, vocus 產品團隊致力於推出更多類型的搬家工具,讓你 0 費力搬家,享受更多流量紅利!
Thumbnail
如你曾閱讀過多系列的文章,大概能夠知道,我並非網頁設計的專業人員,只是知道有免費的Blogger樣版,覺得版面還滿漂亮,試著修改一下,而且剛好很合適做寫作Blogger。 本以為最困難的,莫過不同於專業的小說網站,不能自動連結上、下章節,以及自動產生目錄的功能。但這都能靠對『寫作的熱情』克服,
Thumbnail
最初會想加入這個功能,主要是因為自己(當初還沒想弄寫作Blogger),因為找資料的過程中,雖然記得將出處加入頁籤,但不知為何(搞錯?),卻和要用的資料對不上,為此著實苦惱了好一陣子。偶然在某次搜集資訊,將資料貼上後,竟然貼心的附上原文網址,當下直覺太讚了,故而研究了一番。 改替成寫作Blogge
Thumbnail
夢見我們住在湖邊,然後有兩個小水漥,可以讓小孩在夏天的時候玩水,旁邊剛好有個類似木盒的東西,可以浮起來,剛好可以給小孩坐在上面玩,裡面有個橫桿,小孩可以坐一邊,另一邊大人可以幫忙用腳踩,就會有搖籃的那種感覺,夢境中坐的小孩是喬喬,原本是媽媽在幫她搖,後來媽媽有事情,就叫我幫她搖,我搖得太
2-2-自學三阿布(劉峻豪) 一、經 歷 1.從科青到文青 2.遠赴非洲行醫 3.主治科別的選擇 P205-2 二、趣聞軼事 1.啊不,阿布 (改寫自「大貓醫生……想飛」部落格) 2.一把大火讓圖書絕版 三、寫作理念與作品特色 1.創作底蘊來自於鍛鍊 2.作品特色
2-2-自學二羅家倫 一、生 平 1.書香之家,母親啟蒙 2.愛國青年,志向不凡 P193-2 3.留學七年,識見卓越 二、趣聞軼事 1.不被埋沒的人才 2.師生嗆聲 辜鴻銘氣得臉色發青,愣了幾分鐘後,他站起來敲著講桌說:「當年我連袁世凱都不怕,我還怕你?」 3.大鼻子校長 4.才子佳人
2-2-自學一羅貫中 羅貫中,名本,號湖海散(ㄙㄢˇ)人,元末明初東原(今山東省 泰安市 東平縣)人,生卒年不詳。他把宋、元以來說書人和通俗文學家所編寫的三國故事加以整理,改寫成《三國志通俗演義》(簡稱《三國演義》)。另著有《隋唐志傳》、《殘唐五代史演義》等。 說書人:以講史或演說故事為業的人。
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
美股因多家熱門話題與龍頭企業市值快速增長受到關注,本文介紹如何透過國泰世華CUBE App 開設台股及美股複委託帳戶、定期理財的便利性。 定期投資適合單筆資金有限、經驗不多的理財小白、上班族,或者忙碌、沒時間研究基本面的朋友,國泰世華CUBE App美股定額投資功能,操作便利性幾乎完勝海外券商。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
  崔沄希不知道該怎麼回應,索性帶開話題,「你不是去準備早餐了嗎?幹嘛進來啦!」   「我想問崔組長今天要吃太陽蛋還是歐姆蛋?要不要加番茄醬?」鄭宇炫又換上小奶狗撒嬌的傻笑,接著眼神不自主地往下漂移,停在她胸前。   崔沄希順著他的目光往下看,發現自己穿著T恤的胸口已經一片濕透,呈半透明狀,若隱
Thumbnail
Blogger 搬家工具敲碗推出! vocus 專注於建立多樣性內容、互動性強的社群(Community)環境,為了讓來自各創作領域的創作者經營多平台, vocus 產品團隊致力於推出更多類型的搬家工具,讓你 0 費力搬家,享受更多流量紅利!
Thumbnail
如你曾閱讀過多系列的文章,大概能夠知道,我並非網頁設計的專業人員,只是知道有免費的Blogger樣版,覺得版面還滿漂亮,試著修改一下,而且剛好很合適做寫作Blogger。 本以為最困難的,莫過不同於專業的小說網站,不能自動連結上、下章節,以及自動產生目錄的功能。但這都能靠對『寫作的熱情』克服,
Thumbnail
最初會想加入這個功能,主要是因為自己(當初還沒想弄寫作Blogger),因為找資料的過程中,雖然記得將出處加入頁籤,但不知為何(搞錯?),卻和要用的資料對不上,為此著實苦惱了好一陣子。偶然在某次搜集資訊,將資料貼上後,竟然貼心的附上原文網址,當下直覺太讚了,故而研究了一番。 改替成寫作Blogge
Thumbnail
夢見我們住在湖邊,然後有兩個小水漥,可以讓小孩在夏天的時候玩水,旁邊剛好有個類似木盒的東西,可以浮起來,剛好可以給小孩坐在上面玩,裡面有個橫桿,小孩可以坐一邊,另一邊大人可以幫忙用腳踩,就會有搖籃的那種感覺,夢境中坐的小孩是喬喬,原本是媽媽在幫她搖,後來媽媽有事情,就叫我幫她搖,我搖得太
2-2-自學三阿布(劉峻豪) 一、經 歷 1.從科青到文青 2.遠赴非洲行醫 3.主治科別的選擇 P205-2 二、趣聞軼事 1.啊不,阿布 (改寫自「大貓醫生……想飛」部落格) 2.一把大火讓圖書絕版 三、寫作理念與作品特色 1.創作底蘊來自於鍛鍊 2.作品特色
2-2-自學二羅家倫 一、生 平 1.書香之家,母親啟蒙 2.愛國青年,志向不凡 P193-2 3.留學七年,識見卓越 二、趣聞軼事 1.不被埋沒的人才 2.師生嗆聲 辜鴻銘氣得臉色發青,愣了幾分鐘後,他站起來敲著講桌說:「當年我連袁世凱都不怕,我還怕你?」 3.大鼻子校長 4.才子佳人
2-2-自學一羅貫中 羅貫中,名本,號湖海散(ㄙㄢˇ)人,元末明初東原(今山東省 泰安市 東平縣)人,生卒年不詳。他把宋、元以來說書人和通俗文學家所編寫的三國故事加以整理,改寫成《三國志通俗演義》(簡稱《三國演義》)。另著有《隋唐志傳》、《殘唐五代史演義》等。 說書人:以講史或演說故事為業的人。