❤ Joys & Lu 的生活雜誌 ❤

親愛的大家好  當我們在創作屬於我們自己的部落格時，常常都會想要幫心愛的部落格換一

件新衣服，也就是給它一個漂亮的版面啦。但我們大部分所使用的都是大眾的板所以一些小

細節也是一樣的，這時就要靠我們的巧手來改編囉 在這個主題上會有一系列的教學 ，也是

為我自己的學習做下一些紀錄(我也是辛苦拜託 GOOGLE大神教我的喔)，所以難度上也是適

合沒有基礎的人學習的，希望大家看完也可以為自己的部落格換一件漂亮的衣賞喔

------------------------------------------------------------------------------------------

第一單元 基礎CSS修改示範

接下來我會直接從頭到尾示範怎修改一個小區塊，第一次接觸的人或許會有許多的不懂 ，一

些動作會不知道是為什麼，但這不用擔心跟著圖去做在思考一下就可以囉。

@這次要修改的地方是<我是joy這個介紹區塊>

以痞客邦為例我們的樣板是使用CSS去套在HTML上做出變化的， 在這邊就不提詳細的介紹

，如果想學的話就要去拜託GOOGLE大神教一下了， 所以這邊我們要知道的重點是如圖1所

示每個地方都是一個區塊，圖1我的標題JOY生活雜誌那邊是一個區塊，下面的介紹我是JOY

也是一個區塊，那我要改變這些文字的顏色行距或是大小的話就是改動這個文字屬於的區塊

，它所擁有的設定值。

圖1

步驟1

這邊很清楚的我們可以知道，在上面有提到改動區塊裡面的值，那重點就是如何找到這個區塊

我們才能改動裡面的值，這邊開始教學首先進入要改的網頁畫面也就是我們的路落格畫面並按

下鍵盤的F12 (我是用google瀏覽器Chrome)，會出現圖2的畫面，出現一大堆程式碼但我們

不要急喔因為不需要去看它們

圖2

步驟2

當我們按下F12時會彈出一個視窗看到最左邊有一個放大鏡，這是一個很重要的功能，這時

我們可以點下放大鏡之後點選我們要更改的地方就會如圖3所示該畫面呈現淺藍色的顏色，

在下面視窗則會跳到該區塊的標籤上，如圖3跳到<h2>，這時我們可以點選<h2>旁邊的

三角形就會顯示裡面的內容就可以進行確認是不是我們想要修改的區塊，但<h2>這是一

個屬於文字的標籤，在文字的地方都會用到它那我們要怎分辨是哪一個<h2>呢，我們可以

透過圖4的方式在最下方可以看到一個橫向，<h2> 是在最右邊代表它是最後一個，我們可

以依序往左點，可以看到當我們點到header這一格的時候畫面剛好包含了整個標題，這時

我們就能知道這個<我是joy的這個介紹區塊>是在header底下的<h2>

圖3

圖4

步驟3

現在知道了是在header底下的h2，接著就是到我們的管理後台的畫面了如圖5，接著依照 樣式

管理 ->自訂樣式 ->CSS原始碼編輯 ->前往，按照這個順序就可以到達圖6，調整CSS的地方

，再這個畫面按下鍵盤的Ctrl+F(這是搜尋文字的快捷鍵)，這時就會如圖7右上角的地方一樣出

現一個搜尋的欄位我們在裡面輸入剛剛在步驟2找到的位置，先輸入header就會跑到如圖7的地

方，接著在往下找一下可以看到header下方有一個banner h2 ，這不就是我們尋尋覓覓的hea

der底下的h2嗎，到這邊你幾經學會了要如何找到想修改的區塊，或許你在試的時候不會這麼順

利因為他有些會包好幾層但方法都通用只要增加你的熟練度就可以囉，繼續看步驟4來看我們辛

苦的成果囉

圖5 

圖6

圖7

圖8

步驟4

這邊先參考圖8 在#banner h2{} 括弧裡面可以看到很多數值，這就是一開始提到的區塊

的顯示數值，所以我們在這邊做更改的話就可以改變我們顯示的畫面， 這裡面有很多不同

的數值以後會再做介紹， 我們先改變一個簡單的數值來嘗嘗學習的成果吧。看到上面圖8

我們color:#000;這一行很簡單就可以想到是一個關於顏色的數值，#000是一個顏色色碼

，我們從這邊進行修改，把它改成#d52751這個數值接著就來看看我們的成果吧。圖9的

我是joy介紹區塊是不是如願變成了其他顏色呢

圖9

後記

這邊講解得比較詳細一點，因為在學習的過程中很多網站都會需要有一些基礎，對於從零

到有的過程會比較少著墨，所以希望能透過我的學習心得，讓大家可以從零到有的去做更

改，這邊寫到的是基本的用法但在修改的過程中，會碰到許多的變化，這些就是要靠經驗

的累積了，我也還在繼續努力中，如果有新的學習會在分享囉，我們下次見