【部落格CSS】製作簡單的部落格表格、描點標記

這篇整理如何在 Blogger 部落格文章中製作「快速導覽」與「描點連結」。簡單來說，就是讓讀者點擊文章上方的目錄連結後，可以直接跳到指定段落；看完內容後，也可以點「回到頂部」快速回到導覽區。

📘 部落格 CSS：製作快速導覽、描點標記與回到頂部連結

有些文章內容比較長，如果只讓讀者從頭慢慢滑到尾，閱讀體驗會比較辛苦。

這時候可以在文章前面做一個「快速導覽」，讓讀者可以直接點擊想看的分類，例如中路、上路、打野、射手、輔助，並跳到對應內容。

另外，也可以在每個內容區塊的右下角加上「回到頂部」連結，讓讀者看完某一段後可以馬上回到目錄。

上圖中用黑色方框框起來的地方，就是文章中的快速導覽連結。

🧭 這篇要完成的效果

我們要做的功能主要有兩個。

快速導覽：讀者點擊上方連結後，可以直接跳到指定內容區塊。
回到頂部：讀者看完某一段後，可以點擊連結回到文章導覽處。

核心做法其實很簡單：
用 id 設定目標位置，再用 href="#id名稱" 連到那個位置。

🔗 描點連結的基本觀念

HTML 的描點連結可以讓同一篇文章中的某個連結，跳到指定的段落。

它主要由兩個部分組成：

角色	寫法	用途
目標位置	id="mid"	設定要跳過去的位置。
導覽連結	href="#mid"	點擊後跳到指定 id 的位置。

例如：

<a href="#mid">中路（MID）</a> <h3 id="mid">中路（MID）歷年冠軍造型</h3>

當讀者點擊「中路（MID）」這個連結，就會跳到 id="mid" 的標題位置。

小提醒：屬性名稱是 href，不是 herf。
這個拼字很容易打錯，打錯的話連結就不會正常運作。

🧱 完整範例：快速導覽與內容區塊

以下是一段完整的 HTML 範例，可以放在 Blogger 的 HTML 編輯模式中。

<h2 id="champ-skins" style="font-size: 22px; margin: 0px 0px 8px;"> 英雄聯盟世界賽歷年冠軍造型總覽（S1–S14） </h2> <p style="color: #666666; margin: 0px 0px 16px;"> 整理：各路位（MID / TOP / JG / AD / SUP） </p>  <div style="background: rgb(238, 243, 247); border-radius: 8px; border: 1px solid rgb(217, 227, 234); margin: 10px 0px 16px; padding: 10px 12px;"> <strong>快速導覽：</strong> <a href="#mid" style="margin-right: 12px;">中路（MID）</a> <a href="#top" style="margin-right: 12px;">上路（TOP）</a> <a href="#jg" style="margin-right: 12px;">打野（JG）</a> <a href="#ad" style="margin-right: 12px;">射手（AD）</a> <a href="#sup">輔助（SUP）</a> </div>  <div style="background: rgb(247, 247, 247); border-radius: 8px; font-size: 15px; line-height: 1.8; padding: 14px 18px;">  <h3 id="mid" style="background: rgb(34, 34, 34); border-radius: 6px; color: white; margin-top: 0px; padding: 6px 10px;"> 中路（MID）歷年冠軍造型 </h3> <span style="color: red; font-weight: bold;">2011</span>　Fnatic　Shushei　酒桶<br /> <span style="color: red; font-weight: bold;">2012</span>　TPA　Toyz　球女<br /> <span style="color: red; font-weight: bold;">2013</span>　SKT T1　Faker　劫<br /> <span style="color: red; font-weight: bold;">2014</span>　SSW　Pawn　塔隆<br /> <span style="color: red; font-weight: bold;">2015</span>　SKT T1　Faker / Easyhoon　雷茲 / 沙皇<br /> <span style="color: red; font-weight: bold;">2016</span>　SKT T1　Faker　星朵拉<br /> <span style="color: red; font-weight: bold;">2017</span>　SSG　Crown　塔莉雅<br /> <span style="color: red; font-weight: bold;">2018</span>　iG　Rookie　勒布朗<br /> <span style="color: red; font-weight: bold;">2019</span>　FPX　Doinb　墨菲特<br /> <span style="color: red; font-weight: bold;">2020</span>　DWG　ShowMaker　逆命<br /> <span style="color: red; font-weight: bold;">2021</span>　EDG　Scout　柔依<br /> <span style="color: red; font-weight: bold;">2022</span>　DRX　Zeka　阿卡莉<br /> <span style="color: red; font-weight: bold;">2023</span>　T1　Faker　球女<br /> <span style="color: red; font-weight: bold;">2024</span>　T1　Faker　犽凝 / 賽勒斯（FMVP）<br /> <div style="margin: 6px 0px 14px; text-align: right;"> <a href="#champ-skins">回到頂部↑</a> </div> </div>

🧩 程式碼拆解說明

接著把上面的程式碼拆開來看，會更容易理解。

1. 設定文章頂部 id

<h2 id="champ-skins" style="font-size: 22px; margin: 0px 0px 8px;"> 英雄聯盟世界賽歷年冠軍造型總覽（S1–S14） </h2>

這裡的 id="champ-skins" 是「回到頂部」要連回來的位置。

後面只要寫：

點擊後就會跳回這個標題位置。

2. 製作快速導覽區塊

這段是快速導覽區塊。

background：設定淡藍灰色背景。
border-radius：設定圓角。
border：設定邊框。
margin：設定外距，讓導覽區和其他內容有距離。
padding：設定內距，讓文字不要貼著邊框。

href="#mid" 代表點擊後會前往頁面中 id="mid" 的位置。
這就是描點連結的核心。

3. 設定內容段落的 id

<h3 id="mid" style="background: rgb(34, 34, 34); border-radius: 6px; color: white; margin-top: 0px; padding: 6px 10px;"> 中路（MID）歷年冠軍造型 </h3>

這裡設定了 id="mid"。

因此前面快速導覽中的：

就會跳到這個標題。

4. 設定回到頂部連結

這段會在內容區塊右下角顯示「回到頂部↑」。

因為最上方標題設定的是：

id="champ-skins"

所以這裡用：

href="#champ-skins"

就可以回到文章上方。

🎨 常用 CSS 屬性說明

這段範例裡有幾個常見的 CSS 屬性，整理如下。

CSS 屬性	用途	範例
background	設定背景顏色。	background: rgb(238, 243, 247);
border-radius	設定圓角。	border-radius: 8px;
border	設定邊框。	border: 1px solid rgb(217, 227, 234);
margin	設定元素外部距離。	margin: 10px 0px 16px;
padding	設定元素內部距離。	padding: 10px 12px;
text-align	設定文字對齊方向。	text-align: right;

📌 id 與 href 的對應規則

描點連結最重要的是 id 和 href 必須對得起來。

導覽連結	目標區塊	說明
href="#mid"	id="mid"	跳到中路區塊。
href="#top"	id="top"	跳到上路區塊。
href="#jg"	id="jg"	跳到打野區塊。
href="#ad"	id="ad"	跳到射手區塊。
href="#sup"	id="sup"	跳到輔助區塊。
href="#champ-skins"	id="champ-skins"	回到頂部標題。

href 裡面要加 #。
例如 href="#mid"。

但 id 裡面不要加 #。
正確是 id="mid"，不是 id="#mid"。

🧪 補充：更完整的多區塊架構

如果你要做完整文章，可以把每個分類都做成同樣格式。

<h3 id="mid">中路（MID）歷年冠軍造型</h3> <p>這裡放中路內容</p> <div style="text-align: right;"><a href="#champ-skins">回到頂部↑</a></div> <h3 id="top">上路（TOP）歷年冠軍造型</h3> <p>這裡放上路內容</p> <div style="text-align: right;"><a href="#champ-skins">回到頂部↑</a></div> <h3 id="jg">打野（JG）歷年冠軍造型</h3> <p>這裡放打野內容</p> <div style="text-align: right;"><a href="#champ-skins">回到頂部↑</a></div> <h3 id="ad">射手（AD）歷年冠軍造型</h3> <p>這裡放射手內容</p> <div style="text-align: right;"><a href="#champ-skins">回到頂部↑</a></div> <h3 id="sup">輔助（SUP）歷年冠軍造型</h3> <p>這裡放輔助內容</p> <div style="text-align: right;"><a href="#champ-skins">回到頂部↑</a></div>

呈現效果可以參考這篇文章：【英雄聯盟LOL】英雄聯盟世界賽，歷年冠軍造型總覽（S1–S14），依照位置區分

📋 快速導覽製作速查表

最後用表格整理本文重點。

目的	寫法	說明
設定目標位置	id="mid"	放在要跳到的標題或區塊上。
建立導覽連結	href="#mid"	點擊後跳到指定 id。
回到頂部	href="#champ-skins"	跳回文章上方導覽處。
美化導覽框	background、border、padding	讓目錄看起來更清楚。
控制連結間距	margin-right	讓每個導覽連結不要貼太近。

✅ 小結

在 Blogger 文章中加入快速導覽，可以讓長文章更容易閱讀。讀者不用一直往下滑，只要點擊導覽連結，就可以直接跳到想看的段落。

快速導覽：用 <a href="#id名稱"> 製作連結。
描點位置：用 id="id名稱" 設定目標位置。
回到頂部：把上方標題設定 id，再用連結跳回去。
href 要加 #：例如 href="#mid"。
id 不加 #：例如 id="mid"。
CSS 可以美化導覽：例如背景色、圓角、邊框、內距。

設定目標位置： id="mid" 建立連結： href="#mid" 點擊連結後：跳到 id="mid" 的位置

最後用一句話記住：
id 是目的地，href="#id" 是前往目的地的連結。

麻將教學懶人包｜從規則到牌理的完整觀念整理（附實戰心得）

9月 16, 2025

閱讀完整內容

搜尋此網誌

昏貴就是粉粿