博客园定制css 记录
最近些日子,把自建的blog都转到这里了,为的是方便些。之前自己维护github
的博客觉得有点麻烦,也没写出什么高质量的blog,大多都是记录一些操作,真不如放这里方便快捷。体验了下,发现园子里默认字体太小了,看着着实费劲!也不太想花太多时间研究,查了半天百度,把界面做了些调整,主题选择drakgreentip
效果好一点,关键是不用调整其他复杂设置了,节约点时间做正事。
必要的配置
- 主题选择
drakgreentip
- 代码渲染引擎:
prismjs
- 代码字体:
Fira Code
- 系统浅色时主题(38):
prism
页面css代码贴出来:
/* 头部背景颜色的修改 */
#blogTitle {
background-color: #D2D8DE!important;
}
#blogTitle h1 #Header1_HeaderTitle {
font-size: 22px!important;
color: #778899!important;
}
#blogTitle h2 {
font-size: 18px!important;
color: #778899!important;
}
#navigator {
background-color: lightslategrey;
}
#navList li a {
font-weight: bold;
color: white!important;
padding: 10px;
}
#navList>li>a:hover {
background-color: #D2D8DE;
font-weight:normal;
color: #778899!important;
font-size: 18px!important;
}
.pager a {
color: #778899;
border: 0px;
}
div.pager {
font-size: 16px;
}
.entrylistItemTitle span{
font-size: 32px;
}
/* 博客内容字体的修改 */
.postTitle, .postTitle2 span {
font-size: 32px!important;
line-height: 2!important;
}
.cnblogs_code p,code,li,a {
font-size: 15px!important;
line-height: 1.5!important;
}
p{
font-size: 16px!important;
line-height: 1.5!important;
}
.c_b_p_desc {
font-size: 16px!important;
}
PostLis a, a:hover {
text-decoration:none
}
/* 表格美化 */
#cnblogs_post_body table {
text-align: center;
width: 100%;
border: 1px solid #dedede;
margin: 15px 0;
border-collapse: collapse;
}
#cnblogs_post_body table thead tr {
background: #f8f8f8;
}
#cnblogs_post_body table tbody tr:hover {
background: #efefef;
}
/*屏蔽底层广告*/
.under-post-card,
#under_post_card1,
#under_post_card2{
display:none; !important
}
/*顶部导航栏*/
#top_nav{
display: none;
}
(右上角github标签,可选)页首HTML代码:
<a href="https://github.com/symphonyh/">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png">
</a>
参考:
https://www.cnblogs.com/cursorhu/p/6141365.html
https://tool.4xseo.com/article/245811.html
https://www.manongdao.com/article-2256571.html