Photo


I'm Wei

Traveler / Photographer / Designer

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

 

▸ Facebook:Dribs & Drabs

▸ Instagram:dribs__drabs

▸ Mail:weilife.blog@gmail.com

▸ Pixnet訂閱:weilife

Screen_01

為慶祝粉絲團人數破千,分享一款新的樣式。首頁部落格採三欄式,一、二欄為文章內容,第三欄為側欄元件,採用格子狀來呈現,很喜歡這樣的設計風格,簡單耐看!不限定圖文集部落格使用,純文字部落格也可以使用。另一個側欄採用下拉式選單,可節省版面空間並簡化版面,可搭下拉式文章分類做使用。另此版面提供另一款特別款,在部落格標題背景處置入橫幅,可自行更換照片。

 

 

Screen_02

 

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

 

 

CSS語法

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

這個版本另外有個特別版,特別版的部落格標題的背景有橫幅,可自行替換照片,如下↓

 

版面設定

1 - 側欄1的元件會放置在部落格的右側,側欄2的元件會放置在部落格標題下方的下拉選單裡。

2 - 純文字部落格也可以套用。

3 - 每頁顯示文章數量請改成偶數,後台>基本/進階設定>文章顯示相關設定>每頁顯示文章數。

 

Q&A

1 - 特別版的橫幅照片該如何替換?

修改#header裡的background屬性,橫幅照片預設為1000x300像素。

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

 

 

♥ 更多部落格版面分享: http://weilife.pixnet.net/blog/post/434454491

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

, , ,
創作者介紹

Dribs & Drabs 點點 滴滴

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


留言列表 (121)

發表留言
  • 流江
  • 哇~ wei又設計了新的了~ 棒棒^^b
    最近有一點忙碌,好一陣子沒有來wei這裡看看了^^
    最近好嗎?我過得還不錯啦~
  • 最近好忙好忙啊~~好多事情要處理 ORZ
    不過相對來說挺充實的,相信只要渡過這段,之後就可以輕鬆一點了 :D

    Dribs & Drabs 於 2015/10/20 21:47 回覆

  • CHIEN
  • 這一兩天一直在套用樣式,結果還是用了這個,但是我文章的圖為什麼會被截掉呢???
    文章的圖選擇項目1,結果整個跑掉,可以幫我看一下嗎???
    原本還想說要用文章分類的下拉式清單,可是我的文章分類那欄為何滑鼠移過去後會欄高會變高呢????
  • 因為文章高度有設限,不建議第一張圖放直式的。文章分類的高度改變可以看一下.box-text:hover的語法。另外你文章裡的圖片,不要設定長根高,不然在首頁會變形。

    Dribs & Drabs 於 2015/10/23 20:51 回覆

  • ZOU
  • 請問大頭貼和介紹那邊那格大頭貼怎麼弄成圓的呢?
    然後介紹那邊可以向範圖那樣出現自己打的該怎麼用呢?
    我的現在都出現暱稱.分類.好友之類的 ... 然後他靠左怎麼至中呢?
    不好意思問題比較多...#
  • 那個不是痞客內建的個人資訊,是自己建一個側欄版面寫語法達到的!圓形的語法可以參考border-radius這個屬性。

    Dribs & Drabs 於 2015/10/25 20:10 回覆

  • 悄悄話
  • ZOU
  • 原來!!那請問圓形的話該改成多少呢研究了一會還是沒有頭緒...
    還有每行字還有圖片怎麼至中呢?
  • border-radisu: 50%; 就是圓形的語法
    文字置中要寫HTML跟CSS語法,可以Google一下基本的HTML教學 :)

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

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • YURI
  • 謝謝你
  • 不客氣 :)

    Dribs & Drabs 於 2015/11/17 22:09 回覆

  • yveshejhej11
  • 您好 不好意思我想請問一下
    http://yveshejhej11.pixnet.net/blog
    這是我的部落格 我套用了您這款的特別版
    但是橫幅下方 應該出現的那些選項 都變成了"我的連結"
    這部分 請問是哪方面出了問題呢?
  • 請詳看版面設定喔!

    Dribs & Drabs 於 2015/12/04 08:37 回覆

  • yveshejhej11
  • 所以我的連結那部分 就應該是下拉式選單了好像
    我是語法超新手 哈哈
    完全是託您的福複製了語法才有今天的這個好看的版面 TAT
  • 你可以看一下後台>側邊欄位設定,有分成側欄1跟側欄2,"我的連結"現在應該是擺在側欄2,但裡面沒有設定任何連結,若不需要可以拖曳到暫存區。再來把想要放在下拉選單的部分(橫幅正下方)拖曳到側欄2,應該就可以了

    Dribs & Drabs 於 2015/12/04 22:46 回覆

  • yveshejhej11
  • 謝謝妳!!!!!! 我成功了!!!!! ((感動
  • 恭喜 :)

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

  • 小吳
  • wei大大妳好
    好久不見
    想請問不曉得我可不可以設計一個相似的版面使用於wordpress呢??
    我也想設計一個只有白底黑線的部落格樣式這樣XD
    因為我現在在wordpress的版面有點膩了
    謝謝wei每次都提供高品質又美觀的樣式給大家免費使用
  • 你可以設計屬於自己的版面,但是不要抄襲我的設計就是了!

    Dribs & Drabs 於 2015/12/07 22:52 回覆

  • Chloe
  • 感謝分享 = )
  • 謝謝支持 :)

    Dribs & Drabs 於 2015/12/12 22:39 回覆

  • 宅茜茜
  • 非常感謝wei的分享與教學~這幾天css從0開始研究, 終於有點成果了~真的是有質感又實用!!
  • 很開心有幫到你,css是一門有趣的東西呢! :)

    Dribs & Drabs 於 2015/12/14 09:06 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 米特
  • 好漂亮的版面樣式~~~
    米特最近想來換一個
    剛好看到你的文
    真是太太太感謝了!!!!
  • 不客氣,謝謝你的支持 :)

    Dribs & Drabs 於 2015/12/23 18:44 回覆

  • 雅佐和カケル★〃
  • 謝謝!!!!!請問要怎麼移除橫幅上的字呢?
  • 可以把#header裡面的字型大小設成0 :)

    Dribs & Drabs 於 2016/01/03 13:22 回覆

  • 南瓜絲
  • 謝謝分享:)) 好美好美
  • 謝謝支持 :D

    Dribs & Drabs 於 2016/01/03 17:03 回覆

  • 丸玩玩
  • 你好
    很喜歡這樣乾淨簡單線條的版面,謝謝無私分享。
    我有調整了版面的寬度,加寬100px。
    主頁的部分調整都沒問題,但點擊文章至內文時
    分隔內文和側欄的線始終無法和主頁一樣切齊。
    試了調整很多地方,還是搞不清楚到底是哪裡的問題
    可否麻煩指教,感激不盡!
  • 這裡的黑線條我是用圖片代替,如下語法
    #article-main #main{background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) top left repeat-y;}
    你需要自己做一張圖片,然後取代掉圖片網址

    Dribs & Drabs 於 2016/01/06 21:41 回覆

  • 丸玩玩
  • 原來我一直漏掉卻又找不著,真是感激不盡!!
  • 這個還滿難找的,就算是我寫的語法也有點忘了XD

    Dribs & Drabs 於 2016/01/07 23:26 回覆

  • 悄悄話
  • 悄悄話
  • 孟親
  • 好久沒有來這裡哩!!套用了此款樣式唷:D
    不過發現了一個小小的問題 我的測攔一上面有擺放自我介紹、留言訊息跟文章分類
    可是我拉到側欄一旁邊沒有顯示出來耶@@為什麼這個樣子??
  • 孟親是不是加了刪除側欄(廣告)的語法,這個版面要用另一個刪廣告的語法喔

    Dribs & Drabs 於 2016/02/18 21:22 回覆

  • 孟親
  • 诶诶我是用了那個語法沒錯呢@@原來是要用另外一個呀!!!
    那我就來試試看~謝謝Wei 的回覆唷:)
  • 不客氣唷!! 因為這個版面有用到兩個側欄,所以不能用刪除側欄的語法來刪廣告!

    Dribs & Drabs 於 2016/02/20 22:26 回覆

  • 孟親
  • 我成功哩>< 剛剛去看了Wei 姐姐的收集旁邊還有另外一個新版的語法><
    那個套上去就出來哩!謝謝Wei 姐姐ˊˇˋ
  • 不客氣唷!! 因為這個版面有用到兩個側欄,所以不能用刪除側欄的語法來刪廣告!

    Dribs & Drabs 於 2016/02/20 22:26 回覆

  • 孟親
  • 原來如此所以說其實每個版型配出來的 不一定適用原本的那種語法@@
    其實她適用的則是另外一組語法阿@@
  • 是唷 :)

    Dribs & Drabs 於 2016/02/21 13:31 回覆

  • C.Moggy
  • 好美~謝謝你!!!!!
  • 不客氣 :)

    Dribs & Drabs 於 2016/02/27 13:14 回覆

  • 小草
  • 謝謝你的樣式分享
    幫了大忙!!!!
  • 不客氣 :D

    Dribs & Drabs 於 2016/03/21 00:28 回覆

  • htp0711baby
  • 您好,好喜歡妳的樣式~
    但換過去後都會亂掉,所以預覽後,又不敢用了
    是因為照片尺寸的關係嗎?

    還有,如果其他款式我也可以加入照片的橫幅嗎?
  • 你好,格子這個樣式應該不會亂掉才對,若方便可以留下錯誤的樣子給我看,才能偵錯!
    其他版面沒有提供橫幅,需要的話可以寫語法自己加!!

    Dribs & Drabs 於 2016/03/22 20:40 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Ariel
  • 謝謝你!!!! 這個樣式非常的清新 很漂亮////
  • 不客氣 :D

    Dribs & Drabs 於 2016/05/14 16:27 回覆

  • Joeni
  • 自己換了好有成就感,雖然只是套用而以哈哈 謝謝你
  • 哈~我懂你的感覺 :D

    Dribs & Drabs 於 2016/06/07 21:32 回覆

  • 潔咪
  • 謝謝妳分享這麼有質感的樣式,換上之後,整個fu都不一樣了,非常喜歡XD
  • 謝謝你的喜歡 :D

    Dribs & Drabs 於 2016/06/08 21:30 回覆

  • 彌奈
  • 拿走囉~ 謝謝你的分享
  • 不客氣,很高興你喜歡 :D

    Dribs & Drabs 於 2016/06/13 17:50 回覆

  • 山珍
  • 昨天才剛辦,就發現美美的樣式:D打包帶走摟(感謝)
  • 不客氣 :D

    Dribs & Drabs 於 2016/06/18 20:05 回覆

  • 大四生
  • 真的是新手的救星啊!!!
    爬文爬了好久也暈了好久
    謝謝你讓我前進一步:)

    要繼續創作喔 加油!!!
  • 不客氣,很高興有幫到你,未來我會繼續努力的 :D
    歡迎加入粉絲團,幫粉絲團按讚是對我最大的鼓勵 :)

    Dribs & Drabs 於 2016/06/29 14:54 回覆

  • Elsa
  • 謝謝分享~讓大家有好質感的新版面可以用,換完後心情超好的^___^
  • 謝謝你喜歡,聽到你們的讚美是我最大的向前動力!
    記得到粉絲團按讚支持一下喔 :D

    Dribs & Drabs 於 2016/06/30 10:39 回覆

  • s.weii
  • 謝謝你的分享^^每一個都好精緻! 好喜歡啊~~~~~ <3
  • 不客氣喔 :D 謝謝你這麼喜歡!!

    Dribs & Drabs 於 2016/07/12 08:51 回覆

  • 悄悄話
  • Alfred
  • 我發現這個版面要把刪除廣告的語法放在頁尾描述,然後要把側欄1的廣告移到側欄2,廣告就會全部消失,如下圖:

    http://imgur.com/a/pg4uL

    感謝板主~讓我不到一個小時就把topbar和廣告全部刪除(我沒學過任何語法哈哈!)
  • 最近痞客好像又改了廣告語法,有時候會出現,待我再來研究一下 : )
    記得到粉絲團支持一下喔!!

    Dribs & Drabs 於 2016/07/29 21:12 回覆

  • 台熊
  • 謝謝分享~喜歡這個版面 要來使用囉 ^^
  • 不客氣 :D 記得到粉絲團支持一下喔!!

    Dribs & Drabs 於 2016/07/29 21:12 回覆

  • 悄悄話
  • 悄悄話
  • 特盛吃貨 Abby
  • 整個設計好喜歡,但請問該怎麼更改成自己的照片呢??試了好久,腦殘好苦惱
  • 你好,文章裡都有寫怎麼替換橫幅照片,若要我偵錯請保留操作失敗的網頁,才能知道問題出在哪

    Dribs & Drabs 於 2016/09/05 08:42 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 飛魚
  • 妳好~
    感謝您設計這個美麗的樣式
    剛剛套用之後發現了ㄧ些問題想請教您~

    想請問
    當我套用這個樣式之後,
    有些文章會顯示標簽內容
    有些則沒有
    請問是哪邊需要調整
    才能統一樣式
    都不要顯示標簽內容呢?

    感謝您:)
  • 嗨~飛魚,只要加入以下語法就可以刪除了
    .article-keyword{display:none;}

    Dribs & Drabs 於 2016/09/12 20:35 回覆

  • 飛魚
  • 謝謝WEI的回覆!!
    已成功刪除❤
  • 不客氣 :D

    Dribs & Drabs 於 2016/09/13 09:03 回覆

  • Anita☆阿妮塔
  • 你好,非常喜歡你設計的樣式,所以今天套用了你的樣式,謝謝:)
  • 不客氣 :D

    Dribs & Drabs 於 2016/09/28 10:07 回覆

  • Anita☆阿妮塔
  • 想問一下Wei~
    我發現樣是裡面沒有連結相簿留言等等...
    是本身設計就沒有嘛?
    我一直想找可以顯示相簿等連結的ccs
    但目前尚未找到~只好向你求救了~~
  • 把這行拿掉就可以了 #navigation{display: none;}
    不過需要自行幫它美化一下 : )

    Dribs & Drabs 於 2016/09/29 15:34 回覆

  • WAN J
  • 謝謝分享
    喜歡這個版面的設計
  • 很開心你喜歡這個版面 : )

    Dribs & Drabs 於 2016/10/08 08:47 回覆

  • Luretia
  • 非常感謝~~真的好美好美!!!太感謝你了!設計超棒!!!
  • 謝謝你喜歡這個版型 :)

    Dribs & Drabs 於 2016/10/17 11:21 回覆

  • 悄悄話
  • shetraveling
  • 你好,最近看到這個樣式超喜歡,可是套用之後,我的文章第一張圖片怎麼都不能夠顯示出來呢?是哪裡有問題? 謝謝你
  • 你是不是在文章最一開始就插入繼續閱讀了?繼續閱讀前的內容才會出現在首頁喔!

    Dribs & Drabs 於 2016/11/13 19:19 回覆

  • 悄悄話
  • GinaChen
  • 好喜歡這個風格,謝謝分享
  • 不客氣 :D

    Dribs & Drabs 於 2016/11/25 13:51 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • ♥妃妃♥
  • 謝謝你的分享 好喜歡你的部落格風格!! :)
  • 謝謝你的喜歡和稱讚,讓我非常開心 :D

    Dribs & Drabs 於 2016/12/29 08:49 回覆

  • 人類
  • 您好,謝謝你的分享
    想要請教一下,要如何將右方側欄每個項目前的點點弄消失呢?
    看了Q&A沒有相關的教學
    謝謝><
  • 搜尋以下這行,把點點的符號替換掉 :)
    content: "•";

    Dribs & Drabs 於 2016/12/30 08:50 回覆

  • PiPi
  • 太感謝Wei的分享~版面超讚的好喜歡^3^
  • 謝謝你喜歡 :D

    Dribs & Drabs 於 2017/01/02 13:11 回覆

  • Smiley 屎賣力
  • 謝謝您~~~~~希望未來有機會能找您設計!
  • 不客氣喔 :D

    Dribs & Drabs 於 2017/01/02 13:15 回覆

  • 珊卓小姐
  • 謝謝這個美麗的創作,希望部落格可以快快上軌道,就可以請你們設計專屬的頁面囉~ <3
  • 謝謝你,一起加油吧 :D

    Dribs & Drabs 於 2017/01/12 20:31 回覆

  • 悄悄話
  • Vyell
  • 謝謝Wei大的回覆,我大略知道問題在哪不過就一直改不瞭,我會再研究的,謝謝~
  • 加油 :D

    Dribs & Drabs 於 2017/01/24 16:02 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Beryl Lin
  • 謝謝分享~我好喜歡這個設計!簡約
  • 謝謝你的喜歡 :D

    Dribs & Drabs 於 2017/02/06 09:52 回覆

  • 喬
  • 最近才開始要寫部落格
    一直找不到喜歡的樣式
    看到妳的簡約風個真的好喜歡
    謝謝分享~~
  • 謝謝你的喜歡,也請多多支持喔 :D

    Dribs & Drabs 於 2017/02/09 18:39 回覆

  • 露咦絲絲小姐
  • 套用了:)好喜歡唷!!!簡潔俐落,謝謝你的分享!
  • 不客氣,謝謝你的喜歡 :)

    Dribs & Drabs 於 2017/02/14 12:13 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 小伶
  • 謝謝您的分享~好喜歡!
  • 不客氣 :)

    Dribs & Drabs 於 2017/03/06 20:56 回覆

  • 悄悄話
  • UT
  • 謝謝~好喜歡這種簡約~
  • 謝謝你喜歡 :)

    Dribs & Drabs 於 2017/03/12 22:02 回覆

1 2