行距或行高在網頁設計中至關重要，尤其是對於文字較多的網站。雖然看起來是個小細節，但適當的行距可大幅提升內容的可讀性，並改善整體使用者體驗。本指南將解釋為什麼行距是必要的，並教您在 WordPress 中調整行距的各種方法，並提供範例以確保您獲得最佳效果。

為何行距如此重要？

行距會直接影響網站文字的視覺呈現，進而影響使用者的使用經驗。以下是幾個重要的原因：

1. 提高可讀性:如果您的文字間距過小，讀者就需要協助才能跟上，導致眼睛疲勞和沮喪。另一方面，過大的間距會讓使用者更容易維持專注力。適當的平衡可以改善內容的流動性，使其更容易閱讀和吸收。
2. 更好的美感:間距合理的網站看起來更乾淨、更專業。例如，相較於雜亂無章、難以閱讀的文字區塊，行與行之間有適當間距的部落格會讓人覺得更吸引人、更有條理。
3. 影響使用者參與度:使用者參與度通常與可讀性有關。如果訪客發現您的內容難以閱讀，他們很可能會很快跳出您的網站。適當的行距可增加使用者停留時間、閱讀更多內容以及與網站互動的機會。

範例：在理想的世界中，使用者會仔細閱讀內容，在點選連結前反思。在現實中，他們會略略瀏覽可點選的內容，如果不是他們想要的，通常會按下返回按鈕。清晰、間隔合理的內容有助於使用者找到他們需要的東西，而雜亂無章的文字則會導致挫敗感和更高的跳出率。

假設您想進一步瞭解如何透過行距優化網站的使用者體驗。在這種情況下，建議您閱讀一些有關網頁可讀性和使用者體驗設計的資料，例如 不要讓我思考這本書提供了許多有用的設計技巧。

如何在 WordPress 中調整行距

根據您的需求和偏好，WordPress 提供了幾種調整行距的方法，從內建編輯器到自訂編碼和外掛程式。以下是最常見的幾種方法，每種方法都有範例引導您。

1、調整 Gutenberg 編輯器的行距

WordPress 的預設區塊編輯器 Gutenberg 提供一些基本的行距控制。如果您正在使用 Gutenberg 編輯器，請按照以下步驟調整行高：

步驟：

• 選取段落:開啟要編輯的 WordPress 頁面或文章，然後按一下需要調整間距的段落塊。

• 尋找排版設定:在右側的設定面板中，找到" "。排版"部分。
• 調整線高度:在排版設定下，您可以找到 "Line Height" 選項。您可以透過調整數值或輸入自訂數字來增加或減少間距。

範例:假設您有一組文字的行距太密，以致難以閱讀。如果預設的行高是 1.4，將它增加到 1.8 或 2.0 將提供行與行之間更多的空間，改善可讀性。

這是調整個別段落或文字區塊行距的簡易方法。但是、 自訂 CSS 如果您需要更精確的控制，或需要在整個網站範圍內調整間距，則使用此選項可能會更有效。

2、在 Gutenberg 中使用自訂 HTML 調整行距

您可以新增自訂的 內嵌 CSS 在 Gutenberg 中可以更精確地控制個別段落或元素。

步驟：

• 切換至代碼模式:選擇要編輯的圖塊，然後按圖塊工具列上的三點功能表。選擇"編輯為 HTML" 切換至代碼檢視。

• 新增行高代碼:修改 <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-light-green-cyan-color"><p></mark> 標籤 (或您使用的任何 HTML 標籤) 加入 line-height 屬性。例如

<p style="line-height: 1.8em;">這是增加行距的段落。</p>

範例:比方說，您的網站使用正式的語調，您希望文章中的每個段落都有稍寬的間距，以提高可讀性。使用上述方法，您可以將個別段落的行距設定為 1.8 em，讓使用者更容易消化長篇文字。

此區塊包含意外或無效的內容。選擇「轉換為經典區塊」。

此方法具有彈性，可讓您微調特定文字區塊或元素的行高。

3、在經典編輯器中調整行距

如果您仍在使用經典編輯器，WordPress 允許您在視覺編輯器和 HTML 程式碼中調整行距。

• 使用格式下拉式:
  • 反白您要變更的段落。
  • 在工具列中，查找標有 「格式 」的下拉菜單。根據您的主題，可能會有預設的行高，如 1.5、2.0 等。

範例:如果您的主題允許，您可以設定整個正文的行高統一為 1.6 或 1.8。這對部落格或長篇內容很有用，可確保每篇文章都有一致的間距。

• 使用文字編輯器 (HTML 檢視):
  • 按一下" "。正文經典編輯器中的 " 標籤切換到 HTML 檢視。
  • 直接在段落的 HTML 中加入內嵌 CSS：

<p style=" line-height: 1.7;">此段的行高為 1.7。</p>

範例:對於那些希望對有長段落或小點的部分有更多控制的人，使用 HTML 手動設定行距可以自訂頁面的特定部分，而不碰觸其他元素。

4、通過主題自訂器調整行距

許多 WordPress 主題直接透過主題自訂器提供行距控制。這種方法非常適合在整個網站中使用一致的行距，而無需修改個別文章或頁面。

步驟：

• 開啟主題自訂器:從 WordPress 面板，導覽到 外觀 > 自訂.

• 尋找排版設定:根據您的主題，有一個區塊會標示為" "。排版「 或 」全球風格."在這一節中，尋找調整線條高度的選項。

• 全域調整線高度:有些主題提供滑桿或輸入方塊，您可以在其中設定各種文字元素的行高，例如正文、標題，甚至是方塊引號。

範例:假設您使用 Astra 或 GeneratePress 等提供詳細排版控制的主題。將正文的全局行高設定為 1.6，並將標題的行高增加到 1.2。這將使您的網站具有平衡、可讀的版面，標題間距更緊，而正文間距更寬。

或者，如果您的主題不提供這些控制項，您可以使用 "額外的 CSS" 區段來新增全局 CSS 規則，例如手動

p {

  line-height: 1.6；

}

這可確保您網站上的每個段落都保持一致、可讀的行距。

5、使用 WordPress 外掛調整行距

如果您偏好更直觀的方法，並希望避免自訂編碼，WordPress 外掛程式可以協助您輕鬆管理行距和其他版面元素。

其中一個外掛程式是 墊片，可讓您透過加入空白區塊來控制元素之間的空間。

步驟：

• 安裝 Spacer 外掛程式:從儀表板，移至 外掛程式 > 新增 外掛程式, 搜尋"墊片," 安裝並啟動它。

• 在 Gutenberg 中加入間隔塊:在 Gutenberg 編輯器中，按一下" "。+" 圖示來新增區塊，搜尋「Spacer」，然後將它拖曳到段落、圖片或其他元素之間。
• 調整墊片高度:添加 Spacer 區塊後，使用拖曳手柄調整其高度，或在區塊設定中輸入特定值。

範例:假設您正在設計登陸頁面，並希望在標題、圖片和文字等部分之間留出更多空間。插入 Spacer 區塊可讓您視覺上調整間距，而無需碰觸任何程式碼。

總結

在 WordPress 中調整行間距對於增強可讀性、美感和使用者參與度至關重要。適當的行距可確保您的文字易於閱讀且具有視覺吸引力。WordPress 提供多種調整行距的方法，包括使用 Gutenberg 編輯器、自訂 HTML、經典編輯器、主題自訂器，以及 Spacer 等外掛程式。每種技術都能根據您的需求提供彈性，從微調單獨的文字區塊到應用整個網站的調整。透過優化行距，您可以為網站訪客創造更愉快、更吸引人的閱讀體驗。