部落格的個性化設計
7. 樣板
在FC2部落格中已為用戶準備了多樣的樣版供用戶選擇。可隨意依自己的喜好更換樣版，設計出自己專屬的部落格。另外FC2部落格可以自由編寫HTML和CCS,只要用戶懂得這些便可以按照自己的想法對樣版進行編輯。
樣版的編輯方法大致可分為HTML和CCS兩種。HTML是對部落格內容的結構進行描述的文件,而CCS,而CCS則是對內容的格式進行定義的文件。例如想要變更顯示的內容時可透過修改HTML來完成,想要對文字色彩或是背景顏色的進行更改時可透過修改CSS來完成。
客服中心不受理共享樣版和已完成編輯的官方樣版等相關問題的諮詢。
有關於共享樣版的問題請直接向樣版作者進行諮詢。
此說明中所使用的樣版是名為「sample」的官方樣版。
登入部落格管理頁面＞設定樣板＞新增FC2樣版＞在樣版名稱中輸入「sample」[sample_2]進行搜索。
＊其他樣版的描述可能會與此樣版有所不同。
可在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
字體大小可分為７個等級。
smaller | larger
可為主要元素的字體大小指定更小或更大的字體。
根據瀏覽器的種類或設定的不同，譬如在指定字體大小時使用pt或px等絕對單位時,用戶可能無法對字體的大小進行變更。指定字體大小時,請盡量使用em或％等相對單位,這樣用戶可依照需要調整字體大小。
變更文字顏色時，只須對元素color屬性進行設定即可。
請參考以下範例：如何變更網站所有文字顏色和只對內容文字言顏色進行變更。
變更網頁所有文字顏色時，請將最上方的元素html（body）的樣式進行調整。
HTML元素與其父子關係
body {
color : #000; /* 設定前景色為黑色 */
}
這樣將會變更整個網站的文字顏色。如果要將內容設定為黑色，將標題設定為紅色時，又該怎麼設定呢?解決此問題時需要用到元素選擇器。
基本元素選擇器
元素名
對於指定的元素將會被應用於樣式中。
h1 { ... }
＊（星號）
所有元素將被應用於樣式中。
*.MyClass { ... }
*#MyID { ... }
元素名#名稱
元素中所指定的class屬性的內容將被應用時樣式中。
p.MyID { ... }
請參考以下的範例:如何變更文章內容的文字顏色
<%topentry_body>為FC2部落格用於表示文章內容的專用標籤。我們可以看到含有此標籤的主元素為<div class="entry-body"。因此，在文章正式的樣式可設定如下:
div.entry-body {
color : #000; /* 設定文章內容前景色為黑色*/
}
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的黑色直線*/
}
以下為應用樣式的圖像
在應用邊中,我們來嘗試將圖像添加相框式的外框
將文章新增圖片後,將自動插入圖像標籤。
<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>
以下為應用樣式的圖像
部分樣版最初就被設定為置中顯示。在此介紹代表性的設定方法
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瀏覽器下則變了包括邊框和留白的寬度和高度。特別是較為繁雜的設計中對邊框或留白的設定很有可能導致版型發生混亂。
透過使用允許誤差的版型或利用使用被稱為盒子模型hack借助於瀏覽器bug的技術可對誤差進行修正。在這裡不進行詳細介紹,對此感興趣的用戶請利用Google等進行搜索,找到合適的方法。
另外,如果忘記設定container部份的寬度,則primary-column和secondary-column將無法正常設定。請不要忘記設定寬度。
請在頁腳siteinfo-legal中取消環繞。
當多種個性化設定的資源情報增多時,可設置三欄版形更方便使用。
對上述兩欄板型的設置進行修改即可變成三欄版形。
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; /* 設定寬度為540px（340px＋200px） */
)
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,請注意。
當過去文章增多時,網頁會變的很長透過下拉式選單設置,可對其進行整理設置下拉是選單時,必須追加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並對相關部分進行修改後,便可完成下拉是選單的設置對新文章也進行同樣修改,有可同樣實現下拉式選般的模式
樣版的編輯方法大致可分為HTML和CCS兩種。HTML是對部落格內容的結構進行描述的文件,而CCS,而CCS則是對內容的格式進行定義的文件。例如想要變更顯示的內容時可透過修改HTML來完成,想要對文字色彩或是背景顏色的進行更改時可透過修改CSS來完成。
客服中心不受理共享樣版和已完成編輯的官方樣版等相關問題的諮詢。
有關於共享樣版的問題請直接向樣版作者進行諮詢。
此說明中所使用的樣版是名為「sample」的官方樣版。
登入部落格管理頁面＞設定樣板＞新增FC2樣版＞在樣版名稱中輸入「sample」[sample_2]進行搜索。
＊其他樣版的描述可能會與此樣版有所不同。
變更文字大小
可在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
字體大小可分為７個等級。
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>
<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的黑色直線*/
}
以下為應用樣式的圖像
將圖片添加外框－應用篇
在應用邊中,我們來嘗試將圖像添加相框式的外框
將文章新增圖片後,將自動插入圖像標籤。
<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>
以下為應用樣式的圖像
網頁置中設定
部分樣版最初就被設定為置中顯示。在此介紹代表性的設定方法
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瀏覽器下則變了包括邊框和留白的寬度和高度。特別是較為繁雜的設計中對邊框或留白的設定很有可能導致版型發生混亂。
透過使用允許誤差的版型或利用使用被稱為盒子模型hack借助於瀏覽器bug的技術可對誤差進行修正。在這裡不進行詳細介紹,對此感興趣的用戶請利用Google等進行搜索,找到合適的方法。
另外,如果忘記設定container部份的寬度,則primary-column和secondary-column將無法正常設定。請不要忘記設定寬度。
請在頁腳siteinfo-legal中取消環繞。
設定三欄版形
當多種個性化設定的資源情報增多時,可設置三欄版形更方便使用。
對上述兩欄板型的設置進行修改即可變成三欄版形。
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; /* 設定寬度為540px（340px＋200px） */
)
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,請注意。
各月／各類別設定過去文章的下拉選單
當過去文章增多時,網頁會變的很長透過下拉式選單設置,可對其進行整理設置下拉是選單時,必須追加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並對相關部分進行修改後,便可完成下拉是選單的設置對新文章也進行同樣修改,有可同樣實現下拉式選般的模式