Photo


I'm Wei

A love traveler, photographer and designer

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

 

▸ Facebook:Dribs & Drabs

▸ Instagram:dribs__drabs

▸ Mail:weilife.blog@gmail.com

▸ Pixnet訂閱:weilife

Blog_1s

有別於一般部落格的版面,此版面取文章中照片來當作該文章的代表圖示

最新的文章篇幅較大,設計成雜誌封面的感覺

其他篇文章篇幅較小,滑鼠移至文章區塊時圖片滑動可顯示文章摘要

另一項特點是首頁上方的下拉式側欄與左方的隱藏式側欄,讓部落格版面不再雜亂,清爽好閱讀

常用相片或圖文寫文章的部落格,快來套用吧!

 

 

Blog_3s

文章模式,按圖可放大

 

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

 

 

CSS語法

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

 

版面設定

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

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

3 - 可至後台 > 基本/進階設定 > 文章顯示相關設定 > 每頁顯示文章數,調成3的倍數加1

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

5 - 撰寫完章時,請插入"繼續閱讀",繼續閱讀前的最後一張照片為文章的代表圖示,建議繼續閱讀前放入一張照片即可

6 - 承5,該張照片長高最佳比例為3:2的照片,若為其他比例在首頁顯示時會被裁切。

 

Q&A

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

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

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

2 - 為什麼套用後首頁第一篇文章無法滿版?

查看後台 > 基本/進階設定 > 文章顯示相關設定 > 文章圖片大小

請不要選擇第3個"依文章區塊寬度調整",可選1或2(900px)

3 - 為什麼套用後首頁第二篇以後的文章圖片無法滿版?

建議圖片的寬大於等於高,才會滿版面

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

 

更新

2014/07/10  解決首頁會出現水平捲軸的問題

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

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

2015/12/14  配合痞客新版後台,更改每篇文章代表圖示顯示方式、解決在手機上版面位移的問題

 

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

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

, , , ,
創作者介紹

Dribs & Drabs 點點 滴滴

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


留言列表 (162)

發表留言
  • 悄悄話
  • 孟親
  • 哦哦~原來如此!!
    那我來試試看好了!!
    說不定我自己有放上什麼語法!!
  • 看起來圖片顯示是正常了
    另外發現你之前說"個人資訊"是白色的問題
    好像是加了甚麼語法連結至無名,導致標題出現超連結,所以才會變成白色

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

  •  張 潔 唲 .
  • 套用後,有問題!沒有顯示出樣式的樣子。
  • 可以截圖給我看嗎@@?

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

  • 孟親
  • 圖片顯示,昨晚自己用好哩
    連結至無名@wei 姐姐是只有加到兒外的語法才會這樣@@
  • 因為我是直接看你部落格的原始碼,和一般的不太一樣
    你的"個人資訊"是個超連結,點進去是連到無名的部落格
    現在無名關了所以會直接連到YAHOO
    不知道是不是有做額外的設定?

    Dribs & Drabs 於 2014/06/30 11:03 回覆

  • 孟親
  • 哦哦@@其實我並沒有去設定過任何的東西
    不知道是不是我旁邊的超連結有碰到什麼
    我等等來去看看是不是旁邊的超連結問題
  • 看樣子你已經改好囉 :D

    Dribs & Drabs 於 2014/06/30 13:19 回覆

  • Zoe
  • 請問這個有沒有簡單文字記錄版呢>_<
  • 我可能會依"簡約相簿圖文集"這個樣式修改一個非圖文的版本
    因為目前這個樣式修改起來會很像"簡單文字紀錄"

    Dribs & Drabs 於 2014/06/30 15:16 回覆

  •  張 潔 唲 .
  • 應該是官方伺服器問題!昨天網頁重整好幾次最後正常了…
    就突然套用之前的樣式也一樣顯示不出樣式的樣子,不好意思,誤會一場!囧。
  • OK

    Dribs & Drabs 於 2014/06/30 16:07 回覆

  •  張 潔 唲 .
  • 請問:
    如何要如何把底下文章滑鼠移過去他封面圖會往上跑的特效取消掉?@@…
    我想把頂部第一篇的封面整個蓋滿紙顯示標題不要顯示文章內容,請問怎麼修改?@@…
    還有怎樣把文章底部弄成你的文章底部這樣?是把文底底下的東西都隱藏就可以了嗎?@@…
  • (1)
    把這行拿掉
    .article:nth-child(n+2):hover .article-content p:first-child img{top...}
    (2)
    找到這行,修改以下兩個屬性
    .article:nth-child(-n+1) .article-content p:first-child img{..}
    width: 910px;
    clip:rect(0px,910px,400px,0px);
    (3)
    請參考這篇的A-5
    http://weilife.pixnet.net/blog/post/370706507

    Dribs & Drabs 於 2014/06/30 16:07 回覆

  • 孟親
  • 看了一下自己的原始碼
    確實是我旁邊的連結讓我那裡出了問題ˊˇˋ
    不過現在改好了><
    謝謝Wei 姐姐有告訴我大概是哪裡出問題
    不然我真的會找蠻久的><
  • 不客氣 :D

    Dribs & Drabs 於 2014/06/30 17:23 回覆

  • Zoe
  • 好吧期待哦!!!!!!
    有點可惜因為我喜歡這背景
    所以就把背景改成這個了(X)
  • 哈,OK阿 :D

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

  •  張 潔 唲 .
  • 我想把頂部第一篇的封面整個蓋滿只顯示標題不要顯示文章內容,請問怎麼修改?@@…有按照你給的位置修改,但是我改後發現圖有反應但是把文章標題蓋住了噎!怎麼把文章標題也跟下面文章一樣顯示在圖片下面啊?@@。
  • .article:nth-child(-n+1) .article-content p:first-child img{...}
    這一個是設定第一篇文章圖片的地方,寬度設910px,圖片裁減設成clip:rect(0px,910px,370px,0px);
    .article:nth-child(-n+1) .title h2{...}
    這一個是設定第一篇文章標題的地方,利用position: absolute;來設定它的位置

    Dribs & Drabs 於 2014/06/30 20:25 回覆

  •  張 潔 唲 .
  • 沒用啊!【position: absolute;】這個一放下去又變回樣式原本的樣子…可以給我具體一點的語法嗎?我改了他只有封面圖有反應,標題只有加【position: absolute;】可以移動但是怎樣都無法移動左右,囧。
  • position: absolute;還要搭配top跟left定義它的位置
    可以google一下它的用法

    Dribs & Drabs 於 2014/06/30 21:35 回覆

  •  張 潔 唲 .
  • 那如果要把頂部文章這個模式去掉,怎去掉?我想改成依舊全部是格子。
  • 你搜尋語法"第一篇文章",把有關第一篇文章的語法都拿掉
    然後下面有"第三篇文章之後",把裡面語法有關nth-child(n+2)的字樣拿掉
    也許還要再微調一些東西

    Dribs & Drabs 於 2014/07/01 08:16 回覆

  • 悄悄話
  •  張 潔 唲 .
  • 外表是改好了,但是文章點進去…文章內容變成一小塊!要怎改?@@。
  • 恩,這要改很多....
    首先在"第三篇文章之後"這邊定義過的語法,例如背景、圖片、標題等
    都要再重新灌上#article-main定義一次,可參考"文章區塊"這邊的語法
    有點複雜,所以還是不太建議

    Dribs & Drabs 於 2014/07/01 10:25 回覆

  •  張 潔 唲 .
  • 好吧,繼續期待你的新樣式!希望下一個依舊是圖文格子型的樣式哦…嘻嘻。
  • 現在都沒靈感了.....ˊ ˋ

    Dribs & Drabs 於 2014/07/01 12:42 回覆

  •  張 潔 唲 .
  • 你之前分享在後台的樣式還會分享出來嗎?@@…
  • 可能不會囉,因為怕管理不方便

    Dribs & Drabs 於 2014/07/01 22:58 回覆

  • 悄悄話
  • 悄悄話
  • Claudia's family
  • 再請教,(1)第二篇以後的照片都無法整個跟方框一樣寬,所以背面的字露出來了?
    (2)各篇照片的文字描述會跑出一半(我沒有寫很長)⋯⋯?
    (3)第二篇以後的日期還可以往下移,不讓照片遮住嗎?我找了好久不知道去那改⋯⋯?>・<
  • 1) 照片建議長大於高,才會滿版
    2) 不太瞭解你的意思,內文本來就是設定顯示
    3) 不如把圖片的高度縮小,日期就會顯示。你可以搜尋第三篇文章這個註解,然後找img這個訂義圖片的地方修改,因手機回覆不方便講的很仔細,最近也不方便用電腦,請先自己研究一下

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

  • ♫Shu&amp;Wen♫
  • 我想要請教一下
    文章內容的照片不像你的範例一樣能填滿框框該怎麼辦呢
    謝謝:D
  • 我剛更新了Q&A,麻煩看一下2與3

    Dribs & Drabs 於 2014/07/05 22:14 回覆

  • ♫Shu&amp;Wen♫
  • 很抱歉 我問了和上面一樣的問題 哈哈哈 我來試試看你說的方法
  • 我剛更新了Q&A,麻煩看一下2與3

    Dribs & Drabs 於 2014/07/05 22:14 回覆

  • 悄悄話
  • 林呆
  • 推一個! 很喜歡這個樣式~
  • 謝謝你的支持 :D

    Dribs & Drabs 於 2014/07/10 14:45 回覆

  • 琥珀
  • 謝謝,你的樣式設計很棒!
  • ヾ(*´∀`*)ノ

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

  • 晴嵐
  • 我套用此樣式後,我發現我內文的圖片都會滿版,如果我去調進階設定裡面的圖片大小,會變成我要的大小,但是指到圖片又變大張,有什麼辦法可以解決嗎? 謝謝!!
  • 建議要給我網址才比較好找問題
    後台的圖片大小設定不調整呢?或是裝了甚麼痞客的APP造成這種效果?

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

  • devilkin217
  • 很喜歡你的設計! 感謝分享
  • 謝謝支持 :D

    Dribs & Drabs 於 2014/07/21 12:34 回覆

  • sw wedding club
  • 大大你的設計真的太太太太太美好了,
    還是我的救命恩人,真是太感謝你了!
    你讓我在一片黑暗的樣式海洋中看見希望與曙光,
    請受我五體投地的一拜Orz
  • 有那麼誇張嗎?哈哈哈
    謝謝你的支持,不過痞客剛剛又改了些東西,套用後會有點問題喔ORZ
    晚點再來修改QQ

    Dribs & Drabs 於 2014/07/21 16:43 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 詩綺
  • 謝謝分享!你的設計真棒 特別有質感 哈哈 很喜歡
  • 謝謝你的稱讚 ヾ(*´∀`*)ノ

    Dribs & Drabs 於 2014/07/26 21:34 回覆

  • 悄悄話
  •  張 潔 唲 .
  • 頭頂第一篇文章標題如何橫式改成直式啊?@@。
  • 你可以google "CSS 直書"就有相關教學
    不過我沒有用過就是了
    目前版面上方觸控式按鈕是限定它的寬度,所以看起來才會像直書

    Dribs & Drabs 於 2014/07/29 08:13 回覆

  •  張 潔 唲 .
  • 請問:【.forward{display: none;}】這排語法是甚麼?可以麻煩給我文章回到頂部的語法嗎?謝謝。
  • 我的語法裡沒有forward這一段耶~
    回到頂部的語法只要設定超連結,連結到 #top 就可以了

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

  •  張 潔 唲 .
  • 還有那個,我側欄一的背景圖不見了,顯示不出來!麻煩幫我看一下,謝謝。
  • 如果是自己修改CSS導致出現問題,就沒辦法幫忙了

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

  • 悄悄話
  • 過氣少女廢歐娜
  • 一直都很喜歡妳的部落格樣式,謝謝妳!
  • 不客氣>////<
    感謝你的支持!!!

    Dribs & Drabs 於 2014/08/15 15:46 回覆

  • Happiness❤
  • 同上同上~~
    我是說剛點進網站的時候只會看到第一篇的文章的第一張照片QQ
  • 同上回覆

    Dribs & Drabs 於 2014/08/17 22:00 回覆

  • Happiness❤
  • 版大版大~~((發現新版面現在很HI中))
    這個樣式能不能讓側欄1固定在左側呢???
    (′  W ‵)y
  • 你指的是哪個樣式呢?因為你上面是說另一個樣式,可是發問在這個樣式底下...
    我分享的樣式都可以自行修改,側欄1的語法定義在這裡#links-row-1{...}
    可以自行摸索一下

    Dribs & Drabs 於 2014/08/17 22:02 回覆

  • Happiness❤
  • 耶耶!! 好的!!
    剛剛太開心就先留言了XD~~
    結果才發現是另外一篇文章(因為我開好多個連結起來看)
    我這兩天會再試試看~~真的謝謝妳!! 版面超級美的!!!
  • 謝謝你的稱讚 >/////<

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

  • laana
  • 謝謝你的分享 你的樣式都好有氣質好漂亮
    想請問個問題
    我的每篇文章點進去後
    內文都擠在一起了 也就是行距變得很窄跟首頁上看起來不一樣
    請問要如何修改呢??
  • 你可以加上這行語法,數字可自行調整
    #article-main .article-content{line-height: 200%;}
    謝謝你的稱讚>////<

    Dribs & Drabs 於 2014/08/25 16:54 回覆

  • 悄悄話
  • Louis
  • 真是簡約好看的樣式
    不好意思,請問一下,『文章中第一行的影像,該影像請不要放置超連結』
    有辦法些改成是超連結的圖嗎??(Flickr)
    我有將語法複製到我的CSS預覽,確實都沒有任何圖片顯示
  • 如果第一張圖片要放超連結,請把以下這幾行語法刪掉
    .article-content a:hover{
    top: 1px;
    left: 1px;
    position: relative;
    }
    不過你套用後圖片出不來是因為你的第一行沒有圖片的關係

    Dribs & Drabs 於 2014/08/31 17:29 回覆

  • Louis
  • 感謝您,的確是應該是要在第一行放上圖片,才會顯示~~sorry...
    另外請教,我用預覽來看,圖片會被截掉,不像『相簿集日記』一樣,相片會自動縮小。
    是否有機會修改?? 還是說要修改相片大小??
    謝謝
  • 這個版面的設計,第一篇文章的圖長寬比是3:2,多出來的寬會被裁掉
    第二篇以後的圖片長寬比是1;1,多出來的長會被裁掉
    建議圖片長寬比為3:2最適合
    修改的話是一定可以的阿,但要看的懂CSS語法 :D

    Dribs & Drabs 於 2014/08/31 18:29 回覆

  • Louis
  • 謝謝說明~~
    我會再研究看看的 ^_^
  • 不客氣 :D

    Dribs & Drabs 於 2014/08/31 18:57 回覆

  • 珍珠奶扎
  • 開了一個新的部落格,但是一直找不到我滿意的樣式
    找了好久,看到妳做的樣式簡直讓我感動得想流淚啊!!太美麗了
    真是感謝妳><期待繼續推出好作品喔:)
  • 感謝你的支持與欣賞 >/////<
    我會努力推出新版面的!!

    Dribs & Drabs 於 2014/09/07 22:43 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • V
  • 真的很漂亮!感謝你^^
  • 不客氣 :)

    Dribs & Drabs 於 2014/09/22 20:16 回覆

  • namasta
  • 喜歡妳設計的樣式~超時尚的部落格版面~
  • 謝謝你的稱讚>///<

    Dribs & Drabs 於 2014/09/23 15:11 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 瑞貝卡暖暖生活園
  • 您好,非常喜歡您設計的版面哦
    已經被我套入我的部落格裡面,
    很喜歡很喜歡~~~ 謝謝你~~~
  • 不客氣 :D
    你畫的圖好可愛喔,超羨慕會畫畫的人 >////<

    Dribs & Drabs 於 2014/09/25 20:50 回覆

  • 威樂OST
  • 如何將圖下方標題字體增大, 謝謝
  • .title h2{font-size: 20px;}
    數字請自行調整

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

  • 威樂OST
  • 圖片位置高度呈現過大,蓋到下方標題如何調整呢?
  • 圖片長寬比建議為3:2比較適合

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

  • 悄悄話
  • Anna Pa
  • 你好~~謝謝你分享這麼棒的格式
    但想請問你一個問題為什麼套用後,在標題跟第一篇文章中間會跑出一個沒有任何圖的介面,還寫上1~10的數字像輪播圖那樣的跑?這個我該如何把它弄掉呢?
    在麻煩你告訴我
    謝謝你~~~~~
  • 那個應該是你安裝了輪播照片的APP,把它停掉就好了

    Dribs & Drabs 於 2014/10/15 21:17 回覆

  • 尹諾海
  • 帶走語法,謝謝!!
    我很喜歡你的樣式設計呢!!
    是簡單的美呢!! ^^
  • 感謝你的支持 :D

    Dribs & Drabs 於 2014/10/21 20:55 回覆

  • 悄悄話
  • tingnyona
  • 非常喜歡這個樣式,謝謝你 ^^
  • 不客氣 :P

    Dribs & Drabs 於 2014/11/03 08:13 回覆

  • 悄悄話
  • 何大赤
  • 謝謝你,我套用好了
    這麼樣式真的很棒
    如果我的部落格有什麼違反規定的地方
    請馬上告訴我
    我會立刻修改
  • :)

    Dribs & Drabs 於 2014/11/20 11:21 回覆

  • 翼
  • 謝謝分享這麼棒的樣式 :)
    簡潔 可是很美

    謝謝你^O^
  • 感謝支持 :D

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

  • ilienring
  • 我昨晚試著貼連結, 早上起來還是沒有看見有跑首圖呢, 是我原本在文章插入照片就不對嗎?謝謝
    http://www.mobile01.com/topicdetail.php?f=594&t=4173214&p=1#53320959
  • 正確方法: 發表文章 > 等幾個小時 > 貼到FB
    錯誤方法: 發表文章 > 貼到FB > 等幾個小時
    因為你沒有留你的痞客帳號,我也不清楚你到底是怎樣的問題@@

    Dribs & Drabs 於 2014/11/27 14:26 回覆

  • 人類
  • 套用了,謝謝你,真的是非常有質感的美好設計:)
  • 謝謝你的稱讚 >/////<

    Dribs & Drabs 於 2015/01/03 15:40 回覆

  • Ariel
  • 好美的樣式OwO
    抱走囉 謝謝您的分享 :)
  • 感謝你的支持 :D

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

  • FuFuRuRu
  • 謝謝你的分享~~讓我的部落格變的好美喔~喜歡^^
    有幫你按讚支持囉!!
  • 感謝你~ :D
    你畫的圖好可愛喔~療癒系 !

    Dribs & Drabs 於 2015/01/29 14:14 回覆

  • 悄悄話
  • 悄悄話
  • 貓科類Tiger♥
  • 想詢問一下~~
    我使用後上方的部落格介紹和連結相本、留言那邊都會重疊要怎麼改呢><
    另外上方會一直出現影片的廣告 也不知道該怎麼取消~~
    再麻煩妳了!!謝謝︿︿
  • 部落格描述建議用<br>來斷行,不然看起來有點亂,也可以解決跟相簿等連結重疊
    上方的廣告是痞客的MIB廣告,你可以到後台把它停用

    Dribs & Drabs 於 2015/02/10 14:17 回覆

  • Little my
  • 版面好好看!
    想請問一下
    我直接套用(未修改)後首頁上方的[我的連結][POWERED BY]那列卻跑不出來,有什麼方法可以讓它出現呢?
    謝謝~
  • 我看有阿~在左邊那欄

    Dribs & Drabs 於 2015/02/10 18:17 回覆

  • Little my
  • 可能是我電腦的問題>"<
    謝謝你~我換了另一個簡潔的樣式~
    都很美耶
  • 謝謝你的讚美 :)

    Dribs & Drabs 於 2015/02/11 09:18 回覆

  • show
  • 套用後整個版面好清晰喔!!
    真的十分感謝您的分享~^^
  • 不客氣 :)

    Dribs & Drabs 於 2015/02/28 09:11 回覆

  • 妮妮˙ˇ˙
  • 覺得版面整齊多了~~雖然還是有點不習慣下面的照片被裁^^"
    感謝你的分享~~
  • :D

    Dribs & Drabs 於 2015/03/13 12:33 回覆

  • 悄悄話
  • RELA
  • 非常喜歡~已分享 謝謝^^加油~
  • :D

    Dribs & Drabs 於 2015/03/18 18:48 回覆

  • sultt
  • 終於等到了一個這麼棒的模版,馬上幫部落格換了新衣,謝謝你!
  • 感謝你的支持 :D

    Dribs & Drabs 於 2015/03/25 15:09 回覆

  • 悄悄話
  • 魚皮
  • 謝謝分享這麼美的版面~~~
    會好好珍惜使用的! :3
  • 不客氣,謝謝你喜歡 :D

    Dribs & Drabs 於 2015/05/13 20:41 回覆

  • 悄悄話
  • 悄悄話
  • Buzai
  • 謝謝你的分享,很喜歡!
  • 不客氣 :)

    Dribs & Drabs 於 2015/06/27 22:31 回覆

1 2