電腦王阿達
  • 首頁
  • 科技新聞
    • 最新科技新聞
    • AI 新聞與教學
      • AI 工具分享與教學
      • AI 趨勢與相關新聞
    • 產品評測
      • GPS/行車記錄器評測
      • iOS周邊
      • Android周邊
    • 科技廠商專訪報導
    • 電腦硬體周邊情報
    • 相機
  • 酷品開箱
  • 通訊達人
    • 電腦王阿達測速工具
  • APP/軟體/教學
    • 電腦應用與其他教學
      • 網路與軟體應用
      • 多媒體轉檔/運用
      • 其他文章
    • 跨平台App
    • iPhone/iPad相關
      • iPhone/iPad 軟體介紹
      • iPhone/iPad 使用教學
      • iOS JB/CYDIA應用
    • Android相關資訊
      • Android App分享介紹
      • Android 基礎教學
      • 智慧手機韌體更新
      • Windows Mobile手機相關文章
    • Mac 軟體分享與教學
    • LINE
    • Telegram
    • 攝影教學
    • 語文學習
    • 轉貼好文
    • WordPress 架站教學分享
    • 未分類文章
  • 休閒/懶人包
    • 新聞台直播 頻道大集合!想看新聞不用辦第四台!
    • 遊戲電玩
    • 動漫、玩具、敗家
      • 老弟紙模型作品集
    • KUSO
      • 有趣影片
    • 圖文創作
    • 生活與旅遊
    • 超好用懶人包
    • 最新抽獎情報公告
    • Pokemon GO攻略
  • 電腦王團隊
No Result
View All Result
  • 首頁
  • 科技新聞
    • 最新科技新聞
    • AI 新聞與教學
      • AI 工具分享與教學
      • AI 趨勢與相關新聞
    • 產品評測
      • GPS/行車記錄器評測
      • iOS周邊
      • Android周邊
    • 科技廠商專訪報導
    • 電腦硬體周邊情報
    • 相機
  • 酷品開箱
  • 通訊達人
    • 電腦王阿達測速工具
  • APP/軟體/教學
    • 電腦應用與其他教學
      • 網路與軟體應用
      • 多媒體轉檔/運用
      • 其他文章
    • 跨平台App
    • iPhone/iPad相關
      • iPhone/iPad 軟體介紹
      • iPhone/iPad 使用教學
      • iOS JB/CYDIA應用
    • Android相關資訊
      • Android App分享介紹
      • Android 基礎教學
      • 智慧手機韌體更新
      • Windows Mobile手機相關文章
    • Mac 軟體分享與教學
    • LINE
    • Telegram
    • 攝影教學
    • 語文學習
    • 轉貼好文
    • WordPress 架站教學分享
    • 未分類文章
  • 休閒/懶人包
    • 新聞台直播 頻道大集合!想看新聞不用辦第四台!
    • 遊戲電玩
    • 動漫、玩具、敗家
      • 老弟紙模型作品集
    • KUSO
      • 有趣影片
    • 圖文創作
    • 生活與旅遊
    • 超好用懶人包
    • 最新抽獎情報公告
    • Pokemon GO攻略
  • 電腦王團隊
No Result
View All Result
電腦王阿達
No Result
View All Result

首頁 » 最新科技新聞與報導 » 電腦應用與其他教學 » WordPress 架站教學分享

WordPress 圖片加上黑邊框線,透過圖片的 CSS 類別輕鬆設定完成

李介介 by 李介介
2017 年 08 月 27 日
in WordPress 架站教學分享
讀取中...

Wordpress 圖片加上黑邊框線,透過圖片的 CSS 類別輕鬆設定完成 - 電腦王阿達

WordPress 將圖片加上黑邊框線,可以幫助網站使用者的閱讀,上圖左邊是沒有框線,遇到圖片是白底時,圖片的文字會干擾閱讀,很容易造成使用者在閱讀上的不連續,右邊在圖片上用一個黑框,讓讀者很明確的知道這是一張圖,圖片的範圍到哪裡,圖片上的文字不是我打的教學文,黑框的下面才是我打的教學文,還有若單純只加上黑線,四邊會有尖銳的角出現,所以改成小圓角的方式,可以修飾這樣強烈的視覺衝突感,讀文章時會比較輕鬆一點,另外框線避免用純黑色的,因為太深的黑色會干擾到圖片內的圖文,搶過圖片的主題,所以我選擇淺灰色的線,降低干擾,使圖片與框線可以更和諧一點,製作的方法很簡單

 

Wordpress 圖片加上黑邊框線,透過圖片的 CSS 類別輕鬆設定完成 - 電腦王阿達

首先登入 WordPress 的管理後台,進入 外觀 > 編輯CSS 的頁面

這個編輯CSS頁面是 WordPress 額外讓使用者可以額外增加 CSS 的代碼,當佈景主題更新時,這個附加的 CSS 頁面的語法就不會被更新擋覆蓋了

 

 

Wordpress 圖片加上黑邊框線,透過圖片的 CSS 類別輕鬆設定完成 - 電腦王阿達

在這個附加的 CSS 頁面將下方的 CSS 語法複製並貼在圖片上的位置

.jieimg {
border-radius: 8px;
border: 1px solid #ddd;
}

 

 

 

Wordpress 圖片加上黑邊框線,透過圖片的 CSS 類別輕鬆設定完成 - 電腦王阿達

接下來在 WordPress 的文章編輯模式中,在圖片上面用滑鼠點一下,就會出現圖片的功能視窗,點擊鉛筆符號的編輯按鈕

 

Wordpress 圖片加上黑邊框線,透過圖片的 CSS 類別輕鬆設定完成 - 電腦王阿達  

來到了圖片編輯視窗,直接在「圖片的 CSS 類別」欄位輸入「jieimg」

 

Wordpress 圖片加上黑邊框線,透過圖片的 CSS 類別輕鬆設定完成 - 電腦王阿達

 

最後文章發佈後,圖片就會變成上面這樣,有圓角邊線的樣子

 

後記:圖片 CSS 代碼的延伸變化

.jieimg {
border-radius: 8px;
border: 1px solid #ddd;
}

其實這段語法還可自由調整修改,修改的方式與中文說明如下:

jieimg 【代號而已,可任意輸入好記得用詞】

8px 【圓角的弧度,數值越大弧度越大】

1px 【邊框線的粗細,數值越大越粗】

soid 【帶表實體線,輸入 dotted 則會變虛線】

#ddd【邊線的顏色代碼,代碼可參考此網站】

 

邊線的風格樣式,除實線與虛線還有以下種類:

solid 「實線框」
dotted「點線框」
dashed「分段線」
double「雙線框」
groove「立體內凸框」
ridge「立體浮凸框」
inset「凹框」
outset「凸框」

 

Wordpress 圖片加上黑邊框線,透過圖片的 CSS 類別輕鬆設定完成 - 電腦王阿達

Tags: WordPress

您也許會喜歡:

立達合法徵信社-讓您安心的選擇

網站搜尋

No Result
View All Result

廣告


歡迎手機廠商、iPhone 周邊產品業者、APP軟體開發商洽談合作或產品測試事宜 koc koc.com.tw |隱私政策 |主機維護:Fast Line 台灣速連,阿腸數位科技

No Result
View All Result
  • 最新科技新聞
  • 最新科技產品報導
    • 3C產品開箱/廠商邀測
      • GPS/行車記錄器評測
    • 科技廠商專訪報導
      • 專題報導
    • 電腦硬體周邊情報
    • Android周邊
    • iOS周邊
  • 好用App介紹
    • Android App分享介紹
      • Android 基礎教學
    • iPhone/iPad 軟體介紹
      • iPhone/iPad 使用教學
      • iOS JB教學
      • iOS軟體與JB相關文章
      • iOS JB/CYDIA應用
    • 跨平台App
  • 通訊達人
  • Telegram
  • 電腦應用與其他教學
    • Mac OS 軟體分享與教學
    • 網路與軟體應用
    • WordPress 架站教學分享
    • 多媒體轉檔/運用
    • 語文學習
    • 轉貼好文
    • 其他文章
  • 旅遊與美食
    • 生活與旅遊
    • 圖文創作
    • 有趣影片
    • 動漫、玩具、敗家
    • 老弟紙模型作品集
    • KUSO
    • 阿達玩App
    • Pokemon Go攻略
  • 超好用懶人包
  • 電腦王阿達網路測速
  • 電腦王阿達團隊

歡迎手機廠商、iPhone 周邊產品業者、APP軟體開發商洽談合作或產品測試事宜 koc koc.com.tw |隱私政策 |主機維護:Fast Line 台灣速連,阿腸數位科技

No Result
View All Result
  • 最新科技新聞
  • 最新科技產品報導
    • 3C產品開箱/廠商邀測
      • GPS/行車記錄器評測
    • 科技廠商專訪報導
      • 專題報導
    • 電腦硬體周邊情報
    • Android周邊
    • iOS周邊
  • 好用App介紹
    • Android App分享介紹
      • Android 基礎教學
    • iPhone/iPad 軟體介紹
      • iPhone/iPad 使用教學
      • iOS JB教學
      • iOS軟體與JB相關文章
      • iOS JB/CYDIA應用
    • 跨平台App
  • 通訊達人
  • Telegram
  • 電腦應用與其他教學
    • Mac OS 軟體分享與教學
    • 網路與軟體應用
    • WordPress 架站教學分享
    • 多媒體轉檔/運用
    • 語文學習
    • 轉貼好文
    • 其他文章
  • 旅遊與美食
    • 生活與旅遊
    • 圖文創作
    • 有趣影片
    • 動漫、玩具、敗家
    • 老弟紙模型作品集
    • KUSO
    • 阿達玩App
    • Pokemon Go攻略
  • 超好用懶人包
  • 電腦王阿達網路測速
  • 電腦王阿達團隊

歡迎手機廠商、iPhone 周邊產品業者、APP軟體開發商洽談合作或產品測試事宜 koc koc.com.tw |隱私政策 |主機維護:Fast Line 台灣速連,阿腸數位科技