小清新風格,特地設計給非圖文式部落格使用
此版型將側欄固定在部部落格上方,並設計成下拉式選單方便使用者選取
首頁模式,點擊文章區塊任一處都可進入文章模式閱讀該篇文章,滑鼠移至文章處會變色
版面右方有三張圓形圖片,可自行替換,黑色框線與圖片是分開設計,所以不用擔心換圖還需要後製
詳細替換方式請看下方 " 版面設定 - 3 "
文章模式,按圖可放大
使用規定 <<<<<< 必看
- 幫本站兩個粉絲團按讚,Dribs & Drabs / Dribs & Drabs Designs。
- 禁止刪除或修改版型的版權宣告。
- 禁止複製部分語法,套用至非本站分享的版面。
- 本站分享的部落格樣式,可自行修改美化,勿再次發佈與替其他部落格修改。
- 套用發生問題請先看過版面設定和Q&A。
- 勿當伸手牌,版主沒有時間處理這類的問題。
- 此版型不再維護,若想要更專業的版型請參考半客製化服務內容。
CSS語法
對著文字框按右鍵可以全選,複製貼上至管理後台"自訂樣式"->"CSS原始碼編輯"
版面設定
1 - 此版面刪除側欄1,請至"後台">"側邊欄位設定"將所有有用到的元件移至側欄2
2 - 版面最大寬度限制800px
3 - 首頁圖片替換方法,在CSS語法裡版權宣告下方有個"三張圓形圖片設定",將網址替換掉即可
4 - 建議將"公告版位"開啟,版面會比較漂亮
5 - 套用若後發現上方的圓形變成方形,請升級你的IE! 或是改用其他瀏覽器
Q&A
1 - 為什麼三個圓形圖片都是設定同個網址,卻不同圖案?
我將三張照片並在同一個圖檔裡,利用設定圖檔的位置秀出不同的照片,原始圖檔是以下這張
2 - 為什麼我看到的版面是三個方形而不是圓形?
升級你的IE吧,孩子!
* 如果上述沒有你的問題,可參考另一篇 Q&A問答集
更新
2014/08/24 更新快捷功能BAR,通知視窗往右移
2014/12/16 解決滑鼠移至圖會縮放的問題
2015/12/15 解決在手機上版面位移的問題
2016/07/23 更新快捷功能BAR跑位問題
2016/10/22 更新快捷功能BAR跑位問題與上方黑底下拉選單拉長
♥ 更多部落格版面分享: http://www.dribs-drabs.com/blog/post/434454491
♥ 部落格CSS語法教學: http://www.dribs-drabs.com/blog/post/437150992