Photo


I'm Wei

Traveler / Photographer / Designer

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

 

▸ Facebook:Dribs & Drabs

▸ Instagram:dribs__drabs

▸ Mail:weilife.blog@gmail.com

▸ Pixnet訂閱:weilife

這個版本是從"拍立得圖文集"修改來的,讓不是圖文的部落格也能使用,當然文章中要放入照片也是OK的唷 :D

本樣式的特點為部落格上方的下拉式側欄與左方的隱藏式側欄,讓版面乾乾淨淨好閱讀!

不會修改CSS的朋友,比較適合套用這個版本,應該不會出現甚麼大問題 

 

 

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

 

 

CSS語法

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

 

版面設定

1 - 關於側欄1的元件,放置在版面左方的隱藏式欄位裡

2 - 關於側欄2的元件,放置在文章正上方的下拉式選單

3 - 若文章內文圖片寬度超過800px,會自動將圖片縮放成寬度800px

 

Q&A

1 - 部落格上方的下拉式選單與登入資訊(快捷功能BAR)想要移除,該如何修改?

請將以下CSS語法加在全部語法的最後

.topbar-placeholder{display: none;}

#blog-category{display: none;}

#links-row-2{display: none;}

2 - 部落格左方的觸控式側欄想要移除,該如何修改?

請將以下CSS語法加在全部語法的最後

#links-row-1{display: none;}

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

 

更新

2014/06/10  解決痞客邦新增快捷功能BAR造成破壞版面的問題

2014/06/24  解決側欄2元件名稱長度的限制

2014/07/21  解決痞客邦快捷功能BAR小改版導致版面錯位

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

2015/02/23  解決通知訊息超出頁面的問題

2015/03/10  解決快捷功能BAR錯位的問題

2015/12/14  解決在手機上版面錯位的問題

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 留言(231) 人氣()


留言列表 (231)

發表留言
  • 人類
  • 這版型真的好美,未拿先推:)
  • 謝謝 :D

    Dribs & Drabs 於 2014/04/29 08:15 回覆

  • S_戳戳小酒窩
  • 果然還是簡單的樣式最喜歡了
    謝謝版主的分享哦 :">
  • 謝謝你的支持 :D

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

  • 御(๑´ω`๑)
  • 好好看!!!!喜歡這種的風格><
    謝謝大大分享:3
  • 不客氣,感謝你的支持 :D

    Dribs & Drabs 於 2014/04/29 17:00 回覆

  • 漾❀
  • 簡單又耐看的樣式~
    感謝分享 我套用囉:>
  • 不客氣,謝謝支持 :D

    Dribs & Drabs 於 2014/05/01 20:32 回覆

  • Sylvia
  • 謝謝版主無私的提供美版唷...
    有兩個問題需要請教一下版主>"<
    1. 針對 Q&A (1-2),因為我的項目只有六個 ,我改成了margin-left:-6*114/2px;....結果側欄2元件 現在對齊右邊.....不知道是哪邊設錯了。
    2.因為我文章標題比較落落長,如果想改成兩行,不知道該如何修改呢?
    謝謝!
  • 1) 那個數字需要計算出來,不可以寫數學式子,margin-left: -342px;
    2)
    以下CSS的前三行去掉,加入第四行
    title h2{
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height: 200%;
    }
    修改數字,元235改270
    .article-content{padding-top: 270px;}
    修改數字,原n+5改n+4
    .article-content p:nth-child(n+4){display: none;}

    ps.你套用的不是這個樣式,以後請在套用的樣式留言喔

    Dribs & Drabs 於 2014/05/02 16:57 回覆

  • Sylvia
  • 哈哈哈哈~我傻了N次~竟然直接寫成數學式子問錯地方......真是不好意思~~~還有謝謝你的耐心回答唷^^
  • 數學式子那邊我沒有寫得很清楚,很容易會被誤會成這樣 ORZ
    不客氣喔 :)

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

  • Ju
  • 覺得真的很喜歡~~~
    側欄都收乾乾淨淨的><
    不太會css這種所以就直接套用了!!!
    謝謝你!!!!!
  • 不客氣喔 :D

    Dribs & Drabs 於 2014/05/06 08:07 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 口妮姬娃
  • 天啊 超美的~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  • 謝謝你的稱讚 :D

    Dribs & Drabs 於 2014/05/23 16:29 回覆

  • 悄悄話
  • 悄悄話
  • 律裡
  • 謝謝版主題供!!嗚嗚超美的QQ
  • 不客氣:D
    謝謝你的讚美!

    Dribs & Drabs 於 2014/05/29 20:56 回覆

  • 婷婷
  • 拿,謝謝分享唷~
  • 不客氣 :D

    Dribs & Drabs 於 2014/05/30 08:10 回覆

  • 王大可
  • 以套用 謝謝你的分享
  • 不客氣,謝謝你的支持 :D

    Dribs & Drabs 於 2014/06/11 08:21 回覆

  • 悄悄話
  • 悄悄話
  • YH_Zhang
  • 請問版主~我想問幾個問題
    1.字要怎麼改顏色
    2.側欄要如何改到右邊

    版面很漂亮~
  • 你應該到套用樣式的那篇文章留言
    (1)
    如果你是說超連結的字體顏色
    你可以搜尋這個色碼#e9546b,把它取代成你想要的顏色
    (2)
    找到以下,把left改成right
    #links-row-1{left: -210px;}
    #links-row-1:hover{left: 0px;}
    以下right改成left
    #links-row-1 .box:first-child{background: url(...) right 10px no-repeat;}
    接著以下數字改成40,可自己再微調一下
    #links-row-1{padding-left: 10px;}

    Dribs & Drabs 於 2014/06/17 22:25 回覆

  • 悄悄話
  • 悄悄話
  • totoroxji
  • 很喜歡這個版型,謝謝分享喔!
  • 不客氣,謝謝你的支持 :D

    Dribs & Drabs 於 2014/06/22 22:25 回覆

  • 悄悄話
  • 悄悄話
  • 書瑜
  • 好乾淨的樣式,好喜歡,感恩喔!!!
  • 感謝支持 (*˘︶˘*)

    Dribs & Drabs 於 2014/06/28 11:00 回覆

  • 悄悄話
  • 蓮霧
  • 好簡約的感覺=D
    很喜歡(最近又回來用部落格了!!)謝謝妳的分享=D
  • 謝謝你的支持 :D

    Dribs & Drabs 於 2014/07/14 14:21 回覆

  • 悄悄話
  • Blair
  • 謝謝分享
  • ヾ(*´∀`*)ノ

    Dribs & Drabs 於 2014/07/19 07:48 回覆

  • hahaha810522
  • 謝謝你 !! 我套用另一個了
    你的樣式我都很喜歡 >"<
  • 謝謝你的支持 :D

    Dribs & Drabs 於 2014/07/20 20:27 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 脆笛酥
  • 謝謝你哦已經改好了ya
  • 不客氣 :D

    Dribs & Drabs 於 2014/07/25 08:26 回覆

  • 悄悄話
  • 悄悄話
  • meliora
  • Thanks for the sharing! 我花了兩個小時找樣式,終於找到這裡!
  • 不客氣喔 :)

    Dribs & Drabs 於 2014/07/31 21:19 回覆

  • 御糸音凜希
  • 謝謝,現在的部落格看起來比較特別,也比較整齊。。。
    那個我想問問能不能移除廣告?我之前的方法在這裡不能用
    如果不能的話沒關係哦~
    最後還是謝謝您的分享:) (鞠躬
    我推一個X)
  • 這個版型的話,建議方法就是像你現在做的這樣,把側欄1往上移直到廣告看不見
    如果是要完整消除的話,可以google一下有其他人提供解決方法

    Dribs & Drabs 於 2014/08/03 18:00 回覆

  • 艾醬
  • 請問版主...
    (我又改回原本習慣的版面了 >///<)
    要如何將中間白色的主要區塊擴大呢?
    因為我的照片是884x587
    希望可以擴寬
    謝謝 ^^
  • 修改這裡喔
    #content{width:800px;}
    上方白色的底如果想順便修改的話,以下
    #blog-category{width, margin-left}
    .topbar{margin-left}
    #links-row-2{margin-left}

    Dribs & Drabs 於 2014/08/06 08:25 回覆

  • 艾醬
  • 還有...
    我更改字型後,
    最上面的格名"艾布蕾"下的"名片"
    為何會跑到下一行呢?
    再次謝謝~~~
  • 加大這裡#navigation{width:200px} 加大一點就好了

    Dribs & Drabs 於 2014/08/06 08:22 回覆

  • 悄悄話
  • 璃Uli
  • 好厲害,帶走囉
    每次想自己用,覺得眼睛都要脫窗了TTTT
    有妳這麼好的藝術者和分享者真好=W=
    期待你的心作品歐!!!
  • 謝謝你的稱讚,我會努力創作新作品 :D

    Dribs & Drabs 於 2014/08/06 15:11 回覆

  • Amber
  • 謝謝你的分享,版型好漂亮,朋友看了也稱讚,
    3Q!!!
  • 不客氣 :D

    Dribs & Drabs 於 2014/08/10 13:26 回覆

  • benlucy
  • 非常有質感的版型!謝謝你
    剛剛更換版面之後看了,心情好好!
  • 不客氣,感謝你的支持 :)

    Dribs & Drabs 於 2014/08/11 08:05 回覆

  • 米妮
  • 很美麗 好喜歡~~~
    對於樣式很無法
    希望能再看到你分享更多的樣式喔 :)
  • 謝謝你的支持 :)

    Dribs & Drabs 於 2014/08/12 10:14 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Min
  • 感謝分享!!!很漂亮//
  • 不客氣 :D

    Dribs & Drabs 於 2014/08/19 17:56 回覆

  • Luretia
  • 謝謝囉!非常漂亮好看的設計:))
  • 不客氣 :D

    Dribs & Drabs 於 2014/08/25 14:30 回覆

  • 悄悄話
  • 悄悄話
  • 小宅檸檬
  • 版型很美,謝謝分享。
    很喜歡你的風格,很漂亮。
  • 謝謝你的稱讚>///<

    Dribs & Drabs 於 2014/08/25 21:26 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • noratoraneko
  • 這個也好漂亮,謝謝您的作品!!

    想請問您部落格標題的字體要怎麼調小呢:)

    非常謝謝您^_^
  • .publish{font-size: 16px;}
    .title h2{font-size: 16px;}
    一個是文章日期一個是標題

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

  • Lala Lin
  • 謝謝喔~~超喜歡的^^

  • 不客氣,感謝你的支持 :D

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

  • noratoraneko
  • 已經修改好了:)
    非常謝謝您的教學^____^
  • 不客氣 :D

    Dribs & Drabs 於 2014/09/08 19:15 回覆

  • Rebecca
  • 好漂亮的版面也好新潮
    拿走了唷謝謝你耶
  • 不客氣 : )

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

  • CHAN JAY
  • 這版面設計很簡潔:D
    立馬套用XD
    謝謝你分享!!
    想問一下如果底部的顏色想換別的顏色或是換別的圖案應該怎麼做???
  • 改這邊喔~
    body{background:.........}
    看是要把背景圖換掉還是換成其他顏色都是改這個屬性

    Dribs & Drabs 於 2014/09/21 06:44 回覆

  • 吉栗
  • 好喜歡這種風格(灑花)!!!!謝謝分享:D
  • 不客氣 :)

    Dribs & Drabs 於 2014/09/23 07:31 回覆

  • Mako Lin
  • 謝謝您無私的分享~好美的版面呀!
  • 不客氣 :)

    Dribs & Drabs 於 2014/09/24 12:45 回覆

  • 小橘
  • 套用,謝謝分享:) 好美
  • 謝謝支持 :)

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

  • 戀楓 ܤ抹茶嵐
  • 這個樣式素雅卻不會太空:)
    帶走感謝製作:D
  • 謝謝你的支持 :)

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

  • 悄悄話
  • 瑜兔(●´ε`●)ノ
  • 我用了以後...不知道為什麼...引用列表不見了O_o
    是我的問題嗎?因為我有用下方廣告隱藏的css
    不知道會不會影響><
  • 我設計的版型都把引用刪除了
    需要的話把下方這行CSS刪掉,但得自行美化一下
    #trackback-box{display: none;}

    Dribs & Drabs 於 2014/10/10 17:12 回覆

  • 悄悄話
  • 瑜兔(●´ε`●)ノ
  • OK引用部分我用好了
    謝謝:-))
    -
    還有剛剛突然
    伸縮側欄的廣告謀反了...
    圖: http://i.imgur.com/YqSVZBN.png
    這是打開的樣子
    如果隱藏的話 廣告是會露出來
    然後把CLICK ME吃掉
  • 我剛到你的部落格看又是正常了@@
    痞客最近很奇怪,除了MIB廣告有時候還會出google廣告
    但有時候又不會出現,實在令人難以捉摸

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

  • 悄悄話
  • 悄悄話
  • Yi Yu
  • 好美好喜歡 套用妳的作品囉 :)
  • 感謝你的支持 :)

    Dribs & Drabs 於 2014/10/20 16:12 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 南勢角美睫美甲
  • 你做的樣式實在是太棒了!!!!!!!
    非常完美而且典雅
    感謝你!
  • 沒有到完美啦,您過獎了^^"

    Dribs & Drabs 於 2014/11/04 15:29 回覆

1 23
找更多相關文章與討論