首頁 >>  20.自訂樣板 > 文字的變更 背景的變更

文字的變更 背景的變更

以下將以官方樣板的「white style」為例做說明。

變更文字大小

欲變更文字大小時,也可以簡單修正CSS。在此以變更「部落格標題」的大小為例。
在HTML的編輯上,尋找記述標題的部分。
以下為有記述標題部分的標籤。

<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>

標題部分為前後<h1>所涵蓋的部分。
若將所涵蓋的部分加以設定,則可以變更文字的大小。

h1 { font-size: 180%; }

請試著在實際的樣板中,找出<h1>的範圍。指定在「font-size:」後面的實數值+單位、%值、關鍵字等。

實數值+單位
在數值上加上單位指定文字大小。無法指定負數值。
單位有px, ex, em, in, cm, mm, pt, pc等。

%值
以對應母要素的文字大小的百分比來指定文字大小。

關鍵字
以七階段的關鍵字來指定文字大小。
xx-small | x-small | small | medium | large | x-large | xx-large
以對應母要素的文字大小的關鍵字,來個別指定縮小一階段或是放大文字。
smaller | larger

根據瀏覽器種類的設定,使用pt或是px等單位來指定文字大小時,用戶方將無法變更文字大小。
因為這些單位將可能會剝奪「必要時變更文字大小」的功能,因此建議您使用em或是%來設定文字大小。

變更文字顏色

欲變更文字顏色時,在對應的要素中設定顏色內容即可變更。
在CSS上好有幾種方法可以指定顏色,但通常所使用的顏色編碼為[# 和6個字元] [# 和3個字元]。
在變更文字顏色時,請先決定要使用何種顏色編碼(顏色)。

以下範例將說明如何同時變更網站全體的文字顏色,和只變更本文的顏色。
進行網站全體的變更時,請套用最上位要素的HTML,html(body)。

HTML的要素和親子關係

HTML全體(親)

<html>
<head>
<meta>
<title></title>
</head>
<body>
<h1></h1>
<p></p>
<address></address>
</body>
</html>

<body>內的樣式設定(子)

body {
background-color: #FFFFFF;
color: #666666;
}
變更「color: #666666;」的數字部分後即可變更網站全體的文字顏色
(例:設定為「#000000」時,文字將變為黑色)

那麼如果要將本文設為黑色,文章標題設為紅色時該如何進行變更呢?以下為您解說選擇器的使用方法。

基本選擇器

什麼是選擇器?
選擇器即為指定何種樣式適用於HTML的要素(標籤)上。
下列以選擇器為例,來確認看看選擇器如何指定。

選擇器範例
2014111208472009e.jpg 
上圖中,橘色為「選擇器」,水藍色為「內容」,藍色為「值」。

「內容」為指定「適用何種樣式」、「值」為指定「適用樣式的具體內容」,因此依照上面的選擇器的範例,在<h1>的標籤裡,將為指定「顏色內容」是「值#FFFFFF」的意思。在此可以利用逗號區隔指定複數。

要素名
h1 { ... }
將樣式套用在指名標籤名稱的要素上

(星號)
*.MyClass { ... }
*#MyID { ... }
將樣式套用在所有要素上

要素名#名稱
p#MyID { ... }
將樣式套用在該要素中所指定的識別(ID)屬性的要素上。

要素名・名稱
p.MyID { ... }
將樣式套用在該要素中所指定的class屬性的要素上。

以此為例,來試試看變更文章本文的文字顏色吧。

變更文章本文的文字顏色

將文章本文展開後所顯示FC2部落格的單獨標籤為<%topentry_body></strong> <%topentry_body>
下圖中的黃色部分。
編輯HTML
fontsize1.png 
包含此標籤的母要素為
 <div class="entry_body">
(圖中紅色部分)


樣式單變更編輯前
b2014003.png  

現在來嘗試將文章內文設定成紅色。將下列輸入至圖中所標示的[overflow:hidden] 下方。
color : #FF0000; /
樣式單變更編輯後
fontsize2.png 
如此一來即完成文字顏色的變更。可以利用選擇器來縮小適用的條件範圍。

變更連結的顏色

連結顏色的設定,可以使用pseudo class來進行設定。
當在設定 :hover pseudo class時,請務必注意順序(link > visited > hover > active)。
若順序有誤時將無法正確顯示結果。

要素名:link
適用於未被閱覽的連結(未產生Cache)

要素名:visited
適用於已經被閱覽的連結(已產生Cache)

要素名:hover
適用於當用戶將滑鼠游標放置在該要素上,或是當沒有在活動中狀態時。

要素名:active
適用於當用戶將該要素設為活動中狀態。

設定頁面全體的連結時


a:link {color : #f60; /* Non-viewed links become orange */}


a:visited {color : #00f; /* Viewed links become dark blue */}


a:hover {color : #f00; /* Link becomes red when the mouse cursor is moved over.*/}


a:active {color : #f00; /* Active link becomes red */}
設定所指定特定等級的連結


a.MyClass:link {color : #f60; /* Non-viewed link becomes orange. */}


a.MyClass:visited {color : #00f; /*Viewed link becomes dark blue. */}


a.MyClass:hover {color : #f00; /*Link turns red when mouse is moved over. */}


a.MyClass:active {color : #f00; /* Link colour is red when active. */}
設定所指定有包含特定等級的連結

MyClass a:link {color : #f60; /* Non-viewed link becomes orange */}


.MyClass a:visited {color : #00f; /*Viewed link becomes dark blue */}


.MyClass a:hover {color : #f00; /* Link becomes red when mouse is moved over. */}


.MyClass a:active {color : #f00; /* Link turns red when active. */}}

變更背景


變更背景色

背景顏色和背景圖片皆可在樣式單中簡單地做變更。
請在該要素上套用background內容。
全體的變更以及部份的變更請參照前面所敘述的選擇器說明。

背景色的設定為使用background-color內容。
在下圖中的紅色框框部分的值,請依照樣式單上的書寫形式任意指定顏色。
fontsize4.png 

變更背景圖片

背景圖片的設定為使用background-image內容。
圖片的排列方式以及顯示位置等,可在background-repeat內容和background-position內容設定。

body {
background-image : url("Image URL”); /* Sets the background image */
background-repeat : repeat; /* Set images as tiles */
background-position : left top; /* Set the image position to the left of the screen */
background-attachment : fixed; /* Fixating the background image position */
}

圖片的排列方法

repeat
背景圖片只往橫向重複排列。

repeat-y
背景圖片只往縱向重複排列。

no-repeat
背景圖片僅以單一顯示。

圖片的顯示位置

實數值+單位
用數值來設定間隔,指定橫向或縱向的開始位置。
單位為px, em, ex, in, cm, mm, pt, pc。

%值
用%來設定間隔,指定橫向或縱向的開始位置。

left | center | right
top | center | bottom
用關鍵字來設定間隔,指定橫向或縱向的開始位置。
指定順序並無特別限制。

圖片的固定配置

fixed
固定背景圖片的位置。

scroll
圖片與其他內容一起展開。

 
△回到頂部
搜尋欄
Q&A
使用說明
FC2計數器
RSS連結