首頁 >>  20.自訂樣板

關於自訂樣板

從部落格管理畫面的「樣板設定」中,可以自訂自己喜愛的樣板。
在此就自訂的方法加以說明。
關於樣板的使用參數一覽請由此參照

樣板

文字的變更 背景的變更

在圖片加邊框(基本、應用)

2欄位、3欄位配置、網頁的置中

計數器的設置

訪問分析的設置

由於自訂樣板不在FC2的服務範圍內,因此如果自訂樣板發生毀壞或是無法顯示等問題時,請再次重新下載樣板。

>> 繼續閱讀 「關於自訂樣板」

△回到頂部

【PC版】自訂樣板

在FC2部落格裡已經預先準備的多種樣板。
另外若具備HTML和CSS的知識,也可以加以編輯變換樣板的設計。

官方樣板設計例圖

eg1.jpg  

什麼是HTML和CSS(樣式單)?

可自訂化的檔案大致可分為HTML和CSS兩類。
HTML為記述部落格內容的構造,CSS則為部落格的設計。例如:如要變更顯示的內容時則變更HTML,如要變更文字的大小或是背景顏色,則需變更CSS。
經由共享樣板和自訂樣板所變更後的官方樣板將不在服務範圍內。
如有共享樣板的相關問題請直接詢問該樣板的作者。

實際編輯樣板

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

官方樣板「white style」

eg2.png

登入管理畫面後>樣板設定>新增FC2樣板頁面上,下載「white style」並套用。
(在「搜尋FC2樣板」的「名稱」欄中輸入「white style」搜尋即可馬上顯示)
其他的樣板有可能配置會不同。

編輯樣板前!
在編輯樣板前,建議您先複製樣板。如此一來若是在編輯時發生錯誤,而導致無法得知錯誤的部分時,可以將原本的樣板調出做比較確認。
關於樣板的複製,請參照編輯樣板

自訂的方法

文字的變更 背景的變更

在圖片加邊框(基本、應用)

2欄位、3欄位配置、網頁的置中

計數器的設置

訪問分析的設置







>> 繼續閱讀 「【PC版】自訂樣板」

△回到頂部

文字的變更 背景的變更

以下將以官方樣板的「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
圖片與其他內容一起展開。

>> 繼續閱讀 「文字的變更 背景的變更」

△回到頂部

在圖片加邊框(基本、應用)

幫部落格文章中的圖片加上邊框吧!
用戶可以套用的樣式將文章中的圖片加上框線。

此篇說明將以官方樣板的「white_style」為例。




>> 繼續閱讀 「在圖片加邊框(基本、應用)」

△回到頂部

2欄位、3欄位配置、網頁的置中

什麼是欄位?

「欄位」即為設定部落格有幾列的顯示方式。

將邊攔設置在兩側稱為3欄位、只設置在一邊稱為2欄位,不分割邊攔而僅只在中央的設置稱為1欄位。
其他尚有不規則的欄位配置。
(2欄位、3欄位的製作說明將以樣板「white_style」為例)

2欄位配置的製作

在此說明在官方樣板上也很熟悉的2欄位配置的製作方法。
製作的方法有很多種,但以下就比較簡單的概括內容來介紹。

layout-2_201411141500432d3.gif 

●樣式單部分(CSS)
/* Default
------------------------------------------------- */

body {
text-align: center; /* This centers text. */
}

/* Layout
------------------------------------------------------------ */

#container {
width: 740px; /* Set the width of content */
margin-left: auto; /* Automatically computes left margin */
margin-right: auto; /* Automatically computes right margin*/
text-align: center;
}

#header {
padding: 20px 20px;
}

#main {
float: left; /* Wraps the main part (entries, etc.) around the left */
width: 500px /* Set width */
}

#sidemenu {
float: right; /* Wraps side menu around right */
width: 200px; /* Set width */
}

#footer {
clear: both; /*Remove all wrap arounds */
width: 100%;

●HTML部分
<body>
<div id="container">
<div id="header">Header Contents</div>
<div id="wrap">
<div id="main">Entry Content</div>
<div id="sidemenu">Menu Contents</div>
</div>
<div id="footer">Footer Contents</div>
</div>
</body>

3欄位配置的製作

當色彩和自訂的資訊量增加時,設置3欄位將會更加便利。
只要調整前述的2欄位配置,即可製作出來。

layout-3_20141114150045021.gif 

●樣式單部分(CSS)
/* Default
------------------------------------------------- */

body {
text-align: center; /* Centrally Align Text */
}

/* Layout
------------------------------------------------------------ */

#container {
width: 900px; /* Contents width set at 900px */
margin-left: auto; /* Automatically compute left margin */
margin-right: auto; /* Automatically compute right margin */
text-align: center;
}

#header {
padding: 20px 20px;
background-image: url("http://templates.blog.fc2.com/template/white_style/header_image.gif");
background-repeat:no-repeat;
}

#wrap {
width: 680px; /*Width set at680px(460px + 208px) */
float: left; /*Wrap main and side menu 1 around left*/
}

#main {
float: right; /* Wrap entries, etc. around right */
width: 460px !important; /* Set width*/
width /* for IE5.5 */: 500px;
margin-left: 12px; /* Set left margin */
}

#sidemenu1 {
float: left; /* Wrap side menu 1 around left */
width: 208px; /* Set width */
}

#sidemenu2 {
float: right; /* Wrap side menu 2 around right */
width: 208px; /* Set width*/
}

#footer {
clear: both; /* Remove all wrap arounds */
padding: 10px 0px;
width: 100%;

●HTML部分
<body>
<div id="container">
<div id="header">Header Content</div>
<div id="wrap">
<div id="main">Entry Content</div>
<div id="sidemenu1">Menu Content</div>
</div>
<div id="sidemenu2">Notice Board Content</div>
<div id="footer">Footer Content</div>
</div>
</body>

網頁的置中

根據樣板的不同,也有從初期開始就是置中成1欄位的配置。
在此就具代表性的方法做說明。

layout-1_20141114150042936.gif 

以最常使用的方法來說,是在塊級要素上涵蓋全體內容並自動設定邊緣,從瀏覽器的圖片大小計算出一個值,最後使左邊後右邊的邊緣相等完成置中。

●樣式單部分 (CSS)
/* Layout
------------------------------------------------------------ */

#container {
width: 900px; /* Set Contents width to 900px */
margin-left: auto; /* Automatically compute left margin */
margin-right: auto; /* Automatically compute right margin*/

●HTML部分
<body>
<div id="container">
Enter contents parts of entries or menus
</div>
</body>

             

>> 繼續閱讀 「2欄位、3欄位配置、網頁的置中」

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