一、背景
在园子里浪迹有很长一段时间了,里面遇到了很多大神,学习了很多知识,也帮助我解决很多现实工作的问题……非常感谢各位园友们的分享。说来惭愧,在园子这么久,很少发布博文。主要原因是自己有点懒,其他的客观原因也就不说了,每个人都有自己当时的想法。结果现在就有一种“我虽在江湖,但江湖没有我的传说”的尴尬,本着“迟到比不到好”的思想,就想着在这里记录一下自己平凡的学习成长历程,也希望能帮助园友们避免我踩过的坑。
之前在逛园子的时候,就发现有些博主的主题很好看,查找了一些攻略,根据自己的喜好,简单的修改了主题样式以及添加了一些功能。如果你想定制自己的博客,可以跟我一起,需要有css基础。
二. 定制自己的博客
1、准备工作
先在博客主页依次点击“管理”=》“设置”,下面找到“申请JS权限”,等待审核,审核通过之后才能,定制的主题才能成功。同时在博客皮肤那里选择博客园提供的皮肤。我没有像园子里面的大神直接自定义一套css样式,我觉得站在巨人的肩上,一样也可以摘到自己的星星。于是我选择了我觉得合适的皮肤[“SimpleBlue”],每个人的爱好不一样,你可以选择你喜欢的皮肤进行修改,不过下面的一些样式可能需要做一些修改,具体看你想要怎么展示。
自定义主题样式操作,对于你不满意的元素,你可以在该页面按F12调出Debug工具,然后对该元素的css进行修改,调整满意之后,你把修改过的css保存到“页面定制CSS代码”里面。
2、公共样式
下面是我对SimpleBlue皮肤的公共样式做了一些调整,如果你想跟博主一样的定制,可以直接copy到"页面定制CSS代码"里面
1 @font-face { 2 font-family: 'FontAwesome'; 3 font-style: normal; 4 font-weight: normal; 5 src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg'); 6 } 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 body { 12 background: #eee; 13 color: #444; 14 font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; 15 font-size: 14px; 16 text-shadow: 0 0 1px transparent; 17 color:#505050; 18 } 19 @media screen and (max-width: 1260px) { 20 body { 21 margin: 0px; 22 } 23 } 24 @media screen and (max-width: 600px) { 25 body { 26 font-size: 13px; 27 } 28 } 29 h1,h2,h3,h4,h5,h6 { 30 font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; 31 } 32 h1 { 33 font-size: 1.8em; 34 } 35 h2 { 36 font-size: 1.5em; 37 } 38 h3 { 39 font-size: 1.3em; 40 } 41 a { 42 text-decoration: none; 43 color: #258fb8; 44 } 45 a:hover { 46 text-decoration: underline; 47 }