自訂

自訂設計 »自訂 CSS

目錄

自訂 CSS

自訂 CSS  屬於  自訂工具的一部分,也是 WordPress.com 進階版、商務版和電子商務版方案提供的功能。你可以使用網誌儀表板中的  CSS 編輯器  (「我的網站」→「設計」→「自訂」→「CSS」) ,將自訂 CSS 新增到 WordPress.com 網誌。

請注意:屬於 WordPress.com 商務版和電子商務版方案、且已安裝外掛程式的網站,可在網誌儀表板中 (「我的網站」→「設計」→「自訂」→「其他 CSS」)  找到「自訂 CSS」區段。

CSS 即 階層式樣式表 (Cascading Style Sheets),是一種控制網頁 HTML 元素外觀的標記語言,在修改網站設計方面幾乎具有無限可能,這點從 CSS Zen Garden 專案備受使用者喜愛就能得知。CSS Zen Garden 展現了如何僅靠 CSS 就能改變單一 HTML 檔案的外觀。

你必須瞭解一些 CSS 和 HTML 的運作原理,或者至少要有學習的意願,才能充分利用此功能。如需詳細資訊,請參閱本頁面下方的「CSS 說明」區段。

如果你希望自訂其中一個 WordPress.com 佈景主題,但對學習 CSS 不感興趣,建議聘請設計師依照你的需求加以變更。


CSS 說明

需要 CSS 說明嗎?我們可以透過即時聊天或電子郵件提供有限的 CSS 支援 。 歡迎隨時與我們聯絡,我們會回覆告知能否為你的 CSS 要求提供協助。如果無法提供協助,我們也會為您指出適當的求助管道!

如需瞭解 CSS 在  WordPress.com 上的運作原理,請參閱「編輯CSS」。如果你不熟悉 CSS,請先參閱 CSS 教學課程,像是 HTML Dog 的 CSS 新手教學課程

如果你才剛踏入這個領域,接下來的學習過程需投入一定的時間和精力,不過 CSS 是一項非常有價值也可重複運用的技能。網路上有「大量」寶貴的資源,協助你開始學習更多 HTML 和 CSS 相關知識。

以下提供一些實用技巧:

建議的 CSS 教學課程

建議的 CSS 書籍

常見問題

我可以使用「自訂 CSS」編輯 HTML 嗎?

不可以。「自訂 CSS」只能讓你為佈景主題新增或取代 CSS,沒有提供變更 HTML 標記或 PHP 程式碼的權限。在自訂 CSS 設定中關閉佈景主題的 CSS,可以將任何 WordPress.com 佈景主題變成空白畫布。

我可以使用「自訂 CSS」上傳佈景主題嗎?

不可以。只有 WordPress.com 商務版和電子商務版方案才支援上傳自訂佈景主題。在此閱讀全文

我可否移除像是「在 WordPress.com 寫網誌」的來源連結、佈景主題、字型或工具列連結?

所有 WordPress.com 使用者都必須保有管理員列 (登入時顯示在 WordPress.com 網站頂端的深色橫條)。WordPress.com 商務版和電子商務版方案的客戶可以聯絡支援部門,請他們協助刪除管理員列。

如果網站啟用 WordPress.com 商務版或電子商務版,則可隱藏頁尾版權宣告。如果你未採用這些方案,請勿使用 CSS 隱藏或變更版權宣告。

所有 WordPress.com 使用者都有多種頁尾版權宣告可選用,例如極簡風格的 WordPress.com 標誌,或是「WordPress.com 網站」或「由 WordPress.com 建置」等文字選項。請參閱這份文件,瞭解進一步資訊。

在可閱讀的前提下,你可以任意修改頁尾文字的樣式 (亦即色彩和字型大小)。你也可以使用 CSS 在現有的頁尾新增著作權聲明等內容。

我可以使用「自訂 CSS」對現有佈景主題微幅調整外觀嗎?

可以。這是最受歡迎,也是最容易就能實作的選項。如果你對現有佈景主題所做的變更僅是新增 CSS 程式碼片段,這些片段將在載入佈景主題 CSS 之後套用,並覆寫佈景主題 CSS,你即無需管理整個另一獨立的 CSS 集合,之後在 CSS 編輯器中修改幾行程式碼,就能快速輕鬆地微幅調整。

我可以使用「自訂 CSS」大幅調整網誌的版面形式?

你當然可以使用「自訂 CSS」進行大幅調整,但是操作難易程度視佈景主題和你的 CSS 技能而定。你可以完全覆寫佈景主題現有的 CSS,從頭開始,基本上就是將任何 WordPress.com 佈景主題變成空白畫布,而不是新增樣式而已。有些佈景主題比較有調整彈性,而找出這些佈景主題最好的方法就是著手實驗

我可以使用 @import 和 @font-face 之類的 CSS 規則嗎?

WordPress.com 進階版目前不允許透過 CSS 載入外部檔案,但 WordPress.com 商務版和電子商務版沒有這項限制。

我可以在 CSS 中使用網路字型嗎?

你可以在字型面板中  (「我的網站」→「設計」→「自訂」→「字型」)  選擇兩種字型搭配。使用 CSS 時,你只能在前端使用這兩種網路字型。此外,如果已啟用 WordPress.com 商務版或電子商務版,就能夠使用第三方外掛程式新增其他字型。

系統是使用我的自訂 CSS 樣式,而不是佈景主題的標準樣式嗎?或者是連同使用?

由你決定,都可以!你可以選擇漸進式新增 CSS 以覆寫佈景主題的現有 CSS (這是最常用的選項),也可以完全不載入佈景主題的原始 CSS,重新開始。若選擇新增至佈景主題的現有 CSS 中,系統會先載入佈景主題的標準樣式表,接著才套用自訂 CSS 規則。如果你只想對佈景主題進行一些微幅調整,例如變更文字的外觀或背景顏色,請選擇此選項。如果選擇從頭開始,系統將完全不會載入佈景主題的標準樣式表。如果你希望從頭自行設計,請選擇此選項。

我可以將 CSS 套用到行動佈景主題嗎?

可以。你可以選擇將自訂 CSS 套用到行動佈景主題,也就是行動瀏覽器適用的預設佈景主題。若要啟用此選項,請前往「我的網站」→「設計」→「自訂」→「CSS」,然後在 CSS 編輯器下方找到設定 。 勾選「將此 CSS 加入行動佈景主題」旁的核取方塊。你的樣式就會套用到 Minileven。Minileven 佈景主題具有「mobile-theme」(行動佈景主題) 的主體類別,可以用來編寫 Minileven 專屬樣式。下方簡易範例即使用「mobile-theme」(行動佈景主題) 主體類別,為 Minileven 建立紅色背景:

body.mobile-theme {
background-color:#ff0000;
}

我可以上傳圖片供 CSS 使用嗎?

可以。你可以上傳圖片到媒體庫,然後在 CSS 樣式表中輸入圖片的直接網址,即可參照該張圖片。以下簡易範例說明如何在樣式表中使用背景圖片:

div#content {
background-image:url('http://example.files.wordpress.com/1999/09/example.jpg');
}

我搞砸了,如何重設佈景主題的樣式?

前往 「我的網站」→「設計」→「自訂」→「CSS」,從編輯器移除所有 CSS 程式碼,然後按一下「儲存」即可。

如果我取消訂閱 WordPress.com 進階版、商務版或電子商務版方案,會怎樣?

WordPress.com 上所有的升級項目都會每年進行續訂。如果你選擇取消訂閱,系統仍會儲存你的自訂 CSS,但不會再套用到你的網站讓其他人看見。如果你希望自訂 CSS 重新套用到網站,可以重新購買升級,只要你沒有變更佈景主題,系統就會自動重新套用樣式。如果你已變更佈景主題,則可以在 CSS 修訂連結中找到過去的 CSS;CSS 修訂連結位於 CSS 面板的編輯器上方。


Still confused?

Contact support.

Not quite what you're looking for?

取得說明