關於樣板

7. 樣板
05 /30 2008
部落格的樣板隨時可以變換,可自行下載樣板後設定。

何謂樣板?

一般也有版型、面板等稱呼,FC2部落格裡將表示部落格樣貌的HTML和CSS稱之為『樣板』。
樣板呈現出部落格的排版、文字大小、顏色、背景圖案等。
當您更換樣板,部落格的樣貌也隨之煥然一新,但不影響文章內容、部落格的原有設定。
(※有些樣板不支援外掛程式)
因此即使刪除樣板,文章也不會跟著被刪除,請放心。

FC2的樣板大致分爲兩種:
一種是「FC2樣板」(FC2提供的樣板),另外一種是「共享樣板」(會員自創的樣板)。
這兩種樣板,FC2會員都可以使用。
會員的自創樣板需要經過FC2工作人員的審查,合格者才可以登錄為「共享樣板」。

続きを読む

部落格的個性化設計

7. 樣板
01 /04 2013
在FC2部落格中已為用戶準備了多樣的樣版供用戶選擇。可隨意依自己的喜好更換樣版,設計出自己專屬的部落格。另外FC2部落格可以自由編寫HTML和CCS,只要用戶懂得這些便可以按照自己的想法對樣版進行編輯。

樣版的編輯方法大致可分為HTML和CCS兩種。HTML是對部落格內容的結構進行描述的文件,而CCS,而CCS則是對內容的格式進行定義的文件。例如想要變更顯示的內容時可透過修改HTML來完成,想要對文字色彩或是背景顏色的進行更改時可透過修改CSS來完成。

客服中心不受理共享樣版和已完成編輯的官方樣版等相關問題的諮詢。
有關於共享樣版的問題請直接向樣版作者進行諮詢。

此說明中所使用的樣版是名為「sample」的官方樣版。

登入部落格管理頁面>設定樣板>新增FC2樣版>在樣版名稱中輸入「sample」[sample_2]進行搜索。
*其他樣版的描述可能會與此樣版有所不同。



樣版編輯方法



1.在管理頁面的「環境設定」中選擇「設定樣版」

2.請點擊要編輯的樣版名稱後的「編輯」

3.在各個編輯欄中進行編輯後按「確定」即可保存和表示編輯過的內容

請在此查看樣版編輯頁面詳情




變更文字大小



可在CSS中輕鬆變更文字大小。請參考以下範例:如何變更標題文字大小

在HTML的編輯欄中搜索對標題部分的描述,以下為對標題進行描述的標籤


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

標題部分由定義,所以只需在CSS中對h1的字體大小進行設置便可變更文字大小。


h1{
      
font-size : 120%;
    
}

設置字體大小時,可使用實數+單位・%數・關鍵字等。

實數+單位

在数值后添加单位来指定字体大小。不可指定负值。
可用单位为px・em・ex・in・cm・mm・pt・pc等。

%數

利用父元素的字體大小的比例進行字體大小指定。

xx-small | x-small | small | medium | large | x-large | xx-large
字體大小可分為7個等級。

smaller | larger
可為主要元素的字體大小指定更小或更大的字體。

根據瀏覽器的種類或設定的不同,譬如在指定字體大小時使用pt或px等絕對單位時,用戶可能無法對字體的大小進行變更。指定字體大小時,請盡量使用em或%等相對單位,這樣用戶可依照需要調整字體大小。




變更文字顏色



變更文字顏色時,只須對元素color屬性進行設定即可。

請參考以下範例:如何變更網站所有文字顏色和只對內容文字言顏色進行變更。

變更網頁所有文字顏色時,請將最上方的元素html(body)的樣式進行調整。

HTML元素與其父子關係
<html>

 <head>

  <meta>

  <title></title>

 </head>

  <body>

  <h1></h1>

  <p></p>

  <address></address>

 </body>

</html>





  body {
     
color : #000; /* 設定前景色為黑色 */
     }



這樣將會變更整個網站的文字顏色。如果要將內容設定為黑色,將標題設定為紅色時,又該怎麼設定呢?解決此問題時需要用到元素選擇器。

基本元素選擇器

元素名

對於指定的元素將會被應用於樣式中。

    
             
         h1 { ... }


*(星號)

所有元素將被應用於樣式中。


  *.MyClass { ... }
 
   *#MyID { ... }



元素名#名稱

元素中所指定的class屬性的內容將被應用時樣式中。


    
   p.MyID { ... }


請參考以下的範例:如何變更文章內容的文字顏色

 <div class="section" id="a<%topentry_no>">



  
<h2 class="entry-header"><a href="<%topentry_link>" title="<%topentry_title>」的永久URI"><%topentry_title></a
  
  
<div class="entry-body">

   
<%topentry_body>

   
<!--more_link-->

   
<p class="entry-more"><a href="<%topentry_link>" title="繼續閱讀「<%topentry_title>">繼續閱讀 »</a></p>

   
<!--/more_link-->

   
<!--more-->

   
<%topentry_more>

   
<!--/more-->

  
</div>

  
<ul class="entry-footer">

   
<li class="date">| <%topentry_year>-<%topentry_month>-<%topentry_day> | </li>

   <li class="category"><a href="<%topentry_category_link>" title="類別「%topentry_category>」 的所有文章"><%topentry_category></a> | </li>
 
   
<li class="com">

    
<!--allow_comment-->

    
<a href="<%topentry_link>#comment-top" title="<%topentry_title>」的留言">留言 : <%topentry_comment_num></a>

    
<!--/allow_comment-->

    
<!--deny_comment--><!--/deny_comment--> 

   
</li>

   
<li class="trk">

    
<!--allow_tb-->
 
    <a href="<%topentry_link>#trackback-top" title="<%topentry_title>」的引用">引用 : <%topentry_tb_num></a>

    
<!--/allow_tb-->

    <!--deny_tb--><!--/deny_tb--> |

   </li>
 
  
</ul>

 
</div>

<%topentry_body>FC2部落格用於表示文章內容的專用標籤。我們可以看到含有此標籤的主元素為<div class="entry-body"。因此,在文章正式的樣式可設定如下:



   div.entry-body {
    color : #000; /* 設定文章內容前景色為黑色*/ 
   }

同樣,文章標題部分的專用標籤為<%topentry_title>含有此元素的父元素為<h2 class="entry-header">。格式如下所示。

   

  h2.entry-header
   {
color : #f00; /*設定 文章標題前景色為紅色*/
}

透過選擇器的使用,可縮小修改範圍。這樣我們就刻意按照自己的需求進行設定。




變更背景



背景顏色和背景圖片的變更有可利用CSS進行變更。請在相關元素中使用background屬性。全體的變更或部分的變更,請參造選擇器的說明。

在變更背景色時,可使用background-colo屬性。數值可指定符合CSS的任一顏色。

  
  body {
    background-color : #fff; /* 背景色設定為白色*/
 }


也可對網站標題部分的背景色進行同樣設定。

  
  h1{
   background-color : #fff; /* 設定網站標題的背景為白色*/
 }


在變更背景圖像時,可使用background-image屬性。圖像的排列方式或顯示位置等,可透過background-repeat屬性和background-position進行設定。

 

    body {

      background-image : url("圖像路徑"); /* 背景圖像的設定 */
  
      background-repeat : repeat; /* 背景圖像橫向或縱向 */
  
      background-position : left top; /* 將開始位置設定為畫面左上方 */

      background-attachment : fixed; /*
固定背景圖像的位置 */}

圖片的排列方式

repeat
背景圖像可按橫向或縱向排列。

repeat-x
背景圖像僅橫向排列。

repeat-y
背景圖像僅縱向排列。

no-repeat
背景圖像不進行任何排列。

圖像的顯示位置


實數+單位

利用空格間隔按數值進行橫縱向開始位置的指定。
可用單位為px・em・ex・in・cm・mm・pt・pc等。

%數

利用空格間隔按比例進行橫縱向開始位置的指定。

left | center | right
top | center | bottom

利用空格間隔按關鍵詞進行橫縱向開始位置的指定與指定順序無關。

圖像的固定設定

fixed
固定背景圖像的位置

scroll
背景圖像與頁面一起滾動。




變更連結顏色


連結顏色可通定偽類進行設定。設定偽類:hover時,請注意聲明順序(link→visited→hover→active)如果聲明順序錯誤,可能無法正確顯示。

元素名:link
設定連結在未被訪問前的樣式。

元素名:visited
設定連結在已被訪問後的樣式。

元素名:hover
設定連結被滑鼠經過的樣式。

元素名:active
設定連結在被激活時的樣式




      * 設定頁面所有連結時 */

       a:link {
         color : #f60; /* 未被訪問的連結設定為橘色*/
        }
       
       a:visited {

         color : #00f; /*
被訪問過得連結設定為藍色 */ 
         }

        a:hover {
          color : #f00; /*將被滑鼠經過的連結設定為紅色 */
    }
    
   a:active {
    color : #f00; /* 將被激活的連結設定為紅色/ */
   
 }
  
   
* 設定特定類的連結顏色時 */
   
   a.MyClass:link {
     color : #f60; /* 未被訪問的連結設定為橘色*/
   
  }

   a.MyClass:visited {
    color : #00f; /* 被訪問過得連結設定為藍色 */ 
    }

   a.MyClass:hover {
     color : #f00; /*將被滑鼠經過的連結設定為紅色 */ 
    }

   a.MyClass:active {
    color : #f00; /* 將被激活的連結設定為紅色/ */ 
    }
 
   /* 設定特定類指定元素中所含連結顏色時 */

   
.MyClass a:link {
    color : #f60; /* 未被訪問的連結設定為橘色*/
    }

   
.MyClass a:visited {
    color : #00f; /* 被訪問過得連結設定為藍色 */
    }

   
.MyClass a:hover {
    color : #f00; /*將被滑鼠經過的連結設定為紅色 */
     }

   
.MyClass a:active {
    color : #f00; /* 將被激活的連結設定為紅色/ */ 
     }

    






將圖片添加外框-基本篇



將文章中使用的圖像添加外框。只需要'將樣式應用於文章中的圖像便可添加外框。

部落格用於內容標籤的負元素為<div class="entry-body">。
請參考以下之範例:如何將圖像添加邊框如果按照這樣設定的話,會將內容中所有的圖像都會被添加外框。
如果只對部分圖像添加邊框時,請指定選擇器。


 
     div.entry-body img {
       border : 2px solid #000; /* 設定邊框寬度為2px的黑色直線*/
      }


以下為應用樣式的圖像

2012-05-07_1544_Border.png



將圖片添加外框-應用篇



在應用邊中,我們來嘗試將圖像添加相框式的外框

將文章新增圖片後,將自動插入圖像標籤。

 
<a href="圖像連結"target="_blank"><img src="圖像路徑" alt="圖像不顯示時的替代文字" border="0"></a><br clear="all">


如此設定的話,只會顯示普通的圖片,所以請增加以下樣式。

 
   p span img 

  
padding : 5px; /* 設定圖像的留白為5px */

  
background-color : #fff; /* 設定圖片留白部分為白色*/ 

  border : 1px solid #000; /* 設定圖片外框顏色為黑色 */

 
 }



請將文章中的圖像標籤替換以下內容。


  <p><span><img src="圖像路徑" width="圖像寬度" height="圖像長度" alt="圖像不顯示時的替代文字"></span></p>


以下為應用樣式的圖像

2012-05-07_1544_BorderPadding.png



網頁置中設定



部分樣版最初就被設定為置中顯示。在此介紹代表性的設定方法

layout-1.gif



  div#container {
    
width : 740px; /* 設定內容寬度為740px*/
    
margin-left : auto; /* 自動計算左側留白 */
    
margin-right : auto; /* 自動計算右側留白 */
   }


   <body>
       
<div id="container">
     對文章或選單等內容進行描述。  
       </div>
  
 </body>


但是舊版本的瀏覽器或Windows版的IE瀏覽器的兼容模式下即使將留白部分值指定為AUTO也無法居中進行在這裡我們利用的IE瀏覽器的bug來進行操作。

通常在表單或div元素等區域元素置中設置時,不使用text-align。因為text-align是對區域內部元素的對齊進行設定的屬性。但是由於Windows版IE瀏覽器的bug也可通過text-align對區域元素進行置中設定。

 
    body {
      
text-align : center; /* 利用bug對區域元素進行居中設置*/
    
 }
    
div#container {
      
width : 740px; /* 設定內容寬度為740px*/
      
margin-left : auto; /* 自動計算左側留白 */
      
margin-right : auto; /* 自動計算右側留白 */
      
text-align : left; /*還原body元素中的置中設定 */
   
}


按照上述設定的話,即使是較舊版本的瀏覽器或IE瀏覽器也可進行置中設定



設定兩欄版形


http://control.blog.fc2.com/admin/images/icons/wysiwyg.gif

在這裡將透過官方樣版向大家說明兩欄版形的設定。設定方法有很多種,
這次我們將介紹使用了內容環繞的簡單版形。

CSS可以按以下方式設置


   body {

    
text-align : center; /* 利用bug對區域元素進行居中設置*/
   
}

     
div#container {

     
width : 740px; /* 設定內容寬度為740px*/

     
margin-left : auto; /* 自動計算左側留白 */

     
margin-right : auto; /* 自動計算右側留白 */

    
text-align : left; /*還原body元素中的置中設定 */

    
}

    
 div#primary-column {

    
float : left; /* 將主欄(文章內容等)設定置左 */

    
width : 500px; /* 設定寬度為500px */

    
  }

    
div#secondary-column {

    
float : right; /*將副欄(選單等)設定置右 */

    
width : 200px; /* 設定寬度為200px */

     }

    
div#siteinfo-legal {

    
clear : both; /* 取消所有環繞 */

   
 }


HTML部分的設置如下


   <body>

     
<div id="container">

        
<div id="branding">頁眉內容</div>

        
<div id="primary-column">文章等內容</div>
 
        <div id="secondary-column">選單等內容</div>

       
<div id="siteinfo-legal">頁腳内容</div>
  
    </div>

  </body>


請注意IE瀏覽器的適用範圍!

Windows版的IE 4.0~5.5和6.0的兼容模式下,Width屬性和height屬性的適用範圍與標準配置有所不同。原本用於設定表格內容寬度或高度的值,在這些IE瀏覽器下則變了包括邊框和留白的寬度和高度。特別是較為繁雜的設計中對邊框或留白的設定很有可能導致版型發生混亂。

boxmodel.gif


透過使用允許誤差的版型或利用使用被稱為盒子模型hack借助於瀏覽器bug的技術可對誤差進行修正。在這裡不進行詳細介紹,對此感興趣的用戶請利用Google等進行搜索,找到合適的方法。

另外,如果忘記設定container部份的寬度,則primary-column和secondary-column將無法正常設定。請不要忘記設定寬度。

請在頁腳siteinfo-legal中取消環繞。



設定三欄版形



當多種個性化設定的資源情報增多時,可設置三欄版形更方便使用。
對上述兩欄板型的設置進行修改即可變成三欄版形。

layout-3.gif

CSS可以按以下方式設置

  
  body {

   
text-align : center; /* 利用bug對區域元素進行居中設置*/

  
 }

  
div#container {
  
  
width : 740px; /* 設定內容寬度為740px*/

  
margin-left : auto; /* 自動計算左側留白 */

  
margin-right : auto; /* 自動計算右側留白 */

  
text-align : left; /*還原body元素中的置中設定 */

  
 }

  
div#container {
 
  
width : 740px; /* 設定內容寬度為740px*/

  
margin-left : auto; /* 自動計算左側留白 */

  
margin-right : auto; /* 自動計算右側留白 */

  
text-align : left; /*還原body元素中的置中設定 */

  
}

  
div#container {
  
  
width : 740px; /* 設定內容寬度為740px*/

  
margin-left : auto; /* 自動計算左側留白 */

  
margin-right : auto; /* 自動計算右側留白 */

  
text-align : left; /*還原body元素中的置中設定 */

  
 )

  
div#wrapper {

  
float : left; /* 將wrapper(主欄+副欄)左側環繞*/

    
width : 540px; /* 設定寬度為540px340px200px*/

    
)

    div#primary-column {

      
float : right; /* 設定主欄(文章等)右側環繞 */

     
width :340px; /* 設定寬度為340pt*/   
     
     )

     div#secondary-column {

     
float : left; /* 設定副欄(選項)左側環繞 */

    
width : 200px; /* 設定寬度為200px */

    
 }

    
div#extra-column {

   
float : right; /* 設定副欄(BBS)右側環繞*/

   
width : 200px; /* 設定寬度為200px */

   
 }

   
div#siteinfo-legal {

   
clear : both; /* 取消所有環繞 */

   
 }


HTML部分的設置如下
       
   </body>

        <div id="container">

            <div id="branding">頁眉內容

             <div id="wrapper">
            
                 <div id="primary-column">文章等內容</div>

                
<div id="secondary-column">選單等內容</div>

            
</div>

            
<div id="extra-column">BBS等内容</div>

            
<div id="siteinfo-legal">頁腳内容</div>

         
</div>

     
</body>


在HTML中按wrapper→primary-column→secondary-column→extra-column順序描述,透過在CSS中設置版型,即使在不支持CSS的瀏覽器或聲音瀏覽器中也可在第一時間顯示希望訪客瀏覽的文章。

三欄版形和兩欄版形相同,在設定邊框和留白時,須設定box model hack,請注意。



設定FC2計數器



設定FC2計數器,請參考以下使用說明

設定FC2計數器



設定訪問分析



設定FC2訪問分析,請參考以下使用說明

設定訪問分析(FC2部落格)



各月/各類別設定過去文章的下拉選單



當過去文章增多時,網頁會變的很長透過下拉式選單設置,可對其進行整理設置下拉是選單時,必須追加JavaScript和修改HTML請在跟之間插入JavaScript。


    <script type="text/javascript">
  
    
<!--
  
    
function jumpmenu(targ,selObj,restore) {

      eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

      
if (restore) selObj.selectedIndex=0;

   
 }

     
//-->

    
</script>


以下為按照月份展開多過去文章部分


    <h2 class="monthly-archives">MONTHLY</h2>

    
<!--archive-->

    
<ul>

      
<li><a href="<%archive_link>" title="<%archive_year><%archive_month>月」的文章"><%archive_year>-      <%archive_month> : <%archive_count></a></li>

   
</ul>

   
<!--/archive-->


將以上內容進行如下改寫

 
     <h2 class="monthly-archives">MONTHLY</h2>
    
     
<form id="monthly_archives" name="monthly_archives" action="">

       
<select name="menu" onchange="jumpmenu('parent',this,0)">

            
<option value="<%url>" selected="selected">■按月份</option

            
<!--archive-->

            
<option value="<%archive_link>">■<%archive_year>-<%archive_month> : <%archive_count></option>

            
<!--/archive-->

         
</select>

    
</form>


以下為按照類別展開過去的文章


    <h2 class="categories-archives">CATEGORIES</h2>

    
<!--category-->

    
<ul>

         
<li><a href="<%category_link>" title="類別「<%category_name>」的文章一覽"><%category_name> : <%category_count> </a></li>

   
</ul>

   
<!--/category-->


將以上內容進行如下改寫


   <h2 class="categories-archives">CATEGORIES</h2>

   
<form id="categories_archives" name="categories_archives" action="">

      
<select name="menu" onchange="jumpmenu('parent',this,0)">

         
<option value="<%url>" selected="selected">■按類別</option>

         
<!--category-->

         
<option value="<%category_link>">■<%category_name> : <%category_count></option>

         
<!--/category-->
     
     
</select>

 
</form>


如果正確插入Script並對相關部分進行修改後,便可完成下拉是選單的設置對新文章也進行同樣修改,有可同樣實現下拉式選般的模式

關於樣板

7. 樣板
12 /09 2014
註冊部落格時所選擇的樣板可以自由變更。
想要變更設計和配置時,下載其他樣板後即可變更。

何謂樣板?

也可稱作部落格的「門面」。
在FC2部落格,我們將部落格所顯示的html和css稱之為「樣板」。
配置、文字大小和顏色、背景畫面等都在樣板中所顯示。
變更樣板後雖然外觀的設計有所改變,但是文章本身和所設定的的部分並不會受到影響。
(*在樣板中,將會有不支援或是僅部分支援外掛程式的情形)。
即使將樣板刪除,文章也不會因此而被同時刪除。

FC2樣板

FC2樣板 PC用

テンプレート_pc 

FC2樣板和共享樣板的不同

樣板可分為兩大類,分別為「FC2樣板」和「共享樣板」。
「FC2樣板」即為FC2部落格官方所提供的樣板。「共享樣板」即為使用FC2部落格的用戶所製作的樣板。登錄樣板時,FC2部落格官方進行審查。
所登錄「共享樣板」將可以被所有FC2部落格的用戶所使用。

樣板的各種設定

設定樣板


編輯樣板
















続きを読む

設定樣板

7. 樣板
12 /09 2014
設定時,在部落格管理主頁的清單中點選「設定樣板」,即可打開設定頁面。

設定樣板 

在「樣板管理畫面」上部有四個管理項目。



樣板管理
在此更改樣板或編輯HTML、CSS。

新增FC2樣板
可瀏覽FC2官方樣板,並可在這追加。

新增共享樣板
可瀏覽會員設計的共享樣板,並可在這追加。

共享申請.管理
可在此將自己設計的樣板申請共享。申請通過後,可以隨時停止公開或是刪除。
申請通過後的共享樣板,將可對所有用戶公開並被使用。

新增樣板與管理

樣板管理中,您可以看到自己追加的樣板,並可在此變更或是編輯HTML、CSS。
PC樣板一覽表中,樣板名前若有旗幟圖標,表示現在使用中的樣板。
- 點選樣板名稱後,可暫時預覽套用樣板後的部落格。(*並非實際變更。)
- 若是支援外掛程式顯示為x時,則此樣板並不支援外掛程式。
- 複製樣板後,將會以『樣板名稱_數字』的名稱複製相同的樣板。
想更改為其他樣板時,選擇該樣板按『適用』即可。
請記得按『適用』,否則不會更改

34_tw.jpg 

新增FC2樣板

FC2樣板是由FC2官方設計。
打開『新增FC2樣板』後,在喜愛的樣板裡點選『詳細情報』,便會顯示下載畫面。
按下載,即可追加至自己的管理頁面中。
請注意,新增完畢後必須依上述設定方法設定樣板,並按「適用」方才生效。

  tem3_tw.png 

一個頁面會顯示10個FC2樣板。
可按照登錄順序分類或是用作者名搜尋。

新增共享樣板

共享樣板由FC2用戶自行設計製作,並公開給所有人使用。
下載以及設定方法同上。
可以依照圖片種類、樣板底色等篩選出自己喜歡的樣板。

50_changetemp2_tw.jpg 



欄位結構

在配置選項中的「欄位」,可呈現部落格所顯示的排列。
選擇共享樣板時,可以按照指定的欄式結構進行選擇。
temp3.jpg

続きを読む

blogmanualtw

歡迎來到FC2部落格!