標籤: style.css

WordPress List Style – 清單樣式設計

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

繼續閱讀

WordPress Font Issue – 中英文字型解決方案

WordPress Font Issue 讓網站的內容,中英文字都有各自的字型,這樣可以增加網站內容的閱讀性,同時提升網站的質感。如何在 WordPress 網站套用中文字型,我分享過非常多的方法。對於多數中文內容的網站來說,這是可以提升網站質感最快也是最容易的方法。不過對於網站內容大量英文出現的網站來說,這樣的規劃又讓版面太單調了一些。所以,今天要跟大家分享一下如何讓中文呈現繁體中文字型,英文則呈現我們想要的英文字型,有興趣的朋友不要錯過了接下來的內容。

繼續閱讀

Adobe Typekit Web Fonts – 免費中文網頁字型

Adobe Typekit Web Fonts 除了 Google Fonts 以外,還有 Adobe 提供免費的中文網頁字型!要如何在 WordPress 網站使用中文字型,增加網站的質感,之前的文章分享過非常多的示範,大多是以 Google Fonts 來做範例。今天要跟大家分享另外一個很不錯的網頁字型,就是 Adobe Typekit Web Fonts。目前提供支援繁體中文的字型有三款,分別是 Source Han Sans 與 Source Han Serif 兩款繁體中文字型,接下來就以這兩款字型來做範例,跟大家分享如何在網站內容中套用。

繼續閱讀

Theme Virtue Chinese Font Family – 佈景主題自訂中文字型

Theme Virtue Chinese Font Family 透過中文字型的修改,讓這一款多功能佈景主題發揮最大的閱讀效果!2017 年跟大家介紹過這一款佈景主題 Virtue,這是一款功能非常強大的佈景主題,同時也支援 WooCommerce,對於電子商務網站的建置相容度很高,所以非常受到大家的喜愛,有超過 5萬人次的下載與啟用。同時這一款佈景主題免費版本就提供了相當多的設計選項,可以讓大家做細部調整,讓外觀更符合自己網站的需求,雖然自行也提供了相當多的選項,唯獨沒有支援中文字型,所以今天的內容要跟大家分享,如何讓網站套用中文字型,如果你也是使用這一款佈景主題的朋友,不妨參考看看。

繼續閱讀

Balloon.css – 提示效果式樣設計

Balloon.css 只需要透過式樣設計,就可以產生漂亮的訊息提示效果。透過 WordPress 來架設網站,是一件非常有趣的事情。每個人都可以在這個主程式的規範下,去變化更種獨特的效果,而這些效果是為了自己的網站需求。同時,也可以很輕鬆的將網路上的各項設計資源整合進來套用,說真的是大大降低了網站設計師開發的時間,這麼多好用的工具,是不是也想試試看呢?今天跟大家分享的是提示效果的 CSS 設計,不需要其他 JS 程式碼,就可以產生很棒的效果,有興趣的朋友,請繼續閱讀接下來的文章內容。

繼續閱讀

Custom Colored Underline – 自訂底線效果式樣設計

Custom Colored Underline 透過自訂底線效果的式樣設計,讓重點文字或是連結有了焦點效果。漸層顏色效果一直是我個人很喜歡的一種網頁設計效果,除了可以提供訪客不同的視覺感受,更進一步可以達到推廣頁面內容的作用,這兩年也被大量的運用在網頁設計上。今天分享的內容是示範如何建立漸層效果的底線,來增加重點文字的關注效果,提升訪客的注意力,同樣也可以套用在連結上,創造出不同的式樣感覺。

繼續閱讀

WordPress Plugin Simple Tooltips – 內容提示外掛程式

WordPress Plugin Simple Tooltips 為網站的文章內容提供提示框的說明,更有助於訪客的閱讀。去年也是差不多這個時間點,跟大家分享了如何透過樣式表(CSS)的設計,在 WordPress 的文章內容裡來建立提示註解,有興趣的朋友可以參考 WordPress Tooltips With CSS – 如何新增註解提示這一篇文章的說明內容。不過還是有部分朋友跟我反應,透過 CSS 的設計對他們來說,還是太複雜了一些。所以今天就要跟大家分享一款內容提示外掛程式,可以讓大家在編輯文章時,需要展示提示內容框時,透過編輯器上的按鈕,直接插入到文章就可以了。接下來的文章內容就跟大家來分享這一款外掛程式的安裝與使用,好與不好的測試內容。

繼續閱讀

WordPress Plugin Code Snippets – 自訂代碼外掛程式

WordPress Plugin Code Snippets 可以讓我們自己添加程式碼或是式樣設計的外掛程式,這樣的功能與建立子佈景主題有什麼差異?看到 WordPress 社團上很多人提起這一款外掛程式,所以檢視了一下官網上的說明,與我心裡面預期的不大一樣,所以今天特別花點時間好好來測試看看,是不是真的像其他朋友提到的那麼好用,對於新手朋友來說也是容易上手嗎?這一款外掛程式就可以應付網站的所有需求嗎?還是又會是另外一款功能重複的雞肋外掛程式。

繼續閱讀

Google Font Noto Sans TC – 思源黑體中文字型

Google Font Noto Sans TC 思源黑體網路字型正式開放使用了,趕快幫自己的網站套用這漂亮的中文字體吧!在 2016 google fonts – 如何為佈景主題新增中文字型這一篇文章,就已經跟大家介紹如何在 WordPress 網站,套用 Google 提供的網路中文字型,不過當時還是測試版本(Early Access )。最近 Google Font 終於正式發佈 Noto Sans TC 思源黑體網路字型,所以藉著這個機會再來跟大家分享一下如何在自己的網站套用這一套網路字型。

繼續閱讀

WordPress Box Shadow – 高質感圖片陰影設計

WordPress Box Shadow 讓照片的質感一下子就提高了許多。在三月的時候跟大家分享過一個線上製作式樣(CSS)的網站,讓不懂得式樣設計語法的朋友,也可以輕鬆的在 WordPress 網頁設計出一些特別的式樣效果。今天延續這個設計的技巧,跟大家分享如何透過陰影的設計,讓照片的質感提升,建置出高質感的照片網站。如果您的網站使用大量的照片,而且照片多是簡約風格,那麼今天的式樣技巧可以參考,會讓照片呈現特別的質感。

繼續閱讀
Loading

網站架設

WordPress 虛擬主機免費安裝設定