—- Custom CSS

    /* 引入字体 */
@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap');
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap');

    /* 上下边框的粗细和颜色 */
html {
border-top: 8px solid #346c9c;
border-bottom:8px solid #66a9c9;
}

    /* 不显示地步分割线 */
footer hr {
    display: none;
}

    /* 页脚 */
body footer nav {
	margin: 3em 0 1em 0;
}

    /* 页脚文字，不支持汉字 */
footer nav::before {
    content: "This blog is a collection of fan-fictions.\A Any resemblance to actual persons, places or events is purely coincidental. \A";
    white-space: pre-wrap;
}

    /* 博客标题 */
#blog-title {
    color: #422615;
    white-space: nowrap;
}

    /* 引入博客头图，改变图片放置的位置、是否重复、弧度等，令图片的大小可改变并改变 */
#blog-title a {
    background-image: url(https://s4.ax1x.com/2022/02/25/bEKGlR.jpg);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
color: rgba(0,0,0,0);
display: inline-block;
width: 180px;
height: 180px;
background-size: 280px;
}

#post #blog-title a, #subpage #blog-title a {
    /* 改变子页面标题logo的大小 */
    width: 60px;
    height: 60px;
    background-size: 60px;
}

    /* 改变链接的颜色和样式，hover为鼠标滑过，visited为已访问 */
article a:link {
    color: #1772b4;
    text-decoration: none;
}

article a:hover {
    text-decoration: underline;
}

article a:visited {
    color:#93b5cf;
}

    /* 改变文章时间的字体、大小，以及和文章内容的间距 */
time {
  font-family: 'AXIS Std';
    font-size: 13px !important;
    margin-bottom: 1em;
}

    /* 改变阅读更多的颜色、字体、大小、位置及与内容的距离 */
.read-more {
color: #1772b4 !important;
font-family: 'ZCOOL XiaoWei', serif;
font-size: 15px;
float: right;
padding-right: 1em;
}

    /* 在阅读更对前加上喜欢的符号 */
.read-more::before {  content: '» ';}

    /* 不显示浏览量 */
.views {
    display: none;
}

    /* 改变标签的字体颜色和大小 */
.hashtag {
color: #1772b4 !important;
   font-size:14px !important;
}

    /* 改变标签的背景颜色、边框弧度 、边框颜色、左右间距*/
a.hashtag {
background-color: transparent;
border-radius: 3px;
border: 1px solid #5698c3;
padding-left: 0.3em;
padding-right: 0.3em;
margin-right: 5px;
}

    /* 改变文章的字体大小及上间距 */
body#post {
padding-top: 5px;
    font-size:14px;
}

    /* 改变文章标题的位置，字体大小、粗细、字体样式 */
article h2 {
    text-align: center;
    font-size: 20px;
font-weight: normal;
font-family: 'ZCOOL QingKe HuangYou', cursive;
}

    /* 改变置顶的颜色 */
.pinned {
        color: #424a53;
       }

    /* 在置顶前加上喜欢的符号 */
.pinned::before {  content: '• ';}

    /* 改变博客描述的字体、颜色 、大小 */
header p.description {
color: #3d6388;
font-family: 'Long Cang', cursive;
font-size: 22px;
}

—- Post Signature 用来做返回目录，点赞（拍手）

<div style="text-align: right; font-size:14px; font-weight: bolder;"> 
<a href="http://clap.webclap.com/clap.php?id=collaroff" target="_blank"  style="color: #fff; background:#66a9c9; padding: 10px;border-radius: 30px; " > ♥ 拍手</a>    <a href="https://writee.org/collaroff/gui-dang"style="color: #fff; background:#66a9c9; padding: 10px;border-radius: 30px;" > ⏎ 返回目录</a></div>

text-align控制按钮的位置，font-size控制字体的大小，font-weight控制字体的粗细； a href后为链接的地址，target后表示是否在空白页面打开，color为字体的颜色，background为背景的颜色，padding表示字体和按钮边距的距离，border-radius改变按钮的弧度

昨天改头图以后，想改描述的字体，一开始考虑同样插入图片来解决，后来看writefreely提供的theme里有导入字体的例子，想着“没准会有思源宋体呢？那样也好”打开了谷歌字体，其中有九种字体。

正常流程：打开googlefonts的简体中文搜索结果，选择心仪的字体，点击select this style，复制提供给你的代码进入Custom CSS。

直接复制： 谷歌字体有9种简体，思源宋体及黑体有多种字宽，select以后还需要进入子页面进行选择，这里只放上其他7种字体的代码。

• 更改博客标题 #blog-title a { font-family: 'ZCOOL QingKe HuangYou', cursive; }

• 更改博客描述 header p.description { font-family: 'Long Cang', cursive; }

  效果如图（图床挂了还在找新的）

  

PS:其他页面元素也可以这样更换字体，包括Post Signature部分。

下方链接皆为字体预览页，非谷歌页面

1.站酷庆科黄油体 于Custom CSS最首行粘贴放入@import url('https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap'); 再将想更改的font-family替换为font-family: 'ZCOOL QingKe HuangYou', cursive;

2.站酷小薇体 粘贴：@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap'); 替换：font-family: 'ZCOOL XiaoWei', serif;

3.钟齐马善政毛笔楷书 粘贴：@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap'); 替换：font-family: 'Ma Shan Zheng', cursive;

4.站酷快乐体 粘贴：@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap'); 替换：font-family: 'ZCOOL KuaiLe', cursive;

5.钟齐志莽行书 粘贴：@import url('https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap'); 替换：font-family: 'Zhi Mang Xing', cursive;

6.钟齐流江毛笔草体 粘贴：@import url('https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&display=swap'); 替换：font-family: 'Liu Jian Mao Cao', cursive;

7.有字库龙藏体 粘贴：@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap'); 替换：font-family: 'Long Cang', cursive;

2.webclap 拍手功能，可以代替点赞 我真的很想给“阅览”里的一些博文点赞！ webclap点赞和留言都不会有提醒，如果需要留言提醒可以换成3

➀ 打开writefreely的博客设置，在「Post Signature」栏里输入： <div style="text-align: right;"> 　　　 　　　</div> 通过改变right/left/center来改变拍手按钮的位置。

➁ 完成注册，进入「拍手ボタン」 选择除第一栏以外的喜欢拍手按钮类型（第一栏个人测试无法成功） 复制红色的「↓HTMLタグ↓」里的部分，插进1中的代码空白处。 例： <div style="text-align: right;"> <a href="http://clap.webclap.com/clap.php?id=collaroff" target="_blank" onclick="window.open('http://clap.webclap.com/clap.php?id=xxxx','webclap','toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes');return false;"><img src="http://img.webclap.com/webclap/button/off.php?img=18" style="border:0px;" /></a>　　　 　　　</div>

更加简单和自定义的方法是插入 <a href="http://clap.webclap.com/clap.php?id=你的web拍手id" target="_blank"> 　　　<img src="你想做拍手按钮的图片地址" border="0"></a> 这样每篇博文后就有一个拍手的按钮了！

3.wavebox 只有留言才会发邮件提示，如果是单纯的emoji是没有提示的 插入方法为 <a href=" 你的wave地址（请手动删除网址最后的/，或者删掉右边的/→）/" target="_blank"> 　　　<img src="你想做拍手按钮的图片地址" border="0"></a>

wave地址为点击my page后的网址，或者在setting里也可以复制哟 其他格式的更改方法与webclap相同。

在setting里可以更换喜欢的emoji，这样点赞的人用来选择表达心情 与webclap不同的是，webclap只要点击就是点赞，而wavebox需要再点击一次。

例子： 👋

二、博文部分常用代码

方便自己复制

• 超链接 []()
• 直链 <>
• 阅读更多 <!--more-->
• 折叠 <details> <summary>目录</summary> 文本 </details>
• 图片 ![avatar]()
• 字体<p style="font-size:30px;color:orange">标签设置字体颜色</p>
• 下划线 <u></u>
• 删除线 <s></s>