如何设置博客园好看的标题样式

Posted 2022-01-04 jing-tian

1.向博客园申请JS权限

我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷新一下，页面就会显示支持js代码 ，博客园也会在用户邮箱给你发送是否开通js权限的邮件。

2.添加CSS样式

我们在【管理】-->【设置】-->【博客设置】-->【页面定制CSS代码】中粘贴如下面的代码，当然也可以根据自己喜好定制

 

 1 #cnblogs_post_body
 2 
 3     color: black;      
 4     font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
 5     font-size: 15px;
 6 
 7 #各个等级标题的颜色样式
 8 #cnblogs_post_body h1    
 9     background: #2B6695;
10     border-radius: 6px 6px 6px 6px;
11     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
12     color: #FFFFFF;
13     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
14     font-size: 23px;
15     font-weight: bold;
16     height: 25px;
17     line-height: 25px;
18     margin: 18px 0 !important;
19     padding: 8px 0 5px 5px;
20     text-shadow: 2px 2px 3px #222222;
21 
22 #cnblogs_post_body h2    
23     background: #008eb7;
24     border-radius: 6px 6px 6px 6px;
25     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
26     color: #FFFFFF;
27     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
28     font-size: 20px;
29     font-weight: bold;
30     height: 25px;
31     line-height: 25px;
32     margin: 18px 0 !important;
33     padding: 8px 0 5px 5px;
34     text-shadow: 2px 2px 3px #222222;
35 
36 #cnblogs_post_body h3    
37     background: #399ab2;
38     border-radius: 6px 6px 6px 6px;
39     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
40     color: #FFFFFF;
41     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
42     font-size: 18px;
43     font-weight: bold;
44     height: 25px;
45     line-height: 25px;
46     margin: 18px 0 !important;
47     padding: 8px 0 5px 5px;
48     text-shadow: 2px 2px 3px #222222;
49 
50 #cnblogs_post_body h4
51     background: #2B6600;
52     border-radius: 6px 6px 6px 6px;
53     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
54     color: #FFFFFF;
55     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
56     font-size: 16px;
57     font-weight: bold;
58     height: 24px;
59     line-height: 23px;
60     margin: 12px 0 !important;
61     padding: 5px 0 5px 10px;
62     text-shadow: 2px 2px 3px #222222;
63 
64 #页面中a标签鼠标位置
65 #cnblogs_post_body h2:a
66    color: rgb(235, 235, 235);
67 
68 #cnblogs_post_body h2 a:hover
69    color: rgb(255, 102, 0);
70 
71 #页面中标题位置
72 #cnblogs_post_body h1
73    color: rgb(235, 235, 235);
74 
75 #cnblogs_post_body h1:hover
76    color: rgb(255, 102, 0);
77 
78 #cnblogs_post_body h2
79    color: rgb(235, 235, 235);
80 
81 #cnblogs_post_body h2:hover
82    color: rgb(255, 102, 0);
83 
84 #cnblogs_post_body h3
85    color: rgb(235, 235, 235);
86 
87 #cnblogs_post_body h3:hover
88    color: rgb(255, 102, 0);
89 
90 #cnblogs_post_body h4
91    color: rgb(235, 235, 235);
92 
93 #cnblogs_post_body h4:hover
94    color: rgb(255, 102, 0);
95 
96 
97 博客园[标题样式]

View Code

 

注： 使用时直接添加段落标题*，在写博文的时候不会立即显示在编辑文档器，需保存博文查看效果样式