WordPress 內嵌程式碼風格調整

如何調整 WordPress 內嵌程式碼風格呢?

目前我使用主題的 WordPress 內嵌程式碼風格如 Blocksy

但我想要把它改成 Blocksy,該怎麼設定呢

WordPress 內嵌程式碼風格可以透過附加 CSS 輕鬆完成
首先在 WordPress 後台,點選 外觀 -> 自訂
轉頁後,點選最下面 附加的CSS
增加下面的 CSS 樣式

/*內嵌程式碼顏色*/
p > code, div > code {
	/* 外框圓角 */
    border-radius: 7px;
	/* 背景顏色 */
    background: #f9f2f4;
	/* 文字顏色 */
	color: #c7254e;
	/*文字與外框間距 上下2px 左右5px*/
    padding: 2px 5px;
}

程式碼區塊都是使用 <code> 標籤
而內嵌程式碼會放在 <p><div> 標籤內
所以選擇器使 用 p > code, div > code 才不會異動到完整程式碼區塊
其餘的背景、文字顏色或間距等可以看個人喜好更動

13 則留言

  1. Excellent CSS customization guide! Small styling tweaks like these significantly improve content readability and user experience. As someone who values attention to detail in digital platforms, I appreciate this approach to enhancing WordPress presentation. See phonejoy vip for more UX-focused design inspiration.

  2. It’s great seeing platforms like JL1 prioritize user experience – elegant design and security are key! Responsible gaming is so important, and understanding how these systems work-like those reward loops-can help. Check out jl1 legit for more info on their approach! 😊

發佈留言

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