主页 > 应用益智 >久违改版!imXD7 自适应 WordPress布景版型 >

久违改版!imXD7 自适应 WordPress布景版型


很像很久没有改版了耶!上一版是在2011年10月份的imXD5,第一次尝试写WordPress的HTML5版型,然后就默默地将版型沿用至今,算是开站以来用最久(两年半)的布景主题。不过随着去年陆续推出一些免费版型之后,一直很想找时间修改自己的网站,不过每天改客户的东西就改到昏天暗地了,哪来的时间改自己的东西(泪)。

趁着周末两天,客户比较不会吵的时候,看完疯神无双和台版的辛普森家庭后,趁着夜阑人静的时候,开了一个测试网站,顺手修改自己的网站。虽然这两年半中,常常看到不错的网站,就会开启Firefox浏览器搭上Firebug修改,模拟一下发现感觉不对,就直接关闭,继续做其他事情。就好比看到很棒的衣服,但是穿在自己的身上却见不得人。

如同以往,每次只要大改网站,一定会写篇文章记录一下。话说前一阵子陆续帮客户製作响应式(自适应)WordPress布景主题,也有推出一个免费响应式版型「班杰明」。本来官网要做成响应式,当初使用SUSY刻,后来发现要PHP搭SUSY配上远端伺服器环境,操作上实在是不方便,最后还是回到最一开始,直接使用Media Query 来做调整,製作上还是比较顺手。

因为有这样的尝试经验,所以终于把香肠炒鱿鱼网站顺手更动成了响应式WordPress版型,此次版型名称本来想叫「akito」的,后来想想听起来很像很宅,直接放弃,实在是难以衬托出我的阳光。后来想说是imXD5的升级版,想说叫做「imXD6」?不过因为网站即将迈入第七年,索性直接取为「imXD7」。不知不觉网站迈入第七年,然后鱿鱼丝在今年也已经结婚了~~

每次写这种纪录文章,都会去翻一下过去自已写过的来参考,仔细看看以前怎幺会做那样的版型…越看越糟糕,人果然是一时兴起,就不会去管后果了、人总有过去(已哭)。

本次版型:imXD7

首先让大家看一下整体的感觉,没错!你真的没看错,他跟前一版其实是差不多的,只是颜色上稍微变换一下,相信大家很失望吧?我也有点失望,宝杰你怎幺看?这个版就单纯香肠自己DIY,东凑西凑,没有所谓的美术、美工设计XDD,这种设计美工人员不会喜欢,只有工程人员会比较爱吧Orz…

话说回来,其实弄这一版是为了让我侧边可以塞下300×600的Google广告,之前想说侧边栏没什幺作用,可是拿掉又很怪,所以就保留着,此外当初选单没有做多层选单,所以分类都只能在侧栏展现,现在有上方的自订选单可以发挥了!

久违改版!imXD7 自适应 WordPress布景版型

首页图文呈现

首页想要放图已经是最近一年改版的梦想,最后终于呈现了,但是很普通。没错!我也觉得很普通,所以就加了CSS3的特效,滑过去会放大,让它花俏点。本想说与寂寞乔治免费版型放左侧然后用timthumb缩图程式跑,不过对于系统效能可能会影响,再加上网站开启速度可能不会太OK,所以就放弃了。当速度效能与特效PK的时候,我会选择效能不会选择特效XD。文字部分,原先要用我自己切的MORE,结果发现我切的段落太长,因此直接用内建参数做180个字之截断。至于分类清单页面,则用原先的截断方式然后图片不显示。

久违改版!imXD7 自适应 WordPress布景版型

Web Icon Font

这次除了LOGO没有ICON FONT之外,其余的小图示都是ICON FONT。一刚开始觉得使用上会有些困难,没想到免费提供的网站连接学都打包进来,完全无痛使用。用了一次之后会上瘾,我想之后就会少用图片拼贴啦!ICON FONT的好处在于它本身就是文字,所以颜色变换上都可以随心所欲,图案尺寸也可以随着字型大小调整,向量图,不怕锯齿或变形。

然后侧边上面那根不明物体,是香肠XD。鱿鱼丝的图案找不到QAQ~~

久违改版!imXD7 自适应 WordPress布景版型

多层选单

终于在自己的主网站上使用多层选单,但说穿也只有两层,因为第三层太麻烦了,而且访客并没有时间可以慢慢找,东西能在第一时间被发现是最好的,当然也不是把所有东西都丢到画面上,有所取捨。

久违改版!imXD7 自适应 WordPress布景版型

跟我滚!

啊?是要滚去哪边?香肠是条状物可以滚动式能理解,不过这….?是侧边啦!当侧边栏结束后,最后两个区块可以跟着滚,科科。注意到了吗?小图案不是Feedburner而是烤熟的香肠(笑)。另外粉丝差两位就破万了….太感动了。粉丝成长好辛苦QAQ,一定是我没认真(低头)。

久违改版!imXD7 自适应 WordPress布景版型

麵包屑,走到哪里掉到哪里

麵包屑就是网站的导航工具,不是啪啪狗也不是倒航王。就是麵包屑(Breadcrumb),延续上一版继续用,前方的导引图从原本的TAG换成一枝笔。

久违改版!imXD7 自适应 WordPress布景版型

分类、标籤、彙整标题

针对其他页面的标题,也简单弄个样式当然也要搭上麵包屑的列车。

久违改版!imXD7 自适应 WordPress布景版型

留言区版面

留言区版面如果你有注意我的免费版型,你一定会发现怎幺似曾相识?是的,我是直接从班杰明的版型直接转用过来,换个边框颜色而已(低头)。不过留言都改用了DISQUS,其实有没有设计都不会被发现的啦XDD。

久违改版!imXD7 自适应 WordPress布景版型

内文社群分享

社群分享总是避免不了,放两个很单调,多放推特又没人按,但我还是放了,毕竟三个排起来比较好看,视觉上也比较好。至于样式,宽度不足就显示再标题下方。

久违改版!imXD7 自适应 WordPress布景版型

宽度足够,我们就让它外出晒太阳了。

久违改版!imXD7 自适应 WordPress布景版型

ERROR 404 的北极熊不见了?

其实我个人不太想浪费404页面的流量,所以还是沿用上一版的设计,把分类和时间彙整全部列上去,感觉画面丰富一点,感受到我想把资讯呈现出来,温柔的力量(?)

久违改版!imXD7 自适应 WordPress布景版型

自适应版面宽度调整

没错,这是由史以来本站最宽的版面之一,宽度达到1140,配合着自适应设计(Responsive Web Design),所以多宽、多窄都可以收放自如。本来是做1000的版本,同时也将各解析度做了尺寸调整,但想说既然都动工了,何不一次升级到宽版面呢?就顺手升级到1100以上,本来想一口气冲1200的版本,但碍于我是使用笔电,1366 x 768 不能看到最完整本的版本感觉会有遗憾,因此就止于1100 + 40白边。

全宽的版面看过,让我们看缩小点的版面,选单保持不变,但是内容区块变成单栏。

久违改版!imXD7 自适应 WordPress布景版型

当宽度再小一点的时候,进入到行动版的展开、收合选单。

久违改版!imXD7 自适应 WordPress布景版型

最后就是手机版面,直接把社群按钮弄下来,因为如果继续放右侧会塞不下去,刚好ICON FONT,尺寸蛮好调整的,所以就散布在LOGO下方了,虽然这样排起来有点丑不过在手机上看其实很密合哦(揪咪..有点噁XDD)。

久违改版!imXD7 自适应 WordPress布景版型

行动版选单

这就是採用CSS+jQuery的行动版选单,至少可以支援到两层啦!之前有别人家的自适应因为太早把选单做好再加上选单本身设计实在是不好调整,最后只好使用SELECT类型的手机板选单,不过个人颇不喜欢那样的设计,倒是喜欢这种一颗按钮的。虽说本来也有考虑用FB那种左侧滑出来的,不过那种还蛮容易让网页左右滑动乱跳,所以最后就用这款啰!

久违改版!imXD7 自适应 WordPress布景版型

最后,就是这样子了。这篇文章写到这里已经早上五点了,老人家不太适合这幺热血,在鸡啼声、鸟鸣声响起之前或是太阳伯伯出现之前,我应该先去睡觉一下。不过好在凌晨下大雨,至少太阳伯伯不会太快出现,让人整个心安。imXD7版型介绍到这边,至于imXD这是什幺意思,就单纯几个文字凑在一起,之前发现这名词想出来没多久后,就有人去注册imxd的网址XDD。早知道我也去注册一下~~~

换上这个imXD7之后,我想我会先将手机板先暂时关闭,哪天广告收益不好,再拿出来跟各位客倌打赏一下好了,来困~早安(?)




上一篇: 下一篇: