设置博客园标题样式

番茄西红柿发布于2019-04-23 13:30 / 3569人阅读

摘要：博客园设置博客设置，点击页面上的权限申请，然后填写申请的理由，耐心等几分钟，再刷新一下，页面就会显示支持代码，博客园也会在用户邮箱给你发送是否开通权限的邮件。

1.向博客园申请js权限

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

2.添加css样式

我们在【管理】-->【设置】-->【博客设置】-->【页面定制CSS代码】中粘贴如下面的代码

#cnblogs_post_body
{
    color: black;      
    font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
    font-size: 15px;
}
#各个等级标题的颜色样式
#cnblogs_post_body h1    {
    background: #2B6695;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 23px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h2    {
    background: #008eb7;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 20px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h3    {
    background: #399ab2;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 18px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h4{
    background: #2B6600;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 16px;
    font-weight: bold;
    height: 24px;
    line-height: 23px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
}
#页面中a标签鼠标位置
#cnblogs_post_body h2:a{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h2 a:hover{
   color: rgb(255, 102, 0);
}
#页面中标题位置
#cnblogs_post_body h1{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h1:hover{
   color: rgb(255, 102, 0);
}
#cnblogs_post_body h2{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h2:hover{
   color: rgb(255, 102, 0);
}
#cnblogs_post_body h3{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h3:hover{
   color: rgb(255, 102, 0);
}
#cnblogs_post_body h4{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h4:hover{
   color: rgb(255, 102, 0);
}

标题样式

保存后，刷新一下,就OK

云服务器 GPU云服务器博客园博客园webrtc wcf博客园 android博客园

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1969.html

博客园自定义样式

摘要：个人比较喜欢用来编写博客，但是博客园自带的编辑器真的不是很友好啊。。。。。还好，博客园比较人性化的有页面样式的自定制功能。碎碎念：已经很长时间没有更新过博客了，分析一下，一个是太懒了。。。所以很久没整理一下了。还有就是嫌弃博客园默认的博客界面真的太丑了，作为颜控的我真的无法忍受啊。个人比较喜欢用makedown来编写博客，但是博客园自带的编辑器真的不是很友好啊。。。。。还...

ASCH 2019-08-29 14:16 评论0 收藏0
前端小白也能快速学会的博客园博客美化全攻略

摘要：前端小白也能快速学会的博客园博客美化全攻略呦，博客园的自我修养是什么第一条，别只顾收藏和偷师呀，记得点推荐或关注本人喔美化方法论简介一般而言，需要选一个默认的，然后在该基础上调整。或者也可进博客园园子页面，发状态博客园团队，申请开通权限。前端小白也能快速学会的博客园博客美化全攻略 A呦V，博客园er的自我修养是什么？第一条，别只顾收藏和偷师呀，记得点推荐或关注本人喔~ 美化方法论简...

StonePanda 2019-08-23 15:09 评论0 收藏0
个人博客园样式、背景及细节美化过程

摘要：踩坑注意导入后要勾选禁用默认否则会造成各种显示问题我的文件可以右键查看网页源代码获取，使用时基于主题，懒得折腾的可以直接下载。主页美化：主要参考嘻哈烧饼的美化，在TA的基础上增加了对主页背景、色调以及侧边栏的调整原帖地址：https://www.cnblogs.com/seanshao/p/5716543.html 修改博客园背景的代码如下（在原帖使用的css文件中修改）： body ...

番茄西红柿 2019-04-23 13:10 评论0 收藏0
分享自用博客园主题样式

摘要：博客皮肤选择博客皮肤选择因为简单，所以爱在页面定制代码中填入以下内容在页面定制代码中填入以下内容重要提示侧边栏蓝色风格，有的模块可能遗漏，需要请自行在样式中的侧边栏加上对应的或者整体布局整体布局非阅读区域去掉白色背景博1. 博客皮肤选择 SimpleMemory 因为简单，所以爱~ 2. 在页面定制CSS代码中填入以下内容重要提示：侧边栏蓝色风格，有的模块可能遗漏，需要请自行在CSS样式中...

CoXie 2019-04-23 11:52 评论0 收藏0
web前端（4）—— 常用标签1

摘要：需要注意的是，代码中的所有连续的空行换行也被显示为一个空格常用的特殊字符内容代码空格版权注册好的，常用标签暂且到此标题标签h1~h6 顾名思义，这些就是把字体设置为大字体的，就如博客园的这个编辑器里的格式：不信的话我们自己设置看看：好的，从本篇文章开始，我们需要动手了 test 标题标题标题标题标题 ...

番茄西红柿 2019-04-23 13:12 评论0 收藏0