Select Page

標籤: CSS

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

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

Read More

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

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

Read More

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

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

Read More

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

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

Read More

WordPress Highlight Color 文字反白效果

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

Read More

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

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

Read More

WordPress Sliding Underline Effect – 超連結式樣設計

WordPress Sliding Underline Effect 今天介紹的超連結式樣設計,目的在幫助站內文章提高點擊率,這是改善網站 SEO 的第一步。有使用 Yoast SEO 外掛程式的朋友,應該會感覺到最近在編輯文章時,要達到綠燈的機會越來越高,多半的原因是因為 SEO 針對文章內容的設計提示,越來越容易讓編輯者檢視並進行修改。如果您的網站經營一段時間,發覺自己網站的文章內容點擊率沒有顯著提升,那麼我們建議您透過 Yoast SEO 外掛程式的設計協助,可以逐步改善網站文章內容的點擊成效。今天分享的文章重點不是 SEO 外掛程式的說明,而是其中的一項功能 internal links 站內連結,透過超連結的式樣設計,進一步達到提升站內其他文章內容的點閱率。

Read More

WordPress Gradient Text – 文字顏色漸層變化式樣

WordPress Gradient Text 在網頁展示文字顏色漸層變化式樣,讓活動頁面的效果更加精彩。今天跟大家分享的一個式樣技巧,我個人非常喜歡。就是透過在 WordPress 網站的分頁,製作活動頁面時,活動頁面標題或是活動訊息,透過式樣設計變化字體的顏色,不是製作圖像,可以讓頁面更活潑,更吸引訪客的目光。另外透過式樣設計(CSS),檔案小執行效率也會好,不需要多增加網頁的圖檔,目前也適用多數的瀏覽器,所以分享給大家,您可以在下列看見展示的預覽圖片,有興趣的朋友可以參考一下。

Read More

WordPress Link Hover Effects – 文章連結效果

WordPress Link Hover Effects 透過增加網站內容文章連結效果,提升訪客對於網站的閱覽。架設 WordPress 網站這麼長時間以來,一直希望網站的文章內容,可以幫助訪客獲得最好的閱讀效果,所以文章內容中帶到的連結,沒有使用連結式樣效果,與內文設計一體。但是最近兩年觀察下來,很多訪客對於文章的閱讀比較沒有耐心,忽略了文章中提到的相關訊息,因此重複性的問題一直出現在詢問的信件中。所以從 8 月份開始,網站文章內容中提到的連結,新增加了顏色漸進的效果,重點式的標示出文章相關資訊連結,希望透過這樣的修改,讓訪客可以更清楚的取得更完整的教學資訊。

Read More

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

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

Read More

WordPress Style Specific Post – 自訂單一文章頁面式樣

WordPress Style Specific Post 在指定的文章頁面套用獨特的式樣設計,讓網站的內容更加吸引訪客的注意。在 WordPress 網站修改式樣設計是一件很有趣的事情,很多時候為了客戶或是版面的需要,原先採用的佈景主題並沒有內建這些效果,通常我們會透過其他的方式(例如編寫進子佈景主題)來帶入這些特別的式樣效果。這樣的設計方式有個很大的好處就是,不會因為佈景主題版本更新,造成這些式樣設計被覆蓋,在這裡的文章可以看到我常常推薦大家使用子佈景主題。而今天要分享的式樣設計技巧則是更進一步,只在指定的文章或是頁面才會套用這些效果,可以說是讓我們的式樣設計可以更靈活更多樣化。

Read More

WordPress CSS Image Hover – 圖片特效式樣設計

WordPress CSS Image Hover 不裝外掛程式,也可以做成圖片特效式樣設計。我自己的 WordPress 網站內容,對於圖片的效果僅止於做些陰影讓版面有點立體感。很多朋友或是客戶的網站,對於圖片的效果需求就沒有這麼簡單,希望圖片的越多效果越好,感覺月能吸引訪客的注意。在官網上也真的可以找到很多關於圖片效果的外掛程式,不過今天我們要來分享一下,透過簡單的 CSS 式樣設計,讓訪客在瀏覽圖片時因為滑鼠經過而有一些特殊的效果,這樣的設計方式,需要一點點的網頁設計,新手朋友可以操作學習看看。

Read More
Loading

虛擬主機推薦

虛擬主機推薦

網站架設

WordPress 虛擬主機免費安裝設定