本文摘自 <Hank Chan's Blog>
前言:本文假設讀者已經具有 CSS 的基本知識。 Weebly 雖然不像 Wix 一樣有許多的主題和套件模板供你選擇,但他們開放程式碼讓你修改 HTML, CSS, 和 JavaScript,讓你可以自己打造和客製化自己的套件 (點這了解如何修改程式碼)。本文章將要教你四種在 Weebly 修改 CSS 的方法。 1. 為單一頁面增添 CSS 有時候為了在特定頁面上添加一些額外套件,尤其是 Weebly 沒有的套件,像是 背景影片 或是 banner,就必須添加額外為套件所寫的 CSS。首先,進入 Pages > 選擇你要的 Pages > SEO settings > Header Code,並照以下指示添加程式碼。 這樣的 CSS code 只能應用在單一頁面上,好處是它不會增加其他頁面 loading 的負擔。
2. 在網站的 SEO Setting 修改 CSS
如果想要針對整個網站的設計進行簡單的修改, 像是改變整體文字的預設大小或顏色,可以到 Settings > SEO > Header Code 添加以下的 code。 3. 在 main style sheet 或是 main.less 上修改 CSS 如果是要從事更複雜的 CSS 修改,像是 navigation bar, footer,就必須要修改你的 main style sheet。這邊,我假設你已經閱讀了 <如何修改程式碼>。進入 HTML Edit,然後找到 main-style.css,或是 main.css,或是 main.less,如下圖。 ( p.s. 不同的 Weebly 主題模板使用不同的 CSS file,2016 以前的 Weebly 主題使用純 css,之後使用 less。Less 是 CSS 的 pre-processor,它簡化了一些 CSS 的步驟,不過同樣是可以接受 CSS code。) 這邊你可以找到所有網站套件會使用到的 CSS。你可以直接編輯這些 CSS,或是透過 !important 的手段另外寫 CSS 來 override 本來的設定。要記得的是,只要是有添加或是更改 CSS 都要用 comments 來標注本來的設定,如以下。每次修改 CSS 加上 comments 是個好習慣,尤其是之後要再回復成原本設定就方便了。 因為 main style sheet 上的 CSS 會應用到整個網站,所以不建議隨意修改。而且在 main style sheet 上添加太多的 CSS 會造成後續維護的負擔。 4. 上傳額外的 CSS 檔案 最後一個也是最少人知道的手段,就是上傳額外的 CSS 檔案。進入 Theme > HTML Edit > Assets 後,你可以將 CSS 檔案上傳到這邊,如下圖。 之後在 Page > Header Code 中添加下列的 code 呼叫 CSS file 就好了。 對某些人來說 - 當需要寫為數較多的 CSS 時,在單一頁面上的 header code 既不適合,而 main style sheet 也已經負載過多,這時候有個獨立的 CSS 檔案就有好處。另外,如果你還沒有意識到的話,其實你也可以在你的 Weebly 網站上存放 CSS 檔案和其他圖片資源來供你的其他網站使用。 延伸閱讀:<如何修改 HTML> <如何修改 JavaScript>
Comments
|
Details
Hank在原本想幫家裡 中藥店 架網站的想法下,誤打誤撞的進入了 Weebly 的世界,從此成為 Weebly 的愛好者. Categories |