關於自訂樣板

20.自訂樣板

01 /13 2015

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

樣板

文字的變更背景的變更

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

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

計數器的設置

訪問分析的設置

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

【PC版】自訂樣板

20.自訂樣板

01 /13 2015

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

▼官方樣板設計例圖

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

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

實際編輯樣板

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

▼官方樣板「white style」

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

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

自訂的方法

文字的變更背景的變更

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

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

計數器的設置

訪問分析的設置

文字的變更背景的變更

20.自訂樣板

01 /13 2015

以下將以官方樣板的「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的要素(標籤)上。
下列以選擇器為例，來確認看看選擇器如何指定。

▼選擇器範例

上圖中，橘色為「選擇器」，水藍色為「內容」，藍色為「值」。

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

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

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

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

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

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

變更文章本文的文字顏色

將文章本文展開後所顯示FC2部落格的單獨標籤為<%topentry_body></strong> <%topentry_body>
下圖中的黃色部分。
▼編輯HTML

包含此標籤的母要素為 <div class="entry_body">
(圖中紅色部分)

▼樣式單變更編輯前

現在來嘗試將文章內文設定成紅色。將下列輸入至圖中所標示的[overflow:hidden] 下方。
color : #FF0000; /
▼樣式單變更編輯後

如此一來即完成文字顏色的變更。可以利用選擇器來縮小適用的條件範圍。

變更連結的顏色

連結顏色的設定，可以使用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內容。
在下圖中的紅色框框部分的值，請依照樣式單上的書寫形式任意指定顏色。

變更背景圖片

背景圖片的設定為使用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
圖片與其他內容一起展開。

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

20.自訂樣板

01 /16 2015

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

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

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

20.自訂樣板

01 /19 2015

什麼是欄位？

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

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

2欄位配置的製作

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

●樣式單部分(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欄位配置，即可製作出來。

●樣式單部分(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欄位的配置。
在此就具代表性的方法做說明。

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

●樣式單部分 (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>