分享 | 痞客邦PIXNET部落格版面樣式CSS – GIFT

小清新風格,特地設計給非圖文式部落格使用。此版型將側欄固定在部部落格上方,並設計成下拉式選單方便使用者選取。首頁模式,點擊文章區塊任一處都可進入文章模式閱讀該篇文章,滑鼠移至文章處會變色,版面右方有三張圓形圖片,可自行替換,黑色框線與圖片是分開設計,所以不用擔心換圖還需要後製。

 

版型-首頁

Blog_02

 

版型-文章頁

Blog_05

 

使用規定

  • 幫本站兩個粉絲團按讚,Dribs & Drabs / Dribs & Drabs Designs
  • 禁止刪除或修改版型的版權宣告。
  • 禁止複製部分語法,套用至非本站分享的版面。
  • 本站分享的部落格樣式,可自行修改美化,勿再次發佈與替其他部落格修改。
  • 套用發生問題請先看過版面設定Q&A
  • 勿當伸手牌,版主沒有時間處理這類的問題。
  • 此版型不再維護,若想要更專業的版型請參考半客製化服務內容

 

CSS語法

對著文字框按右鍵可以全選,複製貼上至管理後台”自訂樣式”->”CSS原始碼編輯”

 

版面設定

1 – 此版面刪除側欄1,請至”後台”>”側邊欄位設定”將所有有用到的元件移至側欄2

2 – 版面最大寬度限制800px

3 – 首頁圖片替換方法,在CSS語法裡版權宣告下方有個”三張圓形圖片設定”,將網址替換掉即可

4 – 建議將”公告版位”開啟,版面會比較漂亮

5 – 套用若後發現上方的圓形變成方形,請升級你的IE! 或是改用其他瀏覽器

 

Q&A

  • 為什麼三個圓形圖片都是設定同個網址,卻不同圖案?
    我將三張照片並在同一個圖檔裡,利用設定圖檔的位置秀出不同的照片,原始圖檔是以下這張
    Blog_02

 

*   如果上述沒有你的問題,可參考另一篇 Q&A問答集

 

更新

2014/08/24  更新快捷功能BAR,通知視窗往右移

2014/12/16  解決滑鼠移至圖會縮放的問題

2015/12/15  解決在手機上版面位移的問題

2016/07/23  更新快捷功能BAR跑位問題

2016/10/22  更新快捷功能BAR跑位問題與上方黑底下拉選單拉長