iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
0
自我挑戰組

架站好好玩-Wordpress架站和SEO優化之學習全記錄系列 第 13

第13天:『WordPress架站第八步』-附加CSS調整標題字體樣式

  • 分享至 

  • xImage
  •  

WordPress架站-附加的CSS調整標題大小

前一篇設定好分類之後,實際開啟文章分類的網頁,發現標題的字體太小,不管是電腦或是手機上閱讀都不太方便,於是開始尋找該怎麼修改標題,研究後發現可以利用WordPress的內建功能-『附加的CSS』去修改字體大小,只要將CSS語法貼到此功能的編輯頁面就能修改。

階層式樣式表(英語:Cascading Style Sheets,縮寫:CSS;又稱串樣式列表、級聯樣式表、串接樣式表、層疊樣式表)是一種用來為結構化文件(如HTML文件或XML應用)添加樣式(字型、間距和顏色等)的電腦語言

  1. 原本頁面上分類和文章標題預設的字體太小
    https://ithelp.ithome.com.tw/upload/images/20200928/20130379SvG2vUCXn8.png

  2. 按右鍵開啟檢視框架原始碼,找出要修改標題的ID

<h1 class="page-title ast-archive-title">手作教學</h1>
<h2 class="entry-title" itemprop="headline"><a href="https://mamachips.tw/mamachips-hand-made-bib-teaching/" rel="bookmark">手作圍兜教學-第一次就上手!手作兜兜製作過程大公開</a></h2>
  1. 點控制台中左邊工具列的外觀 =>自訂
    https://ithelp.ithome.com.tw/upload/images/20200928/20130379nCxNz1DHXj.png

  2. 點選自訂項目下方的附加的CSS
    https://ithelp.ithome.com.tw/upload/images/20200928/20130379rFTs3jQFg8.png

  3. 將下面CSS語法貼至附加的CSS的編輯器中
    https://ithelp.ithome.com.tw/upload/images/20200928/20130379JnwvLCWzRN.png

  4. 貼上去之後,馬上可以看到修改效果,可即時做調整
    https://ithelp.ithome.com.tw/upload/images/20200928/201303797P21sopiks.png


上一篇
第12天:『WordPress架站第七步』-新增文章分類並加入選單
下一篇
第14天:『WordPress架站第九步』-附加CSS設置社群連結Icon
系列文
架站好好玩-Wordpress架站和SEO優化之學習全記錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
wpelectrinc
iT邦新手 5 級 ‧ 2023-01-18 15:43:08

分享一下我個看法,關於標題樣式的調整我個人是比較傾向先從佈景主題內建的設定去找,如果沒有才會透過 CSS 的方式新增。至於要如何在 WordPress 新增 CSS?有推薦哪些工具?可以參考如何在 WordPress 新增 CSS?方法介紹與工具推薦這篇文章。

我要留言

立即登入留言