32

让紫色轮回——晓美焰WordPress新主题

园友朋友们大家好,本人终于从无尽的轮回中回来了,这次的纪念品是极乐园的新主题:Homura。是的,这是一款纪念魔法少女晓美焰的紫色主题。

使用原创主题已经是极乐园的传统之一了,在经历了海蓝、米黄、翠绿和翡翠后,这款焰紫是我们的第5款自订主题。现在距离上一次换皮,已经有一年半的时间了,尽管一直想找机会换新装,但总是找不到合适的时间来创作。在经历过各种炼狱之后,本次主题对CSS的掌控程度已经与之前不在一个层次之上,不再含糊。

  • 你能从中发现多少小焰的元素?深浅紫色的搭配来自魔法少女的制服,而朱红则来自眼镜。
  • 本次主题采用HTML5搭建,并通过html5shiv令IE支持HTML5。
  • 使用了html5Doctor的HTML5 Reset Stylesheet,对HTML5元素的支持有很大帮助。
  • 使用了LESS来编写CSS。结构化的CSS写法非常爽快,但缺点是会生成大量的冗余CSS代码,不建议在元素重用性高的项目中使用。此外,变量及函数的引入极大地方便了编写,在确定了几个基本颜色后我基本就没再用过调色工具了。
  • CSS伪类十分方便,本次主题大量使用了:last-child、:before、:after等伪类来进行版面控制,如多重边框、底部的等高布局。但IE对伪类的支持并不完整,故使用了CSS3 selectors for IE来增强兼容性。
  • Windows下的字体渲染效果总是令我扶额,在尽量满足兼容性的前提下很难找到优雅美丽的web字体。在前人经验的指点下(12),只能选择Arial作为让步。此外,Windows中文字阴影会让中文字体发虚,唯有忍痛去掉本身的效果以作妥协。Mac下没有以上问题。
  • 本次主题没有通过W3C验证,当前W3C中HTML5仍是试验版本,原先通过的一些元素属性在当前的规则中并不能通过验证。对于WordPress来说问题主要出现在<head>中<link>的rel属性上,但为了通过验证而删掉这些元素并不是明智的做法。此外一些插件的不规范代码也产生了影响。
  • IE 6自然是不兼容的了,使用IE 6访问会有警示弹出。当然,使用非IE 9以下内核的浏览器会获得更好的效果。

希望远在天国的圆神能保佑身着小焰神装的极乐园提高更新频率。此外,作为新的尝试,我们打算接受一定的ACG向内容投稿,作为一个存在了5年的博客,极乐园还是有一定辐射面的。如果你有意向,请通过相关联系方式与我联系。

Picture via おきた, new ukagaka via いにしえ

分享到:

相关日志

让你的Picasa畅通无阻 - Picasa相册排毒手记
让你的Picasa畅通无阻 - Picasa相册排毒手记

MP-Ukagaka伪春菜插件 for WordPress 萌化你的博客
MP-Ukagaka伪春菜插件 for WordPress 萌化你的博客

乐园新装:Glassy Garden 绿迎新春
乐园新装:Glassy Garden 绿迎新春

WordPress Plugin: WP No Keyword 防关键字屏蔽插件
WordPress Plugin: WP No Keyword 防关键字屏蔽插件

Merry Christmas! 乐园09年终总结
Merry Christmas! 乐园09年终总结

Baidu Sama!
Baidu Sama!

拍手

无力吐槽,就来拍下手吧~
现在已有37次拍手,平均拍手6次。

“让紫色轮回——晓美焰WordPress新主题”有 32 条吐槽

Google Chrome 12.0.742.100 Google Chrome 12.0.742.100 Windows 7 x64 Edition Windows 7 x64 Edition
2011-06-19 at 19:13

漂亮,嘿嘿

Google Chrome 12.0.742.100 Google Chrome 12.0.742.100 Windows 7 x64 Edition Windows 7 x64 Edition
2011-06-19 at 19:25

清爽好看~

Jadeity
Google Chrome 13.0.782.1 Google Chrome 13.0.782.1 GNU/Linux GNU/Linux
2011-06-19 at 19:32

紫色最喜欢

Google Chrome 14.0.794.0 Google Chrome 14.0.794.0 Windows 7 x64 Edition Windows 7 x64 Edition
2011-06-19 at 19:37

好看…嗯,Win下的中文字体跟Mac下的效果差距很大…

Google Chrome 12.0.742.91 Google Chrome 12.0.742.91 Windows XP Windows XP
2011-06-19 at 19:51

看起来挺好的

Firefox 4.0.1 Firefox 4.0.1 Windows Vista Windows Vista
2011-06-19 at 20:02

太美了T T

zecy
Firefox 4.0.1 Firefox 4.0.1 Windows 7 Windows 7
2011-06-19 at 21:15

用LESS写的东西感觉反而更多了。我做网页习惯先结构化页面,用一个主CSS表提供固定样式,每个页面再用一个独立的CSS表来调整。

网页字体我索性放弃了,一律不改,爱怎么地怎么地吧……我自己也是直接改了浏览器字体设置的,用的Yahei Mono……

akibarika
Firefox 4.0.1 Firefox 4.0.1 Windows 7 Windows 7
2011-06-19 at 22:58

嗯,紫色非常美丽哦~!

Firefox 4.0.1 Firefox 4.0.1 Windows 7 Windows 7
2011-06-19 at 23:01

“使用非IE 9以下内核的浏览器会获得更好的效果”,这个设定很奇怪啊

PS:为什么我的评论都不成功……

Safari 5.0.5 Safari 5.0.5 Mac OS X 10.6.7 Mac OS X 10.6.7
2011-06-19 at 23:06

很漂亮!如果偶啥时候能自定义评论回复的特定人物头像的靠左和靠右的话就用这个了><(或者可以帮偶?(星星眼

Firefox 3.6.17 Firefox 3.6.17 Mac OS X 10.6 Mac OS X 10.6
2011-06-19 at 23:20

@zecy
在博客这种小项目中,用LESS写起来还是挺爽的,虽说生成的代码一点都不less就是了。在一般的项目中我更习惯将CSS块原子化,然后在HTML中拼凑CSS Name,这样重用性很高。

@Aries
IE系列一直到IE8都不支持圆角、阴影等属性,对其他一些CSS的支持也不够好,所以页面在IE9以下的IE中表现会不佳。因此推荐使用非IE浏览器或IE9以获取更好的浏览效果。
PS.可能服务器不太稳定,发不出评论。

@lovee
到时候在Gmail或推上找我吧。

Cheney
Mozilla Compatible Mozilla Compatible Mac OS X 10.6.7 Mac OS X 10.6.7
2011-06-20 at 09:10

这个主题美

某宅.
Google Chrome 12.0.742.100 Google Chrome 12.0.742.100 Windows 7 Windows 7
2011-06-20 at 22:24

噗留言区文字输入区的文字和背景对比度好低orz

Google Chrome 12.0.742.100 Google Chrome 12.0.742.100 Windows 7 Windows 7
2011-06-21 at 21:29

这种紫色的感觉很喜欢

Opera 11.11 Opera 11.11 Windows XP Windows XP
2011-06-22 at 12:50

比以前更漂亮了,而且很清爽,只是Windows下的字体……确实有点破坏主题本身的感觉,至于Mac下还没试。

UC Browser 7.8.0.87 UC Browser 7.8.0.87 Nokia 6120 Nokia 6120
2011-06-22 at 22:33

紫色比之前漂亮了,就是没那么萌了……

冷雨梦魂
Google Chrome 5.0.396.0 Google Chrome 5.0.396.0 Windows 7 Windows 7
2011-06-27 at 10:21

NICE……………………虽然有种微妙的违和感……

Google Chrome 12.0.742.100 Google Chrome 12.0.742.100 Windows XP Windows XP
2011-06-29 at 10:15

灰常好看~~硬件党表示软件好难...

Ryo
Firefox 5.0 Firefox 5.0 Windows 7 Windows 7
2011-07-04 at 19:16

很漂亮的说。。

ChromePlus 1.6.2.0 ChromePlus 1.6.2.0 Windows 7 Windows 7
2011-07-14 at 23:55

这年头,高人都喜欢玩loli..囧

Maxthon 3.0 Maxthon 3.0 Windows 7 Windows 7
2011-07-26 at 20:01

这主题挺不错的,萝莉控。。

KI
Maxthon 3.0 Maxthon 3.0 Windows 7 Windows 7
2011-09-10 at 22:11

求源码……哎,后台编多了好想试试CSS啊……

Firefox 6.0.2 Firefox 6.0.2 Mac OS X 10.6 Mac OS X 10.6
2011-09-10 at 23:10

这是私用的主题,暂时还没有开放源码的打算 :)

Google Chrome 13.0.782.220 Google Chrome 13.0.782.220 Windows 7 Windows 7
2011-09-15 at 21:36

非常漂亮的主题,能开放就好了,呵呵

ChromePlus 1.6.4.28 ChromePlus 1.6.4.28 Windows XP Windows XP
2011-12-03 at 02:08

黑直长的感觉……很漂亮,眼前一新的感觉!

补番的电波系
TheWorld Browser TheWorld Browser Windows 7 Windows 7
2012-04-08 at 00:34

博主赛高,呜呜,好像萌化刚建的wordpress,但是是电脑苦手啊。伤不起

猫咪の毛线球
360Safe Explorer 360Safe Explorer Windows 7 Windows 7
2012-04-11 at 12:55

加油的说、、、、

lia
Firefox 12.0 Firefox 12.0 Windows XP Windows XP
2012-05-04 at 20:18

你真能干 找那么好看的图。 怎么才能在wp 添加一个初音娃娃?

Firefox 6.0.2 Firefox 6.0.2 Mac OS X 10.6 Mac OS X 10.6
2012-05-05 at 14:34

把图片上传到网络,在后台添加春菜那里粘贴进图片网址就好了。

Google Chrome 20.0.1130.1 Google Chrome 20.0.1130.1 Windows XP Windows XP
2012-05-21 at 21:39

紫色看起来很舒服呢

Google Chrome 21.0.1180.89 Google Chrome 21.0.1180.89 Windows XP Windows XP
2012-09-23 at 12:40

能提供这个主题吗?

Google Chrome 33.0.1750.149 Google Chrome 33.0.1750.149 Windows XP Windows XP
2014-04-19 at 01:55

很不错的主题呢 赞

吐个槽吧

Don't forget. Always. Somewhere. Someone is fighting for you -- As long as you remember her, you are not alone.
晓美焰