本页面的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改变按钮的弧度