WordPress List Style – 清單樣式設計

WordPress List Style – 清單樣式設計

WordPress List Style 透過簡單的 CSS 設計,讓清單樣式有了不一樣的效果,增加網站閱讀的樂趣,吸引訪客的目光。

WordPress 的內容,編輯上已經有很多的工具,可以幫助我們排版與發佈。今天分享的清單設計,可以讓網站內容條理更明顯,訪客在閱讀時獲取的資訊可以清楚。緊接下來的內容是關於 CSS 設計,透過一些簡單的 CSS 設計,改變清單的符號樣式,讓清單樣式設計活潑有趣,有興趣的朋友可以參考看看。

WordPress List Style – 清單樣式設計

WordPress List Style - 清單樣式設計
  • 在預設的情況下,清單樣是的符號多半是圓點又或是數字,有些單調卻也非常實用。底下將分享一些簡單的 CSS 語法,改變這些清單的符號,讓清單設計變得有趣活潑。
  • 首先,在文章編輯時,點選清單區塊,在編輯畫面右側的區塊功能選單,往下找到”附加的 CSS 類別”,給它一個專屬的名稱,本篇文章示範是 mx-01,這裡大家可以自由定義,同理第二、第三或、第四種樣式,就需要取不同的名稱。
設定附加的 CSS 類別
  • 接著可以編輯子佈景主題的 style.css 檔案,或是在外觀/自訂/附加的 CSS,填入今天分享的清單樣式設計語法。
附加的 CSS 填入設計語法
  • 完成後就可以在文章頁面看到清單變更後的圖示效果了。
  • 這次示範內容的圖示效果,是下載 Emoji 圖示,有興趣的朋友可以到 Emojipedia 網站下載套用。

Emojipedia 網站

結論

架設 WordPress 網站有一段時間的朋友,或多或少都會開始接觸一些 CSS 設計,透過一些 CSS 設計,可以讓網站的樣式變化,同時兼具美觀與閱讀容易,這是哪一位網站管理者的功課。

推薦閱讀

WordPress Plugin Child Theme Configurator – 子佈景主題外掛程式

WordPress Additional CSS – 附加的 CSS

About The Author

max

使用 WordPress 架設網站不再是一件痛苦的工作。這裡跟大家分享使用WordPress的相關問題與研究。 並且提供有關WordPress外掛程式,佈景主題等等的使用經驗分享。 幫助想要建立網站的朋友,可以簡單,快速,無痛苦的建立與使用網站。

Leave a reply

發佈留言必須填寫的電子郵件地址不會公開。

WordPress 網站架設指南社團

WordPress 網站架設指南臉書互助學習社團

網站架設

WordPress 虛擬主機免費安裝設定