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

文章最後更新於 2020-06-05

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

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

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

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

後來參考了工具王阿璋的文章【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喔！

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

記得要邊學邊改，才有辦法學習起來唷！

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

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

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

延伸閱讀👉『俏媽咪Ｘ網站教學』Ｗordpress的YouTube的顯示打不開嗎？4招教你如何解決Ｗordpress的YouTube顯示問題！

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

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

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

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

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

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

讓更多人知道我的文章～

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

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

by 俏媽咪呆呆

如果你喜歡我的文章

請俏媽咪喝一杯咖啡（👈點這裡就可以囉） 支持俏媽咪持續寫文章分享唷！（點選圖片就可以囉）