博客样板的个性化设置

9. 博客样板
10 /22 2012
在FC2博客中已事先为用户准备了多种样板以供选择。只需依心情随意更换喜欢的样板,便可轻松变更博客风格。当逐渐熟悉之后,想按自己的喜好对样板进行个性化设置的用户也越来越多。在FC2博客中可自由编辑HTML和CSS,所以只要您懂得这些便可按自己的想法对样板进行编辑。
可进行个性化设置的文件大致可分为HTML和CSS2种。HTML是对博客那内容的结构进行描述的文件,而CSS则是对内容的格式进行定义的文件。例如当变更显示内容时可通过变更HTML来实现,而对文字的大小或者背景色等进行变更时,则需通过变更CSS来实现。

客服中心不受理关于共享样板和个性化设置后的官方样板的咨询。

关于共享样板的问题,请直接向样板作者进行咨询。

此说明中所使用的样板是名为“sample”的官方样板。
登录博客管理页面后>样板选择>添加FC2官方样板>在样板名称输入“sample”“sample_2”进行搜索。

*其他样板的描述可能与此样板有所不同。


样板编辑方法


1.在管理页面的“环境设定”中选择“样板管理”。

2.请点击要编辑的样板名称后的“编辑”。

3.在各个编辑栏中进行编辑后点击“确定”便可保存和应用编辑过的内容。

请在此查看样板编辑页面详情

变更文字大小


可在CSS中轻松变更文字大小。举例说明如何变更标题文字的大小。

在HTML的编辑栏中搜索对标题部分的描述。以下为对标题进行描述的标签。


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

标题部分由<h1>定义,所以只需在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
可对父元素的字体大小指定为更小或更大字体。

根据浏览器的种类或设置的不同,如果在指定字体大小时使用如ptpx等绝对单位时,用户将可能无法根据需要对字体的大小进行变更。 指定字体大小时,请尽量使用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 { ... }

元素名#名称
样式将被应用于包含元素中所指定的id属性的内容。


p#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></h2>
<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-color属性。数值可指定为符合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; /* 将被激活的链接设置为红色 */
}



给图像添加边框 - 基础


下面我们来尝试给文章中的图像添加边框。只需将样式应用于正文中的图像便可添加边框。


含有FC2博客专用正文标签的父元素为<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浏览器也可进行居中设置。




两栏布局的设置


在这里通过官方样板对大家比较熟悉的两栏布局进行说明。设置方法有很多,此次我们将介绍使用了内容环绕的简单布局。


两栏布局说明


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#wrapper {
float : left; /* 将wrapper(主栏+副栏)左侧环绕 */
width : 540px; /* 设置宽度为540px(340px+200px) */
}
div#primary-column {
float : right; /* 设置主栏(文章等)为右侧环绕 */
width : 340px; /* 设置宽度为340px */
}
div#secondary-column {
float : left; /* 设置副栏1(菜单等)为左侧环绕 */
width : 200px; /* 设置宽度为200px */
}
div#extra-column {
float : right; /* 设置副栏2(BBS等)为右侧环绕 */
width : 200px; /* 设置宽度为200px */
}
div#siteinfo-legal {
clear : both; /* 取消所有环绕 */
}

HTML部分的设置如下。


<body>
<div id="container">
<div id="branding">页眉内容</div>
<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。请在<head>和</head>之间插入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并对相关部分进行修改后,便可实现下拉菜单模式。对新文章也进行同样修改,也可同样实现下拉菜单模式。


留言

秘密留言

blogmanualcn

欢迎来到 FC2 博客