search
top

WordPress無痛起步電子書–CSS的編輯與主題編輯工具

  要讓部落格看起來更有質感,CSS是不可或缺的工具。不過,當然你的網頁內容才是最重要的,但是,當你的網頁中有了好的內容之後,如何讓你的網站看起來更舒服,讓你的內容有一個更好的呈現,除了佈景主題的設定之外,做好CSS的格式設定就會有畫龍點睛的效果。

  對於初學者來說,其實不用想太多,也不太需要去瞭解CSS到底是什麼,以及可以發揮到什麼功能,只要簡單地把它想成是進階調整文章段落格式的一些指令就好了。要調整的方式也很簡單,任何一篇文章也都可以自行設定這些格式,就像是本文的內容一樣。最簡單的指令如下:

<p style=”font-family:微軟正黑體;font-size:12pt;”>文字內容</p>

  在你編寫文章的一開始,如果你打算把編輯器先設定為文字輸入模式,然後再文字編輯模式下輸入上述的指令,那「文字內容」這4個字就會以微軟正黑體的字型,然後12點大小的字來呈現。你不用張貼出來再看,直接切換到「預覽」模式就可以了。一些部落格必學的指令請參考這一篇文章:「部落格必學的CSS指令」。

  除了在文章中額外設定CSS格式之外,大部份的佈景主題也讓我們有機會去調整一些整體的CSS設定,例如對於連結的顏色以及底線的樣式還有整體字型的大小和顏色等等。要對於整個網站內容的CSS做整體設定(像作者最常做的,至少要把所有的字型都換成為「微軟正黑體」,以去掉不好看的新細明體,避免在中英文夾雜的文章中會有不好看的字型出現),也是要看佈景主題有沒有提供這樣的功能。像是這個網站(http://skynetbooks.com)所使用的Divi佈景主題(要收費的)就有提供這個功能,直接在外觀的設定功能表中就可以看到:

css01

  那個「編輯CSS」的選項,就是讓你設定網站整理格式的機會。按下此選項之後,可以看到以下的畫面:

css02

  在這個編輯環境中輸入標準的CSS格式內容就可以了。而Divi佈景主題更進一步地在它的主控台中(這個佈景主題自己有自己的主控台Panel)還有一個介面可以設定,如下:

css03

  所以站長就在這裡設定了如上的CSS內容。這個設定很簡單,等於是指定了大部份的格式標籤,只要有使用到任何文字,都是以「微軟正黑體」為最優先的考量。

  當然,如果你使用的佈景主題沒有提供專門的介面來讓你輸入CSS格式指令的話,還是有一個機會。請再看一次功能表:

css01

  那個「主題編輯器」就是。點選進去之後,可以看到以下的編輯環境:

css04

  這個是讓你修改佈景主題內容的介面,所以在裡面你可以做任何的修改,你的佈景主題馬上可以客製化成為你自己的樣子。不過要注意兩點,第一點是內容的修改要特別小心,以免因為修改錯誤,到時候整個格式亂掉而無法復原。另外,有些佈景主題的作者會聲明它的佈景主題不願意被別人修改,你要注意一下智財權的問題。

  剛剛有提到主題編輯器可以對於這個佈景主題做任何的修改,把網站的外觀調整成為你想要的樣子,那當然包括你也可以在每一個文章之前或之後,手動加入一些程式碼或連結碼,把自己的東西放在你想要的地方。在主題編輯器的右側,就是這些佈景主題所使用到的所有檔案列表:

css05

  每一個檔案均有其特別的功能,可以自行修改,並看看網站的外觀有沒有什麼顯著的變化。不過,當然我們不建議初學者這麼做,因為你可能會因此讓整個系統崩潰,再也救不回來。

  還有,最後要注意的一點是,如果你利用主題編輯器手動修改了主題內容,當這個主題更新的時候,有可能你修改的部份會被覆蓋掉,因此在更新佈景主題時要特別留意這一方面的問題。

(1481)

發表迴響

top
%d 位部落客按了讚: