本页面的theme分享

虽然比较简陋,主要是参考了theme里的 Natsushyo 不会代码,都是傻瓜试验出来的 字体如何引入,拍手网站请参考本博内的小贴士

—- 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改变按钮的弧度

♥ 拍手 ⏎ 返回目录