摘要：這篇文章介紹如何使用最新版本 CSS 為 WordPress 的 Twenty Ten 主題增強外觀與互動性。主要改進包括首頁卡片化設計、紫色膠囊式「閱讀全文」按鈕、行動裝置版面優化，以及單篇文章與側邊欄的視覺調整。透過簡單的 CSS 檔案新增，即可讓網站外觀更現代、可讀性更高。
🧩 功能分析（使用最新版本 CSS）
- 首頁卡片化：首頁所有
.post都會有卡片外框（淺米白底、圓角、淡陰影、內距），滑過時微浮起。 - 閱讀全文按鈕：首頁的「閱讀全文」變成紫色膠囊按鈕，hover 變深紫並略微上移。
- 行動裝置優化：螢幕 ≤ 600px 時，卡片 padding 變小，列表更緊湊。
- 單篇文章：進入單篇（
.single）時，移除外框與陰影，保留乾淨內容區；隱藏文首的上一則/下一則，只美化文末導覽（分隔線 + 雙欄排列 + hover 底線）。 - 側邊欄（Twenty Ten）：放大 widget 區字級與標題，改善可讀性。
🎯 會產生的效果（重點視覺）
首頁列表：每一篇都是一致的卡片塊；程式碼文章、健康格式文章、一般文章一視同仁地卡片化。
滑過互動：列表每卡片 hover 都有輕微浮起與陰影加強，強調可點性。
單篇頁：去卡片化，避免「文章內又包一層卡片」的視覺重複；文末導覽更乾淨且易點擊。
RWD：手機上外框仍在，但更緊湊，不突兀。
🛠️ 安裝方式（檔案制，供外掛外連高亮）
- 建立檔案：在你的網站檔案系統中，建立（或上傳）這個檔案：
主題佈景附加CSS/2010add.css - 貼入下方 CSS 內容（見文末「CSS 程式碼」區塊）
📦 CSS 程式碼（請放進 主題佈景附加CSS/2010add.css）
/* ===========================
首頁：文章外框（全部文章都套用）
=========================== */
.home .post {
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 24px 28px;
margin-bottom: 28px;
background-color: #faf9f7;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
transition: box-shadow 0.25s ease, transform 0.25s ease;
will-change: transform, box-shadow;
}
.home .post:hover {
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
/* 首頁：「閱讀全文」橢圓按鈕（僅首頁生效） */
.home a.more-link {
display: inline-block;
padding: 6px 18px;
border-radius: 999px;
background-color: #9188f3;
color: #fff !important;
font-size: 0.9rem;
text-decoration: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
transition: background-color 0.2s ease, transform 0.2s ease;
}
.home a.more-link:hover {
background-color: #6e64e8;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* 手機版微調（僅首頁外框） */
@media (max-width: 600px) {
.home .post {
padding: 16px 18px;
}
}
/* ===========================
單篇：完全不套用外框 + 只美化底部導覽
=========================== */
.single .post,
.single .type-post,
.single .hentry {
border: none !important;
background: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* 分類／標籤／永久連結：下移避線 */
.single .entry-utility {
display: block;
clear: both;
margin-top: 12px;
padding-top: 0;
border-top: none !important;
}
.single .entry-utility,
.single .entry-utility * {
white-space: normal;
}
/* 隱藏單篇頂部的上一則／下一則 */
.single #nav-above {
display: none !important;
}
/* 只樣式化底部的上一則／下一則 */
.single #nav-below {
display: flex;
justify-content: space-between;
margin: 12px 0 0;
padding-top: 8px;
border-top: 1px solid #eaeaea;
}
.single #nav-below .nav-previous,
.single #nav-below .nav-next {
float: none;
display: inline-block;
width: auto;
max-width: 48%;
word-break: break-word;
color: #444;
text-decoration: none;
}
/* 對齊設定 */
.single #nav-below .nav-previous { text-align: left; }
.single #nav-below .nav-next { text-align: right; }
/* Hover 效果（淡紫色 + 底線） */
.single #nav-below a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.single #nav-below a:hover {
color: #6e64e8;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* ===========================
Twenty Ten 側邊欄字級
=========================== */
/* 放大側邊欄字體 */
#secondary,
.widget-area {
font-size: 14px; /* 需要更大可調整為 16~20px */
line-height: 1.4;
}
/* 側邊欄標題（小工具標題） */
.widget-title,
.widgettitle {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}