使用簡單的 CSS 技巧,讓 WordPress 內圖片顯示更活潑有趣

部落格已經風行多年,筆者使用過奇摩的部落格、Blogger、痞客邦,到最後選擇 wordpress ,剛開始使用NAS架設,頻寬與管理問題接踵而來,最後租用虛擬主機架設WordPress,然而文章中的圖片可以讓網站更多采多姿,提升訪客閱讀效果,以達增加網站的流量。因此許多網站會在圖片上的外框動些手腳,讓圖文並茂的閱讀介面更清爽舒適,當然這類外掛程式不少,不過此文使用簡單的 CSS 技巧,讓圖片更活潑有趣。

CSS

 

圖片邊框是最常使用的效果之一,方法很簡單,就是先透過文字編輯器開啟佈景主題的式樣檔(style.css)填入CSS語法,較新的佈景主題都有支援自訂CSS的方式,下圖是筆者使用的佈景主題來選擇自訂的「附加CSS」功能。

 

進入編輯CSS的畫面,輸入紅色框內的文字,「.it-shadow-03」是一個新的類別定義,「.」字元後面是類別名稱,儘量輸入好記得用詞。「border-radius: 6px」是圓角的弧度指定,數值越大弧度越大,筆者使用6px。「border: 1px solid #ddd」是邊框粗細與線條樣式,邊框線條筆者指定ipx,數值越大當然越粗;而soid 表示實體線(dotted 則會變虛線);#ddd 則是線的顏色代碼(可參考這裡)。

 

在編輯區上點選圖片出現圖示選單,選擇紅色框內的編輯圖示。

 

接著我們為圖片的 CSS 類別設定一個定義過的類別名稱,如筆者之前設定的 it-shadow-03,記住要點選〔更新〕才能生效喔!

 

回到網頁瀏覽隨即看到剛剛指定的圖片出現了邊框與圓角的效果。

 

其實讓不懂CSS程式碼的朋友也可以享受網頁設計的樂趣,網路這麼發達的今天,資源相當豐富,這裡介紹 一個相當棒的線上式樣產生器網站 CSSmatic例如進入網頁選「Box Shadow」來產生陰影效果

 

網站左邊是調整的項目,只要利用滑鼠移動,右側馬上就可以預覽效果,且CSS語法也隨即產生。

 

將CSS的語法複製下來。

 

進入編輯CSS的畫面,並定義一個類別名稱(如it-shadow-01),並將語法貼上如下圖紅色框所示。

 

一樣在編輯區上點選圖片選擇編輯圖示後, CSS 類別設定之前定義的it-shadow-01類別名稱,點選〔更新〕即完成。

 

下圖顯示有設定過it-shadow-01類別名稱的圖片呈現陰影,沒有設定的圖片遇到圖片是白色底時,與文字間容易產生閱讀的干擾。不懂CSS語法不用擔心,利用樣式產生器網站 CSSmatic 讓你輕鬆製作圖片陰影的效果。

 

延伸閱讀:

Bloggerads載入中~ data-matched-content-rows-num="4,2" data-matched-content-columns-num="1,2"

itwalker

或許技術與功力已遠遠不及時下年輕人,但試著去畫一個圓,圓不圓沒關係,盡力就好,如果覺得文章不錯的話,請大家按個「讚」或「+1」,感謝您的支持與鼓勵!歡迎加入我的粉絲團 : https://www.facebook.com/itwalker ,更多關於挨踢路人甲的文章: https://walker-a.com

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料