imXD 新佈景上架,純CSS打造WordPress佈景

好像又好一陣子沒換佈景了,最近心血來潮突然想換個新佈景,所以就從星期一開始改造先前的iorz佈景,然後經過三天的時間就把它改好了,不過幾乎每天都拖很晚睡,整個都快往生了。但是看到佈景改好後,整個活力都來了,應該更有發文的動力吧XD。這回的佈景一樣採用純CSS打造,如果硬要說有用到圖,大概就是網站的LOGO和RSS訂閱這兩張圖片而已喔!

香腸不愛使用圖片主要原因是我不會畫圖,美工做出來都像狗啃的一樣,所以我只能默默地使用CSS去勾劃出網站的版型了,這回一樣有透過CSS3的圓角、區塊陰影、文字陰影來做特效,比較特別的是還採用了CSS漸層來讓佈景感覺色彩更多,似乎有背景漸層,不會讓顏色太單調。

不知不覺WordPress已經使用了四年多了,這期間也改過許多佈景、寫過許多佈景回顧一下有發文介紹的:iNoveGShine1.0GShine1.1SofreeLowYAiOrz,儘管改過、寫過這些,但畫圖部分永遠不長進(默)。不使用圖片除了剛剛提到香腸不會畫圖,另外還有一點就是圖片會比較吃網站流量,雖然網站多用圖片可以讓速度跑得很快,但相對的圖片用的多,網頁請求數量也會高,所以可以盡量少用就少用囉!

那就請各位看倌們看一下這次的主題吧!

imXD 新佈景上架,純CSS打造WordPress佈景

難得這一次佈景可以經過一年才替換,真的是讓我飽受驚訝,可能最近懶惰了吧XD。這次佈景主題叫「imXD」,為什麼會叫這個名字呢?其實我也是隨便取的,畢竟我還蠻喜歡XD這兩字母的,延續iOrz,所以就是這樣囉!(講話狂打轉XD)。

這回終於決定不對IE6做特別的修正,PNG透明背景會有問題也不想理了XD,畢竟IE9都出來了,IE10的預覽框架也現身了,IE6整個是上一個時代的產品,就假裝沒看見它好了。雖然話這樣講,不過還是有或多或少對IE6進行部分的顯示修正,應該看起來會差不多,除了少了一些CSS特效,以及留言區會有點小亂之外,其餘是都可以的。

補充】網頁下方數字分頁是非外掛,詳見:這篇教學

imXD 新佈景上架,純CSS打造WordPress佈景

 

滑鼠一過去會亮耶!

因為殺氣認為我本來弄得網站首頁排版跟之前一樣沒特色,阿貓是覺得線條太多,可是我又想要有線條,所以我就把線條一道左邊,然後文章與文章之間距離加高,就變成現在這樣了,另外弄了一個:hover,讓滑鼠一過去那區快可以亮起來!不知道使用:hover假類別針對區塊做滑鼠效果,是否為正統的CSS寫法XD。

imXD 新佈景上架,純CSS打造WordPress佈景

側邊欄漸層區塊

這回側邊欄的樣式可是想超久的,看來看去每個都是要使用圖片才會讓側邊欄不一樣,所以想說CSS3似乎有漸層功能,就爬文一下,然後就讓側邊區塊有漸層囉!雖然還查到說有個CSS3 PIE,可以讓IE有效果,不過似乎要多載入JS所以就作罷。

imXD 新佈景上架,純CSS打造WordPress佈景

文章內頁作者顯示

以前常常會有人把香腸和魷魚絲的發文搞混,雖然在標題下方就有個小小的作者是誰字樣,不過可能真的太小了,這回就參考PS雞捲的網站,弄出一個區塊,讓作者顯示更明顯,順便也把Facebook 讚按鈕嵌入這區,不知道這樣是否會增加按讚的機率呢?

imXD 新佈景上架,純CSS打造WordPress佈景

分類彙整頁面列表顯示

之前看到有一篇文章提到可以把WordPress的樣式打造成類似論壇的模樣,其實自己以前就有這樣稍微思考過,沒想到真有人實做出來,所以秉持著嘗試的精神,所以就把分類頁面和彙整頁面改成列表的模式,讓大家找文章可以比較好找,首頁就保持傳統的標題和摘要顯示囉!

imXD 新佈景上架,純CSS打造WordPress佈景

免外掛的相關文章與隨機文章

之前介紹過免外掛的相關文章隨機文章語法,這回把它完整應用到主題內,並搭配CSS讓不同區塊有不同的顏色顯示,讓他比較顯眼一些。

imXD 新佈景上架,純CSS打造WordPress佈景

Facebook留言功能上架!

最近Facebook留言嵌入到網站正夯,所以自己也不能落後,因此就手動加入了代碼讓網站也有FB留言框,使用者可以選擇要用哪一種留言方式發表,未來可能考慮把傳統留言模式關掉,因為停掉的話可以減少主機負擔也可以關閉兩個外掛,讓網站速度可以再好一點,不過哪天Facebook不見了,留言可能也會不見了,因此還在風險評估中。另外,傳統WordPress留言則是採用WordPress3.0新版的函數寫法,然後支援階層、分頁功能唷!

imXD 新佈景上架,純CSS打造WordPress佈景

imXD藍色版

最近幫朋友從痞客邦轉到WordPress,想說自己設計了一個新的佈景主題,問問看他有什麼建議,看看有哪邊可以改,不過他跟我說顏色太少了…囧,所以我就假裝沒聽到他的建議,就問他說要不要一起換,然後他就答應了,因為他想要藍色的樣式,所以昨晚特別改了一個給他,不知不覺又弄到三點多,整個都快爆肝了,幸好隔天早上停課可以睡晚一點XD。因為藍色版只是顏色代換掉,所以想要看完整DEMO請到卡咪龜網站。

展示網站撲倒の卡咪龜

imXD 新佈景上架,純CSS打造WordPress佈景

這回就不多做IE部分的截圖了,簡單說明一下,IE8、IE7看不到圓角、陰影、漸層特效,但網頁樣式顯示上是正常的,至於IE6就留言區會有點小怪,Facebook留言似乎也是如此,特效當然全部沒有。至於IE9除了CSS漸層特效無法顯示外,其餘的圓角、陰影都可以正常顯示的,但總歸一句,還是換用Chrome或是Firefox來上網吧!

謝謝各位看完這篇沒啥重點的佈景主題介紹文章,目前打算自己熟人使用,所以暫不對外公開,至於舊版佈景,其實我很想找時間改好然後分享,不過好像都沒那麼多時間。這次的版型希望可以撐個一年再換吧!對了對了,網站發現任何Bug,或是對佈景有任何意見、建議歡迎留言給我們唷!謝謝 :D