s

Blog_02

小清新風格,特地設計給非圖文式部落格使用

此版型將側欄固定在部部落格上方,並設計成下拉式選單方便使用者選取

首頁模式,點擊文章區塊任一處都可進入文章模式閱讀該篇文章,滑鼠移至文章處會變色

版面右方有三張圓形圖片,可自行替換,黑色框線與圖片是分開設計,所以不用擔心換圖還需要後製

 

詳細替換方式請看下方 " 版面設定 - 3 "

 

Blog_05

文章模式,按圖可放大

 

使用規定 <<<<<< 必看

 

 

CSS語法

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

 

版面設定

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

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

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

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

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

 

Q&A

1 - 為什麼三個圓形圖片都是設定同個網址,卻不同圖案?

我將三張照片並在同一個圖檔裡,利用設定圖檔的位置秀出不同的照片,原始圖檔是以下這張

Blog_02

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

文章標籤

Dribs & Drabs 發表在 痞客邦 留言(148) 人氣()