教你如何更改3個常用CSS讓你輕鬆上手簡單教學!

文章最後更新於

相信很多新手在架設網站的時候會碰到一個問題!

就是要動手一段一段修改標題和字形大小

俏媽咪我有段時間也是啊!

一段一段修改,遇到有連結的網站還要一個一個案外部連結,有時候還會忘記!導致俏媽咪我寫一篇文章要花超久時間!

後來參考了工具王阿璋的文章【WordPress教學】如何自訂WordPress語法?6個程式碼片段範例教學解救了我的問題!

真的很感謝工具王阿璋學長~

現在俏媽咪我用最簡單的方式一步一步教你如何更改標題、字型大小及自動跳出連結喔!

下載外掛

在外掛那先下載外掛Code Sneppets,才有把辦法做後續的動作唷!

更改標題

add_action('wp_head',function(){ ?>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');
        body {font-family: 'Noto Sans TC', sans-serif;}/*思源黑體*/
                                 
        .entry-content h2
        {
            background-color:#eeeeee; /* 背景顏色 #eeeeee */
            border-left:5px solid orange; /*左側框線寬度(5px)、顏色(green)*/
            padding:5px;/*內距(5px)*/
            vertical-align:middle; /*垂直置中*/
            font-weight:bold; /*粗體*/
        }
                                 
        .entry-content h3
        {
            color: #ff5050; /*文字顏色*/
            font-weight:bold; /*粗體*/
         
        }
                                 
        .entry-content h4
        {
            color: #933fff; /*文字顏色*/
            font-weight:bold; /*粗體*/
        }
                                 
    </style>
<?php }); 

請把上面的程式碼複製起來再照著我下面的步驟一步一步走唷!

新增程式碼

複製程式碼

填寫標題

儲存

打開

新增文章測試

預覽

更改字型大小、間距、顏色

我是直接把這程式碼放在標題下面

所以就沒有再另外新增程式碼喔!

程式碼

add_action('wp_footer',function(){ ?>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');
        body {font-family: 'Noto Sans TC', sans-serif;}/*思源黑體*/
		li {font-size:20px;}
		
                                 
		.entry-content h2
		{
			background-color:#d0d0d0; /* 背景顏色 #eeeeee */
			border-left:10px solid orange; /*左側框線寬度(5px)、顏色(green)*/
			padding:0.5rem;/*內距(5px)*/
			vertical-align:middle; /*垂直置中*/
			font-weight:bold; /*粗體*/
		}
								
		.entry-content h3
		{
			color: #ff5050; /*文字顏色*/
			font-weight:bold; /*粗體*/
			//background-color: #4bf18d94;
			//vertical-align:middle; /*垂直置中*/
			//padding:5px;/*內距(5px)*/
		
		}
								
		.entry-content h4
		{
			color: #933fff; /*文字顏色*/
			font-weight:bold; /*粗體*/
			//font-size: 1.2rem;
			
		}
    </style>
<?php }); 

複製程式碼

測試

預覽

跳出連結

程式碼

add_action( 'wp_head', function () { ?>
    <script>
          window.onload = function() {
            var links = document.links;
            for (var i = 0, linksLength = links.length; i < linksLength; i++) {
              if (links[i].hostname != window.location.hostname) {
                links[i].target = '_blank';
              }
            }
          }
    </script>
<?php } );

新增程式碼

複製程式碼

填寫標題

儲存

打開

測試

預覽

完成

學習網站

大師班

如果你想學架設網站,記得加入JERRY聯盟大師班課程!

手把手教你如何架設網站唷!

程式碼

如果你還想學如何修改CSS,可以參考這兩個網站,就有你想要的答案

  1. 參考工具王阿璋
  2. 參考CSS邊寬

後記

這樣就大功告成囉!

是不是沒有想像中的難呢!

一開始俏媽咪我也覺得程式碼?🤨🤨🤨

這麼難的東西我怎麼可能會!😫😫😫

但為了不想這樣一個一個改,所以我硬著頭皮到工具王阿彰學長的網站

學了一個下午,終於學起來,也弄好了!

只要有心學,有心看,你也可以唷!

如果你不喜歡預設的顏色,可以參考CSS邊寬,這裡有教你很多顏色或文字的CSS喔!

以上是俏媽咪我個人學習經驗,你都筆記起來了嗎?

記得要邊學邊改,才有辦法學習起來唷!

如果你有想要學架設網站的其他程式,看別人的網站又看不懂的

歡迎底下留言告訴俏媽咪!

俏媽咪會為了你而去學,再用最簡單的方始一步一步教你!

延伸閱讀👉『俏媽咪X網站教學』Wordpress的YouTube的顯示打不開嗎?4招教你如何解決Wordpress的YouTube顯示問題!

延伸閱讀👉『俏媽咪X網站教學』如何使用Canva製圖?1招教你輕鬆使用、快速上手Canva!

本文程式碼源自工具王阿璋,感謝工具王阿璋提供!

如果你還沒有註冊按讚公賞,可以點選下面註冊
再幫我按拍手五下給我鼓勵唷~謝謝!!

如果你對文章有任何疑問或想要分享,

可以在底下留言或來信讓我知道!

如果你喜歡我的文章,記得幫我按分享鈕

讓更多人知道我的文章~

還沒訂閱部落格的你,記得在右下角填入信箱

就可以收到我最新文章的通知。

by 俏媽咪呆呆

8 thoughts on “教你如何更改3個常用CSS讓你輕鬆上手簡單教學!”

  1. 你好,看了你的網站,覺得你的文字排版很舒服,有用妳教的CSS語法,我想把我的網站間距還有一般文字大小改成跟你一樣,要從哪裡更改呢?

    如果留言不夠妳說的話,方便寄電子信箱給我,摸索了一個上午,都在原地打轉,想請你指導下,麻煩

  2. 你好,我按照你的方式執行
    可是文章的字體大小沒有變動
    請問是哪裡分發生問題
    還是佈景主題的問題

    1. 請問你是用程式碼片段的外掛嗎?我這個是用程式碼外掛,如果是主題直接改的話就是要看佈景主題了唷~

        1. add_action(‘wp_footer’,function(){ ?>

發表迴響

%d 位部落客按了讚: