標籤: CSS

WordPress Additional CSS – 附加的 CSS

WordPress Additional CSS 透過編輯附加的 CSS,讓網站擁有自己需要的自訂樣式,是管理 WordPress 網站的第一步。很多剛剛接觸 WordPress 網站架設的朋友,對於修改網站樣式總是有著非常多的問題,除了這裡經常跟大家分享的建立子佈景主題的方式,另外就是今天要跟大家分享的附加的 CSS。如果只是簡單的字型、顏色、又或是單一區塊的樣式,都可以利用佈景主題提供的附加的 CSS,填入適當的 CSS 語法,就可以讓網站的樣式符合自己的需求,相較於子佈景主題建置的方式,這個方法在操作上會比較簡單。有興趣的朋友可以參考看看。

繼續閱讀

WordPress Plugin Add Admin CSS – 控制台樣式設計外掛程式

WordPress Plugin Add Admin CSS 透過修改控制台樣式,讓管理者可以更容易完成與操作例行的管理工作與編輯發文。在社團看到有人提問,WordPress 後台的編輯區域,字體大小的呈現過小,讓編輯工作顯得十分吃力。很多網友提供在外觀/自訂/附加的 CSS 做修改,這個方法其實沒有辦法修改控制台的相關式樣設計。因此,有了今天這一篇文章。來跟大家簡單說明一下,可以透過程式碼,也可以透過外掛程式的幫助,來修改控制台的樣式,讓管理者的工作可以更容易執行,管理工作可以更輕鬆效率可以更好。

繼續閱讀

WordPress Plugin Blocks CSS – 區塊樣式設計外掛程式

WordPress Plugin Blocks CSS 透過這一個外掛程式的設計,喜歡式樣設計的朋友,可以很輕鬆的為文章或是頁面內容作變化,提供訪客更棒的閱讀體驗。很多 WordPress 網站的管理者,對於內建編輯器的樣式設計很不滿意,一些小小的樣式修改都需要花費很大的功夫。今天分享的這一個外掛程式,對於 CSS 設計語法瞭解的朋友,可以很容易的為區塊內的內容,建立個別的樣式設計,達到自己希望的內容展示效果。如果你也懂得使用 CSS 式樣設計語法,那麼今天分享的這一個外掛程式不要錯過了。

繼續閱讀

WordPress Blocks Order – 手機區塊排序設計

WordPress Blocks Order 透過簡單的式樣設計,讓手機上區塊排序的設計,更符合訪的的閱讀習慣,創造更好的閱讀體驗。使用區塊編輯器來編輯 WordPress 文章內容,已經越來越受到大家的喜愛。也因為如此文章內容的版面設計,可以更多樣化、更吸引訪客的閱讀。以今天要分享的式樣小技巧來說,讓圖文區塊的排序,在手機上的展示效果,比較接近符合一般訪客的閱讀習慣,不受到區塊編輯器的排版影響,這也是我常常跟大家提到的,透過小小的改善,讓訪客的使用體驗更好,這是每位網站設計者必要的功課。

繼續閱讀

WordPress Plugin Advanced CSS Editor – 樣式編輯外掛程式

WordPress Plugin Advanced CSS Editor 這是一款讓我們可以在不同裝置,個別自訂樣式的編輯外掛程式,讓網站呈現更多樣化。目前的 WordPress 網站,通常都已經支援提供在各種行動裝置上瀏覽,這主要是因為佈景主題的設計已經完整的支援 RWD(Responsive web design)設計。這樣設計的好處,是讓我們不需要擔心,訪客在手機或是其他裝置上的瀏覽會有什麼問題。這是很好的設計,減少了一般網站管理人員設計上的困擾。不過也正因為這樣,所以如果想要做一些不同裝置間的樣式設計變化,常常不曉得要如何進行。今天分享的外掛程式,就是來幫助解決這個問題的。可以讓我們很輕鬆的在不同裝置間,設計不同的樣式,操作上也很容易,所以推薦給大家。

繼續閱讀

WordPress CSS Filter – 圖片濾鏡效果樣式設計

WordPress CSS Filter 透過式樣設計,讓圖片展示各種濾鏡效果,豐富網站的頁面設計!今天分享的 CSS 設計技巧非常有趣,不需要透過影像軟體的編輯,就可以讓圖片直接產生濾鏡效果,讓 WordPress 網頁設計變得多樣化。網站架設的過程,網頁設計也是其中很重要的一環,雖然對於很多新手朋友來說,開始透過設計語法來設計網頁,可能有些難度,不過線上的教學資源真的非常多,今天介紹的 MDN 就是一個很棒的網站,雖然中文文件還沒有很完整,不過提供這麼多免費的學習文件,仍然是一個每位網頁設計者應該到訪的網站。

繼續閱讀

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

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

繼續閱讀

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

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

繼續閱讀

WordPress Highlight Color 文字反白效果

WordPress Highlight Color 為了幫助訪客閱讀時可以集中注意,把文字反白效果變得更活潑!最近在瀏覽幾個技術文件網站時發現,大家紛紛將網站的文字反白效果,做了一些式樣式的設計,個人覺得這個小小的設計很不錯。文字閱讀比瀏覽器預設的效果,更舒服一些更活偏一些。檢視一下設計的技巧,原來也很容易,支援多數的瀏覽器,所以特別將它記錄下來跟大家分享,有興趣的朋友可以參考一下。

繼續閱讀

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

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

繼續閱讀
Loading

WordPress 網站架設指南社團

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

網站架設

WordPress 虛擬主機免費安裝設定