Photo


I'm Wei

Traveler / Photographer / Designer

旅行除了美麗的風景,最重要的是途中發生的點點滴滴,唯有照片與文字的交織,才能讓美麗的回憶不朽。這本部落格是份珍貴的禮物,獻給多年後的自己,有那麼一天,曬著午後慵懶的日光,溫習當年青春的味道。部落格取名為 Dribs & Dribs,為 "點點滴滴" 之意。

▸ Facebook:Dribs & Drabs

▸ Facebook:Dribs & Drabs - Designs

▸ Instagram:dribs__drabs

▸ Mail:weilife.blog@gmail.com

▸ Pixnet訂閱:weilife

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://weilife.pixnet.net/blog/post/434454491

♥ 部落格CSS語法教學: http://weilife.pixnet.net/blog/post/437150992

文章標籤
創作者介紹

Dribs & Drabs 點點 滴滴

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


留言列表 (133)

發表留言
  • 悄悄話
  • 悄悄話
  • 島田春奈
  • 設計不錯
  • 謝謝你 >////<

    Dribs & Drabs 於 2014/08/27 08:31 回覆

  • 悄悄話
  • 妞比爹
  • 啊..好舒服的設計,值得暫停adblock,把全部廣告按過一輪 :-)
  • 哈,謝謝你 :D

    Dribs & Drabs 於 2014/08/29 16:41 回覆

  • vienna920
  • i請問此版面是不是不支援ie?
  • 我的電腦只有IE11,沒有舊版的IE可測試
    IE11看起來是正常的,舊版的我就不知道了

    Dribs & Drabs 於 2014/08/30 15:23 回覆

  • 悄悄話
  • 悄悄話
  • 光
  • 這次的設計也好漂亮哦!
    結果忍不住又換成這個設計。
    您的設計總是讓人忍不住更新部落格的風格呢!
    謝謝您:)
  • 不客氣 :D
    感謝你的支持 .゚ヽ(*´∀`)ノ゚.:

    Dribs & Drabs 於 2014/08/31 22:04 回覆

  • Claudia's family
  • 這個版型可以用下拉式選單嗎?我嚐試過,但黑色框框的高度會跑掉!
    另三個小圈圈的照片需要多少解析度或大小呢?換了但是顯示出的照片沒有全圖,只是照片的一小部份而己!
  • 文章分類的下拉式套用會有問題,寫法可能要變,不建議套用
    三個圈圈的圖片大小語法裡都有寫喔,在圖片網址上方的註解

    Dribs & Drabs 於 2014/09/03 10:37 回覆

  • IcE冰爵緗
  • 很好看的樣式^^
    只不過有點不習慣 怪怪的
    因為右手邊很空 不過感謝分享:D
  • 哈,你可以把你的圖調大喔~

    Dribs & Drabs 於 2014/09/04 12:35 回覆

  • 悄悄話
  • 老張
  • 你的設計讓人感覺好舒服喔!!
  • 謝謝你 :D

    Dribs & Drabs 於 2014/09/08 09:01 回覆

  • sarettaye
  • 好棒好棒的感覺!
    我偏愛簡單舒服的設計!!
    目前對於自己的部落格沒有太大想法,希望未來要真正建置時能再請您幫忙! ^___^
  • 沒問題 :D

    Dribs & Drabs 於 2014/09/08 09:04 回覆

  • 悄悄話
  • Amber
  • 好漂亮的設計^^
    已經套用惹!謝謝!
  • :D

    Dribs & Drabs 於 2014/09/10 20:44 回覆

  • 悄悄話
  • 訪客
  • 請問一下這個css樣式在ie下上方的下拉選單變成由上往下而非左右排列,是否有解,感謝
  • 解就是...更新IE,哈
    因為我的電腦沒有舊版IE,所以也不能測試,sorry囉!!

    Dribs & Drabs 於 2014/09/11 13:00 回覆

  • Amber
  • 非常謝謝你!
  • 不客氣 :D

    Dribs & Drabs 於 2014/09/11 22:32 回覆

  • 涵涵
  • 請問不能修改圖片是只甚麼圖片?
    我以套用!然後上面3格徒騙我換掉了(不知道事只那個嗎?
    然後呢真的非常喜歡你做的!!
    我可以更改背景圖片嗎?
  • 是指圖片的版權宣告喔,三個圓形的圖可以更換 :)

    Dribs & Drabs 於 2014/09/13 18:48 回覆

  • miao
  • 好棒啊!!!喜歡你的設計
  • 謝謝你 :)

    Dribs & Drabs 於 2014/09/20 07:48 回覆

  • 悄悄話
  • 敏翎
  • 謝謝你~~覺得很好看就套用^^
  • 謝謝支持 :)

    Dribs & Drabs 於 2014/09/29 17:33 回覆

  • 悄悄話
  • Dimple_嫺兒
  • 拿走囉 ^_^
    姊姊做的很好看 :-*
  • 謝謝你的支持 :)

    Dribs & Drabs 於 2014/10/05 09:28 回覆

  • 悄悄話
  • 魚子xi
  • 拿哦 很喜歡這個設計<3
  • 感謝支持 :D

    Dribs & Drabs 於 2014/10/06 22:28 回覆

  • Luretia
  • 很喜歡您的設計~每次看到有新的都要換一下XDD
    希望您有更多新的作品!會繼續支持的~~~
  • 感動得要哭了Q____Q
    最近很忙,只能設計客戶的版面,都沒時間更新我的版面ORZ
    更不用說設計分享的版面了.....不過我會繼續努力的

    Dribs & Drabs 於 2014/10/15 09:51 回覆

  • 是羊
  • 超美的!!謝謝分享
  • 不客氣 :)

    Dribs & Drabs 於 2014/10/25 21:36 回覆

  • 悄悄話
  • 小樂
  • 好棒~~~好喜歡你的設計^^
    雖然不多卻很特別 ♥
  • 謝謝你的稱讚 >////<

    Dribs & Drabs 於 2014/12/03 09:02 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 大妞
  • 整個好喜歡這風格,
    還有特別的設計,
    辛苦你了,
    謝謝分享!
  • 不客氣,謝謝你的打氣!

    Dribs & Drabs 於 2014/12/26 18:12 回覆

  • Cereal 斑鼻子
  • 這個版面設計很棒欸~
    謝謝你~
    不過我想問一下,我想更換圈圈裡的圖案
    我已經有看你分享的Q&A,也試過更換網址,但還是無法更換成功
    我的照片是用已經上傳到痞客幫的開放照片
    你的好像是png檔,我的是jpg檔,不知道會不會有影響
    謝謝
  • jpg跟png沒有影響喔~
    我要看到失敗的東西才有辦法解決,你這樣描述我也不知道問題在哪
    謝謝你的稱讚 :D

    Dribs & Drabs 於 2014/12/26 19:45 回覆

  • 悄悄話
  • Yiyun ♥ 이윤
  • 感謝你的分享♡好喜歡這個版面的設計:)
  • 謝謝你 :D

    Dribs & Drabs 於 2015/01/22 21:10 回覆

  • KongKong
  • 真的很好看~~~
    謝謝分享 <3
  • 感謝你的支持 :D

    Dribs & Drabs 於 2015/01/24 13:44 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • z04z04pig
  • 你的版面很有現在流行的手繪清新風格阿 好喜歡~
    辛苦了唷 謝謝分享~
  • 感謝你的支持 :)

    Dribs & Drabs 於 2015/02/05 08:17 回覆

  • anoan
  • 謝謝分享
    已取用了:)
  • :D

    Dribs & Drabs 於 2015/02/16 19:37 回覆

  • 悄悄話
  • Yaping
  • 有試著改三個圈圈的圖片,但是沒有辦法ㄝ~
  • 要給我看失敗的地方,才能知道錯在哪

    Dribs & Drabs 於 2015/03/09 22:04 回覆

  • 亞曼達
  • 謝謝分享~很好看的設計!!!
  • 感謝支持 :)

    Dribs & Drabs 於 2015/03/11 08:21 回覆

  • htjh00116
  • 謝謝你的分享,佛心來著,喜歡你設計的風格 :)
  • 感謝你的支持 :)

    Dribs & Drabs 於 2015/03/17 19:08 回覆

  • pae3girls
  • 謝謝你的分享~好喜歡這種清新風格的樣式^^
  • 感謝你的支持 :D

    Dribs & Drabs 於 2015/03/20 16:36 回覆

  • Yaping
  • 三個圈圈要貼上的連結處,將網址貼上後變成空白~@@
    怎麼貼給您看呢?
  • 我需要看到畫面,空白沒關係。另外你可以先檢查一下圖片大小有沒有正確。

    Dribs & Drabs 於 2015/03/21 11:42 回覆

  • romischen
  • 妳好,想請教一下,為何套用樣式後,最上面黑黑的bar都沒有出現呢?
    謝謝!樣式都很漂亮!很想每種都用用看XD
  • 請看版面設定-1

    Dribs & Drabs 於 2015/03/24 08:05 回覆

  • 頑愚
  • 很漂亮!謝謝:)
  • 不客氣 :)

    Dribs & Drabs 於 2015/04/29 15:30 回覆

  • 悄悄話
  • 悄悄話
  • 唯凜
  • 很棒很讚很有美感的設計哦^ ^
    請問我的圖片要怎麼調大小呢..?
    複製網址上去會太大張:<
  • 需要有製圖軟體,像photoshop之類的,免費的可以找找xnview也可以調大小

    Dribs & Drabs 於 2015/05/17 18:39 回覆

  • privatever
  • 非常喜歡這個設計^^ 很美喔
    謝謝你的分享
  • 不客氣:)

    Dribs & Drabs 於 2015/05/21 12:50 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • finki
  • 用了這個版面!! 好喜歡啊~~~ 謝謝,好喜歡你的風格
  • 謝謝你的稱讚,我會更加努力的 :)

    Dribs & Drabs 於 2015/06/18 21:30 回覆

  • sdf13y8
  • 最近剛開始使用部落格,很喜歡你的版面,說明介紹也很簡單,謝謝你的分享!很喜歡你的風格!加油!
  • 謝謝你 >/////<
    我會繼續加油!!

    Dribs & Drabs 於 2015/07/03 20:36 回覆

  • 薇柔
  • 非常清新的感覺ˊˇˋ
    我很喜歡你的每個樣式成品噢噢噢

    這個就讓小女打包了♥
  • 謝謝你的稱讚,好開心 >////<

    Dribs & Drabs 於 2015/07/13 22:43 回覆

  • ★滋滋★
  • 立刻使用了~謝謝您大方的分享~
    讓我的版面有了新的畫面~~
  • 謝謝支持 :)

    Dribs & Drabs 於 2015/07/30 22:54 回覆

  • chlinj1005
  • 非常漂亮~清爽簡約~也很好操作!!!
    感謝您的分享~~~
  • 謝謝你的喜歡 :)

    Dribs & Drabs 於 2015/08/07 09:19 回覆

  • 悄悄話
  • 曇默✿
  • 好棒,拿走了欸ˊQˋ!!!
  • 謝謝支持 :)

    Dribs & Drabs 於 2015/08/20 11:29 回覆

  • write800704
  • 好漂亮的網頁 感謝 ^^
  • 不客氣 :)

    Dribs & Drabs 於 2015/08/31 15:35 回覆

  • 舞魅娘
  • 最終使用這款樣式(每個都很美,很難抉擇呢)
    要連結這裡(實在太讚了)這種樣式分享很少,
    而且又很美觀、實用!
    找不到連結LOGO,所以擅自做了一個,
    圖片截圖使用您部落格藍色花朵為基底 ~ 希望你喜歡。
    純圖未加閃 http://wumei2015.pixnet.net/album/photo/611055304
    加閃星 http://wumei2015.pixnet.net/album/photo/611055301
  • 哇!!謝謝你幫我做了logo還放了連結,logo加閃字好懷念的東西,姐十幾年前也有玩過(不小心暴露年紀了,十幾年實在是好恐怖的數字啊,尖叫!!!)

    Dribs & Drabs 於 2015/09/02 10:52 回覆

  • AETW
  • 真的很有質感:) 給你10000000個讚 (Y)
  • 謝謝你這麼喜歡 :D

    Dribs & Drabs 於 2015/09/16 22:33 回覆

  • 悄悄話
  • cindy
  • 謝謝您的分享 我有套用喔
  • 謝謝你的支持 :D

    Dribs & Drabs 於 2015/09/21 19:51 回覆

  • 悄悄話
  • 悄悄話
  • fret
  • 漂亮的設計!!
    我超喜歡的~~已使用:)
  • 謝謝支持 :)

    Dribs & Drabs 於 2015/10/07 12:07 回覆

  • fret
  • 想請問一下版主,如果我想在這個版型內嵌入您之前分享的IG外掛格式在底部的話要怎麼修改orz 我把另一篇的語法貼上去沒有辦法使用耶
  • ig的語法跟版面的語法是放在不同地方,請先檢查語法放置的位置是否正確

    Dribs & Drabs 於 2015/10/07 11:14 回覆

  • Sora
  • 借用,謝謝
    期待您有新作品,讓我打日記更愉悅,很喜歡您的設計^__^
  • 謝謝你的支持,近期還會推出新作品喔 :D

    Dribs & Drabs 於 2015/10/13 22:49 回覆

  • CHIEN
  • 感謝你的分享,我好喜歡這種特別的樣式!!!
    看了就很舒服
  • 謝謝你的支持 :D
    今天又分享一款了,也可以去看看 :)

    Dribs & Drabs 於 2015/10/19 23:05 回覆

  • 雪人波波
  • 感謝分享! 好美喔~~~每個樣式都很喜歡~~
    不過因為圖片的關係,好像只能套Gift版
  • 謝謝你的支持 :)

    Dribs & Drabs 於 2015/11/26 10:31 回覆

  • 悄悄話
  • 用用你好嗎
  • 請問主背景可以換圖片嗎? 是在html中哪個位置呢??謝謝~
  • 可以換喔,方法文章中有說明。

    Dribs & Drabs 於 2016/01/14 14:09 回覆

  • 悄悄話
  • sition01
  • 請問,我想要一個刪除上方可以快速連結到相簿,留言板等四個快速連結的樣式
    請問板大有推薦嗎?
  • 加上這行就可以囉!
    #navigation{display: none;}

    Dribs & Drabs 於 2016/02/01 22:55 回覆

  • 悄悄話
1 2
找更多相關文章與討論