部落格排版救星：我的私房 CSS 內容樣式庫，複製貼上立即提升文章質感
一篇好的文章，除了內容本身要扎實，清晰的排版與視覺引導也至關重要。透過預先定義好的 CSS (Cascading Style Sheets) 樣式，我們可以快速為文章中的不同內容（如提示、引言、重點摘要等）套上專業且一致的外觀，不僅美化版面，更能幫助讀者快速吸收資訊。
本指南將分類介紹我個人使用的多種實用內容區塊樣式，包含其適合的使用時機、HTML 結構，並在文末提供可直接複製使用的完整 CSS 程式碼。
如何使用本樣式庫？
- 將文末的「完整 CSS 程式碼」一次性地複製到您網站的自訂 CSS 區域中（例如 Blogger 的「主題」>「自訂」>「進階」>「新增 CSS」）。
- 在撰寫文章時，於 HTML 編輯模式中，使用各範例提供的 HTML 結構來包裹您的內容即可。
第一類：提示、警告與資訊方塊 (Callout Boxes)
這類方塊使用不同的顏色和粗左側框線來吸引讀者注意，適合用來傳達特定性質的訊息。
A. 資訊方塊 (Info Box)
用途說明： 當您需要提供與上下文相關的「補充說明」或「背景資訊」時使用。
HTML 範例：
<div class="info-box">
<strong>補充說明：</strong>Prism.js 是一個輕量、可擴展且易於使用的語法高亮函式庫。
</div>外觀預覽：
補充說明：Prism.js 是一個輕量、可擴展且易於使用的語法高亮函式庫。
B. 技巧方塊 (Tip Box)
用途說明： 當您想提供「實用技巧」、「操作建議」或「最佳實踐」時使用。
HTML 範例：
<div class="tip-box">
<strong>實用技巧：</strong>在撰寫 CSS 時，將共用樣式抽離出來可以大幅提升程式碼的可維護性。
</div>外觀預覽：
實用技巧：在撰寫 CSS 時，將共用樣式抽離出來可以大幅提升程式碼的可維護性。
C. 警告方塊 (Warning Box)
用途說明： 當您需要提醒讀者「注意事項」或「可能出錯的地方」時使用，語氣較溫和。
HTML 範例：
<div class="warning-box">
<strong>注意：</strong>執行此腳本前，請確保已安裝所有必要的依賴套件。
</div>外觀預覽：
注意：執行此腳本前，請確保已安裝所有必要的依賴套件。
D. 危險方塊 (Danger Box)
用途說明： 用於傳達「極其重要」或「具有風險」的警告，通常涉及不可逆的操作。應謹慎使用。
HTML 範例：
<div class="danger-box">
<strong>危險：</strong>這是一個不可逆的操作，執行前請務必備份。
</div>外觀預覽：
危險：這是一個不可逆的操作，執行前請務必備份。
第二類：資訊彙整與學習區塊
這類區塊用於將資訊結構化，以摘要或卡片的形式呈現，幫助讀者學習與快速回顧。
A. 重點摘要方塊 (Summary Box)
用途說明： 適合放在長篇文章的開頭（作為內容預告）或結尾（作為重點回顧），也就是製作「懶人包」。
HTML 範例：
<div class="summary-box">
<h4>本章重點</h4>
<ul>
<li>學習了五種不同用途的提示方塊。</li>
<li>掌握了如何使用 Prism.js 呈現程式碼。</li>
</ul>
</div>外觀預覽：
本章重點
- 學習了五種不同用途的提示方塊。
- 掌握了如何使用 Prism.js 呈現程式碼。
B. 英文單字卡 (Flashcard)
用途說明： 專為展示「詞彙」或「專有名詞」而設計，模仿實體單字卡的學習體驗，適合語言學習或技術文章。
HTML 範例：
<div class="flashcard">
<div class="flashcard-word">Component</div>
<div class="flashcard-details">/kəmˈpoʊ.nənt/ (noun)</div>
<div class="flashcard-definition">
一個較大整體的組成部分或要素，尤指機器或車輛的零件。
</div>
</div>外觀預覽：
Component
/kəmˈpoʊ.nənt/ (noun)
一個較大整體的組成部分或要素，尤指機器或車輛的零件。
第三類：重點段落 (Focus Paragraph)
用途說明： 當您希望某個段落能被讀者特別關注，但又不想使用像「提示方塊」那樣強烈的樣式時使用。它適合用來包裝引言、開場白、或文章中的關鍵論述。
HTML 範例：
<div class="focus-paragraph">
<p>
設計的本質不僅僅是美學，它更深層地關乎解決問題的邏輯與流程。一個好的設計，是在限制與需求之間找到最佳的平衡點。
</p>
</div>外觀預覽：
設計的本質不僅僅是美學，它更深層地關乎解決問題的邏輯與流程。一個好的設計，是在限制與需求之間找到最佳的平衡點。
完整 CSS 程式碼：你的即用樣式庫
請複製以下所有程式碼，並將其貼到您網站的自訂 CSS 區域。
/* ** My Custom Content Styles - CSS Pattern Library **
** 最後更新時間: 2025-07-18 **
*/
/* --- 1. 提示、警告、資訊方塊 (Callout Boxes) --- */
/* (1a) 所有提示方塊的共用基礎樣式 */
.post-body .info-box,
.post-body .tip-box,
.post-body .warning-box,
.post-body .danger-box {
border: 1px solid;
border-radius: 4px;
padding: 15px 20px;
margin: 20px 0;
}
/* (1b) 藍色資訊方塊：用於補充說明 */
.post-body .info-box {
background-color: #e6f7ff;
border-color: #91d5ff;
border-left: 5px solid #1890ff;
}
/* (1c) 綠色技巧方塊：用於提供建議或技巧 */
.post-body .tip-box {
background-color: #f6ffed;
border-color: #b7eb8f;
border-left: 5px solid #52c41a;
}
/* (1d) 黃色警告方塊：用於注意事項 */
.post-body .warning-box {
background-color: #fffbe6;
border-color: #ffe58f;
border-left: 5px solid #faad14;
}
/* (1e) 紅色危險方塊：用於極重要或危險的提示 */
.post-body .danger-box {
background-color: #fff1f0;
border-color: #ffccc7;
border-left: 5px solid #cf1322;
}
/* --- 2. 資訊彙整與學習區塊 --- */
/* (2a) 重點摘要方塊 */
.post-body .summary-box {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-left: 5px solid #6f42c1;
border-radius: 4px;
padding: 20px;
margin: 20px 0;
}
/* (2b) 摘要方塊內的標題 H4 */
.post-body .summary-box h4 {
margin-top: 0;
margin-bottom: 15px;
font-weight: bold;
}
/* (2c) 摘要方塊標題前的燈泡圖示 */
.post-body .summary-box h4::before {
content: "💡 ";
margin-right: 5px;
}
/* (2d) 摘要方塊內的列表 ul */
.post-body .summary-box ul {
padding-left: 20px;
margin-bottom: 0;
}
/* (2e) 英文單字卡 */
.post-body .flashcard {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 25px;
margin: 25px auto;
max-width: 500px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* (2f) 單字卡的單字部分 */
.post-body .flashcard-word {
font-size: 2em;
font-weight: bold;
color: #2c3e50;
margin-bottom: 5px;
}
/* (2g) 單字卡的發音與詞性 */
.post-body .flashcard-details {
font-size: 1em;
color: #7f8c8d;
margin-bottom: 15px;
}
/* (2h) 單字卡的定義與解釋 */
.post-body .flashcard-definition {
border-top: 1px dashed #e0e0e0;
padding-top: 15px;
font-size: 1.05em;
line-height: 1.7;
}
/* --- 3. 特定段落文章區域 --- */
/* (3a) 重點段落區塊 */
.post-body .focus-paragraph {
background-color: #fbfcfe;
border-left: 3px solid #a991d4;
padding: 20px 25px;
margin: 25px 0;
border-radius: 4px;
}
/* (3b) 重點段落區塊內的文字 p */
.post-body .focus-paragraph p {
margin: 0;
font-size: 1.1em;
line-height: 1.8;
color: #343a40;
}
Tags
Blogger技巧