圖片編框配圖

WordPress 圖片邊框攻略

WordPress 上傳圖片後,就只是幫你上傳好放在一邊而已。

如下面這張圖片

green trees on brown sand beach
Photo by Jess Vide on Pexels.com

如果想要套上美美圖片外框我們可以怎麼做?

  • 裝外掛
  • 自己改程式碼

裝外掛我們可以很簡單的透過滑鼠,點一點就能調出美美的邊框,只是萬一 WordPress 程式更新了,而外掛又沒更新的話…那功能就會壞掉。

自己改程式碼,聽起來好像很難,或許你會說,我又不是工程師,怎麼可能會?

不用擔心

因為它真的很簡單,有下面三種方法:

  • 一次性:適用於這張圖片
  • 全域性:整個 WordPress 中的圖片都套用
  • 標籤性:同個標前使用這種風格

WordPress 一次性修改圖片邊界風格

首先點選你要改的圖片,點選”編輯HTML程式碼”

編輯HTML程式碼
編輯HTML程式碼

在這個地方 src=”https://OOOO” alt=”OOOOO” 綠色箭頭中加入 style=”border:2px #ccc solid;padding:10px;” 這段。

把圖片顯示成 HTML 程式碼
把圖片顯示成 HTML 程式碼

也就是變成

src="https://OOOO" style="border:2px #ccc solid;padding:10px;" alt="OOOOO" 

至於為什麼要這麼做,詳細完整的說明在這邊

會跳出提示,這邊選擇”轉換成 HTML”即可

轉換 HTML 程式碼
轉換 HTML 程式碼

點選”預覽”即可

最後儲存發布,出現如下圖,有沒有看到外框出現了?

Photo by Jess Vide on Pexels.com

WordPress 全域性修改圖片邊界風格

如果要一張一張圖片這樣改,想必會改到天荒地老。有沒有辦法預設就讓所有圖片都改成我要的樣式?

有的,只要我們修改主題即可。

登入 WordPress 後台,點選”外觀”->目前使用的主題中有個”自訂”按鈕->點選”附加的 CSS”即可開始修改。

WordPress 後台示意圖
WordPress 後台示意圖
選擇附加的 CSS
選擇附加的 CSS
貼上程式碼
貼上程式碼

貼上以下程式碼,點選”發佈”即可。

.wp-block-image img {
border: 1px solid #ccc ;
padding: 5px;
border-radius: 10px;
}

修改成功後,風格如紅框處,下面那張圖則是單張圖修改的風格,由此可見,一次性單張圖片的風格,可覆蓋掉全域性的風格。

如果想要有更多的風格參考選擇,可以點我還有我參考。

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *