芳喵自製的第一款佈景《fangcat v1》

芳喵自製的第一款佈景《fangcat v1》

之前「芳喵架站筆記」的佈景,是我第一個完全自己製作的佈景,放在這裡留作紀念。先來個全身照吧!

fangcatv1full

WordPress佈景fangcat v1

佈景名稱:fangcat v1

佈景作者:芳喵

備註:Html5+CSS3純手工打造

是的,這佈景就叫「fangcat v1」,關於想名字,我在這方面實在是很沒創意,所以網站名稱也就是我玩魔獸的ID再加上「架站筆記」四個字,簡單明瞭,一點也不麻煩。日後網站佈景若有改版,就延續這個簡單明瞭的名字,「fangcat v2」、「fangcat v3」,若有好心人建議個好名稱,很樂意參考阿!

萬事起頭難,尤其是一個還沒有內容的網站。整體版型在設計前,先參考了很多部落客前輩的網站,例如:「硬是要學」、「就是教不落」、「重灌狂人」、「梅問題教學網」、「香腸炒魷魚」等,感謝這些前輩。參考完之後就知道我想要哪些東西,可以開始動手做了。

這個佈景完全是純手工打造,不是拿別人的佈景來改,所以製作時間也比較長。製作過程大約如下:

  1. <div>+CSS做版型布局
  2. <div>+Html+CSS+CSS3做細部設計
  3. 套上Html5語意標籤
  4. 套上WordPress函式並寫上必要程式

現在來看看各部位,首先是頭部,

header

很明顯,我大大地參考了「梅問題教學網」,感謝他,我真的很愛這個樣子,上方選單多半放的是頁面,文章內容以外的東西,下方選單則是文章分類。因為文章還不多,所以就沒有特別放文章分類的區域,暫時先擺在選單。

接下來是三格廣告區,很多前輩都有放,我也不例外的放了,當然現在沒人跟我買廣告,所以放的是我自己網站設計的廣告囉!還有我推薦的書。事實上,主要是因為我真的很喜歡這三格,擺上去就覺得很好看,感覺上也會覺得網站內容有多一點,所以硬是要擺,嘿嘿!

ads3

緊接著是將最新文章獨立出來,不同於底下的文章列表,這裡終於用上了我最喜歡的花紋。另外可以看見,文章標題的文字做了陰影處理。而文章列表的縮圖,我採用「特色圖片」的方式+媒體預設縮圖設定大小,並沒有另外寫程式抓第一張圖片進行縮圖,因為這樣最省程式碼,而且可以指定文章內任何一張圖片,若是文章內不準備放圖片,也可以指定一張預設的圖片,這樣很省事。

newest

右邊的側邊欄,搜尋使用了Google搜尋取代WordPress內建的搜尋,社群訂閱則是做了圖片按鈕,滑鼠經過會變色。

side1

底下的熱門文章和推薦文章則是使用了外掛,然後修改了外掛樣式以符合我的佈景。

side2

在首頁以外的頁面都放上了麵包屑導航列

bread

文章底部放了作者介紹欄,這大概是全站中唯一有我照片的地方,這張照片我挑了很久,雖不滿意,勉強可以接受,因為感覺上跟我本人有點不像,但是我是宅女,一年難得出門三次,就更別提照相了,好姐妹說下次我有出門的話,幫我拍張好看的。(前提是我有出門的話)

author

在分類頁面,我放上了分類名稱以及描述說明,因為我的某些分類跟其他站長不太一樣,所以放上點說明可能比較容易讓人了解。

catgory

在芳喵書櫃中,我放了個人偏愛的書籍,當然是真的好用,而且是我必備的工具書,才推薦給大家!本來想為每本書寫個介紹文的,但是,好像又寫不到一篇文章那麼多文字,就決定以這樣的版面,可以做適當的簡介。

book

介紹完畢。

  • 如果你想獲得更多資訊,請前往「全站導覽」查看各專題的文章目錄,說不定你的問題已經有文章可以解答。
  • 我個人臉書沒有「自律神經失調」相關資訊。
  • 若是想訂閱追蹤本站最新文章,歡迎使用「Email訂閱更新」、「RSS訂閱」、「Facebook粉絲團」(請設定通知和搶先看)、「Google+」、「Twitter」。

創用 CC 授權條款
芳喵隨筆由芳喵製作以創用 CC 姓名標示-非商業性-禁止改作4.0國際授權條款釋出.

Author: 芳喵

初衷只是紀錄與分享,默默地寫著,突然發現,寫作、分享、解惑,仍然是我最熱愛的事,曾經放棄了這些,竟由生病帶領我回到這條路上,塞翁失馬焉知非福。