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

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

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

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

文章目錄
  1. 那就請各位看倌們看一下這次的主題吧！
  2. 滑鼠一過去會亮耶！
  3. 側邊欄漸層區塊
  4. 文章內頁作者顯示
  5. 分類彙整頁面列表顯示
  6. 免外掛的相關文章與隨機文章
  7. Facebook留言功能上架！
  8. imXD藍色版

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

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

在Google News上追蹤我們最新文章
標籤
香腸
香腸

喜歡在網路上透過文字與圖片分文章教學，默默地用鍵盤烤了9年的香腸。另外還身兼阿腸接案餬口飯吃。對了，別叫我阿腸，請叫我香腸，這樣我才知道你看我部落格長大的。

文章: 1781

相關文章

47 則留言

  1. 想問一下如何加作者相片，簡介，個人介紹，其他文章，facebook和google+讚好？
    能否寫一篇教導文章？

    香腸回應：
    你提到的部分很多我網站上都有教學了捏…..請善用右上角搜尋一下囉!

  4. 在台灣的網頁上搜尋：如何備份還原wordpress。還真的找部到完全符合的資料，大部分都是在說備份資料庫和DB的外掛。
    可否請教您，到底後台下載的XML和備份的DB有什麼不一樣？？？
    如何還原一個wordpress到不同的主機？？？
    您有提到主機中的備份功能。YES，如果我備份的網站包含DB，然後呢？
    Wordpress後台完全沒有載入還原DB的功能，所以到底如何搬家還原？？？
    要重新安裝wordpress+themplate+後台依依設定零零索索的許多東西。。。
    還是只要將備份的網站，重新上傳到新的主機，一切就都照舊？不用什麼設定，後台的零瑣設定也都會記憶？
    DB如何還原？用主機的的管理後台還原？
    感謝您

    香腸回應：
    XML匯出是只符合WP
    還原請到高登那篇爬文嚕~
    後台設定，基本上用DB備份都會保留住

  25. 雖然你說不會畫圖，不過你使用純CSS做出來的主題也是十分的漂亮了
    不用再強調圖片的部分了！
    本來就是人各有所長了~

    香腸回應：
    哈~ 謝謝你 ^^

  28. 香腸大啊～換了這個真的變漂亮啦！
    （有種讓人繼續逛下去的動力）
    整個就是明亮爽朗的Style
    加油啦囉！

    香腸回應：
    所以如果之前不換，你就不來了..哭哭 (誤)

  32. 原來純CSS 有這麼多花樣＠＠
    找個時間我也要努力K一下，拿自己的Blog開刀…hehe…

    留言系統的部份香腸大可以試試 Disqus 的留言系統啊 ！.
    留言完全可以導入導出，也支援臉書帳號，更支援 Twitter, Google, Yahoo 及其他 OpenID 耶！.
    Disqus 正夯才對吧XD

    • 補充一下，臉書的留言系統要是 Script 被擋掉就看不到留言，但 Disqus 在純 HTML 下依然可以顯示留言喔！

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。