【部落格樣式指南】002 如何一鍵更改樣式顏色？ - 好康爆報

【部落格樣式指南】002 如何一鍵更改樣式顏色？

閱讀數: 3
字體大小設置: 16px

前言

已經套用CSS樣式後，想要調整顏色？沒問題！

程式碼顏色使用變數的地方可一鍵更改主題色。

示範主題：CSS樣式：粉藍夢境系｜漸層風格｜2欄

選顏色預覽S.gif

三步驟更改主題色開始

①挑顏色：

頁面任一地方 右鍵＞檢查 (F12)，找到 元素>html標籤>root區塊 。

改樣式右鍵檢查

找root.png

 

 

②複製目標色碼：

找到想更改的變數顏色、挑選喜歡的顏色。

選顏色S

 

③更改樣式色碼：👉 儲存前請先預覽看看效果

後台>樣式管理>部落格 CSS 原始碼 搜尋(Ctrl + F ) 到 root 開頭的段落，取代的目標變數色碼。

複製目標色.png

 

其他變數名稱可參考各篇樣式的 📑 主要設計> ②【主要使用顏色】表格
變數名稱 色碼 預覽 說明
--primary-color  #0080ff
 
 網站主要顏色
--primary-light-color  #8ccfff
 
 漸層的藍色
--secondary-color #ff4793
 
 上方標題漸層色、文章標題滑動效果線
--secondary-light-color #ffdbea
 
 漸層的粉色
--main-text-color #555
 
 內文的字體顏色
--side-text-color #888
 
 內文的淺色
--light-gray-color #f9f9f9
 
 灰底顏色

 

Do Re Mi So ~ 大功告成

【部落格樣式指南】002 如何一鍵更改樣式顏色？

 

上一篇: ChatGPT 日本語の使い方ガイド – 日本語での活用法 下一篇: 感想文-演員桌曆-井內悠陽

網站公告:

用戶註冊時，上傳的內容需為原創或已獲授權，如若被侵權，請連繫平台管理者，且平台會盡速移除下架該內容。

聯絡我們

信箱:zonchits@gmail.com