• »
  • WordPress
  • 網站佈景
  • » 網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升
    上一篇:

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升

    距上次佈景主題完工後,到今天也半年多了,於是在暑假期間,為網站做了新的樣式,給他新的面貌,相信因該有不少網友發現TWweeb凌晨便把新佈景上架了,但是更新文章則現在才發布~那就來看看這次的動機,與改變對多的地方吧~因為上一代佈景,似乎是粉紅色系的,對於一些讀者可能覺得不太美觀,也是,站長的審美觀本來就不好,所以這次就參考一些國外網站的佈景,以及國內幾位知名站長的網站設計,發現背景多以灰色系居多,因此這此以灰色為主軸打造,如果發現太多灰色,就不要太驚訝,若有不適應,也請在下方留言告知,改進!

    這次的佈景主題名稱取為iCFT,依樣是i系列的,而後缀的CFT,是來自英文單字ComForTable的縮寫,也就是舒適的意思。改變最多的,莫過於首頁的最新文章輪播,這是用jQuery所製作的輪播器,有點像Yahoo!新聞或許多官方網站文章的輪播。再來則是在文章下方做了的改變,有3個項目「作者資訊、相關文章、隨機文章」,依樣是用jQuery製作的~感覺這次用的到Java語法蠻多的,不過jQuery比較不會影響到網頁的讀取速度。

    再來則是文章上方的資訊列了,這次在上方加入瀏覽頁面地圖,讓你知道你身在網頁的何方,然後有下一篇文章、上一篇文章的項目。另外,在文章標題的上方則有文章的「分類」按鈕,當要觀看分類時,只要點一下,就會自己滑下來喔,另外右側多了一個Facebook粉絲專業的動態區塊,點子來自阿湯的sco_plus,我們謝謝他,另外網頁上方多了3格的廣告區塊,當然,廣告區塊不一定要放廣告,若屆時有一些重要資訊、活動消息,可以透過上方的區塊來發布訊息,一樣的,這也是來自就是教部落硬是要學兩個網站的idea~

     

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-01

    iCFT佈景主題小檔案

    • 佈景名稱:iCFT(iComForTable)
    • 佈景作者:TWweeb
    • 官方網站:http://twweeb.org/
    • 佈景下載:這次的佈景不會原則上不會釋出,因為是自用佈景,若有需求請私下洽談。

    佈景功能一覽

    • 一、佈景功能介紹
      1. 網站標題:可啟用Logo當作圖片標題,直接輸入圖片位址或上傳圖片。
      2. 自訂搜尋:可使用Google自訂搜尋,只要輸入cx值即可,若未輸入,則使用Wordpress內建搜尋系統。
      3. 首頁文章輪播:可啟用首頁最新四篇文章的輪播,如未設定則否。
      4. 推文按鈕:可於文章左側顯示推文按鈕,隨卷軸往下而往下。
      5. 廣告代碼:提供多個廣告位置放置廣告,可於文章標題下方插入廣告、首頁與每頁的第一篇文章下面、網頁下方…等多個廣告位置。
      6. 作者資訊、相關文章、隨機文章:顯示在文章結束處,若未選取,則只有文章相關資訊。
      7. 統計資訊:可插入網頁統計分析代碼,如Google Analytics…等。
      8. 右方Facebook粉絲專頁、網頁底部滑動置頂按鈕。
      9. 網頁上方3個廣告區塊,若未設定則否。
    • 二、佈景瀏覽器支援
      此佈景適用WordPress 3.0以上
      IE6~IE9、Chrome、Firefox、Opera、Safari

    佈景預覽

    首先當然是修改部分最多的首頁文章輪播,在右邊會顯示出最新的四篇文章,最自動切換,也可以手動切換,圖片的抓取為文章的第一張圖片。

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-03

    這則是右側的Facebook粉絲專業,當滑鼠移過去便會出現粉絲列表,會隨卷軸的動滾動而滾動。

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-02

    在網頁最下面,則有滑動置網頁頂端的小圖示,感覺有點不明顯,改天再來修正好了。

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-04

    而文章中,還有比較特別的是標題上方的分類按鈕,是用jQuery寫成的,感覺效果不錯,大家可以玩玩看。

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-06

    再來則是文章的分享,有提供右側與左側的分享按鈕,左側的分享區塊會跟著頁面走,也就是永遠讓你看的到,不過若你電腦的解析度為1024*768以下,可能會切到。

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-07

    而這是文章頂部的資訊,為了避免迷路,這次新增了遊覽位置的資訊,讓你隨時知道你身在網站的何方,下面則是[上一篇文章]與[下一篇文章]。

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-08

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-10

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-04

    廣告欄位的部分,在文章內頁有兩個區塊,一個是標題下方的文字廣告,另一則是圖像、動態…等中型的廣告。

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-05

    這是首頁與每頁第一篇文章下面的廣告。

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-11

    網頁底部邊欄前的廣告位置,最大寬度為900px。

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-18

    而文章裡常用的h3標籤,這次也做了修改,背景有漸層的感覺,若你使用IE瀏覽器可能未見到小效果,為避免顏色不齊一,IE瀏覽器顯示一致的顏色且無漸層效果

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-09

    而這是文章下方的資訊,作者訊旁的頭貼是依照你的email而顯示出的gravata大頭貼,作者簡介的部分,是直接擷取帳號設定裡的「個人簡介」,若要修改則請至「帳號」→「帳號設定」去修改。相關文章與隨機文章則是各取6篇文章。

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-10

    而在標籤、分類…等頁面下所整理出來的文章,僅顯示標題、留言與日期。

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-12

    而在首頁下方,則有全站分類的母分類,子分類將會在每一分類頁面中顯示

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-14

    以下是子分類的顯示,會顯示每一文章子分類所含的文章數目。

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-13

    後臺設置

    這是後台的設定選項,總共分成四項目(1.)圖片設定(2.)一班設定(3.)進階設定(4.)廣告設定。

    若要設定圖片,可直接輸入圖片網址,火使用Wordpress內建的上傳系統,但請先確認你的上傳資料夾權限設定為777方可直接使用「上傳圖片」的選項。

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-15

    進階設定的部分,可啟用文章縮圖、首頁文章輪播…等等,還有就是網站上方的三個廣告區。

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-16

    三個廣告曲示意圖:

    網站狂人更換新佈景《iCFT》舒適簡潔的灰色系佈景 閱讀舒適度大幅提升-17

     

     

    Advertisement
    Follow US
    About Post
    Date: 2012.07.31 Tags: , , , , , , , , ,
    Discussion - 4 Comments
    1. 訪客

      恩~網頁感覺變快了,看起來也比較舒服~

      TWweeb :
      謝謝〜

    Leave a Reply