Photo


I'm Wei

Traveler / Photographer / Designer

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

 

▸ Facebook:Dribs & Drabs

▸ Instagram:dribs__drabs

▸ Mail:weilife.blog@gmail.com

▸ Pixnet訂閱:weilife

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

部落格首頁看起來會像相簿一樣展示著美麗的照片

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

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

 

 

文章模式,按圖可放大

 

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

 

 

CSS語法

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

 

版面設定

1 - 此樣式將側欄1刪除,請至後台將所有需要的元件移至側欄2

2 - 至後台"基本/進階設定","每頁顯示文章數"改成4的倍數

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

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

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

 

Q&A

1 - 請問可以不刪除側欄1嗎?

請找到下行語法,並將此行刪除,側欄1便會出現

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

但請自行美化側欄1

2 - 請問套用後,照片不會覆蓋整個影像顯示區域,是為什麼?

照片寬度要大於高度才會覆蓋整個影像顯示區域

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

 

更新

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

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

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


留言列表 (121)

發表留言
  • Rene Wang
  • 我又來嘗試留言囉~希望這次能夠成功~
    這個版面看起來好優秀喔!教學也好詳細喔~(可惜我還是 CSS 白癡...)
    可是,這個版面是只能在痞客幫使用嗎?
    謝謝~~
  • 留言成功了耶~~好開心喔!!!
    這個版面只能痞客邦使用,其他的部落格不通用
    謝謝你的稱讚 :.゚ヽ(*´∀`)ノ゚.:。

    Dribs & Drabs 於 2013/11/11 17:09 回覆

  • 阿丹
  • (分享) 痞客邦PIXNET部落格版面樣式CSS - 簡約相簿特殊版型
    寫錯位子,我用的是 - 簡約相簿特殊版型,感謝!
    哈囉,謝謝你的告知,因為我當初都沒有用到這些功能,所以都把它拿掉了
    現在已經加回去囉,重新套用語法就好了 :D

    我裝了,怎還沒出現呢?感謝!
  • 我看你部落格已經有出現了
    在網頁的左邊

    Dribs & Drabs 於 2013/11/13 10:48 回覆

  • 掰掰藍
  • 不好意思~想請教您用wundows live writer編輯發布,首頁的圖片顯示常常有問題(多格相片的樣式都會有),不是比例不隊就是大小裁切,請問有辦法解決嗎!?
  • 你好,剛瀏覽你的網誌時,發現除了首頁格子相片那邊有點問題,內文的圖片也變形的很嚴重
    我沒用過wundows live writer,不過google了一下,發現這軟體在圖片編輯這方面有點bug
    在插入圖片時,他會預設圖片在某個尺寸,但不是照原圖的比例
    所以你的圖片才會變形,目前有看到一些解決方法你可以試試
    例如 http://www.minwt.com/wordpress/9049.html
    這樣是可以解決內文圖片變形的問題,但不確定首頁的格子是不是能解決
    你可以先試試 :)

    Dribs & Drabs 於 2013/11/14 08:33 回覆

  • 掰掰藍
  • 謝謝您的解答,但是XP跟WIN7好像無法裝windows live writer 2012...殘念...Orz,看來是跟美美的版型無緣了=.=!
  • 但是內文的圖片還是會變形,這是不管套用哪個版面都會有的問題
    你可以在google看看還有沒有其他解決方法

    Dribs & Drabs 於 2013/11/14 15:54 回覆

  • 阿丹
  • 今天發現有2個小bug
    出現2個管理後台,參觀人氣值不見了。
    謝謝您!
  • 兩個後台管理是正常的,這是痞客邦原本的設定
    參觀人氣要放在側欄1,不可以放在側欄2,這樣就會出現了,搜尋也是放在側欄1喔

    Dribs & Drabs 於 2013/11/14 19:58 回覆

  • 掰掰藍
  • 請教您小弟修改完樣式後,上方欄位一些小地方被黑色背景覆蓋,請問如何調整成白色!?
  • 你說的是哪部分?我看你的網誌沒甚麼大問題,反倒是我的版權宣告看不見了

    Dribs & Drabs 於 2013/11/15 17:52 回覆

  • 掰掰藍
  • 抱歉~主要是您的版權宣告(真是對不住...Orz)跟一些小小分隔線,不知道用什麼方法讓他顯示出來(都是黑色的,找不到地方改白色=.=!)
  • 版權宣告跟那些分隔線是用圖片做出來的,本來就是黑色,無法改色碼,除非你換掉圖片才有辦法

    Dribs & Drabs 於 2013/11/15 20:53 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Bonnie Mama
  • 謝謝你分享的版型...
    我超愛的!!!
  • 謝謝你的留言,我會更有動力創造新版面 :D

    Dribs & Drabs 於 2013/12/17 17:28 回覆

  • 三禾精品家具設計
  • ㄆㄆ~我亂用成功了XD
    想另外請教您一個問題
    因為這網頁是老人家要用的,所以我將字體放大了些
    但字體前的符號 卻不在中間 反而偏上了
    請問該如何修改?
    謝謝唷 <3
  • 這樣需要每個有符號的地方都改
    例如,每篇文章的標題,CSS定義在title,找到padding的第一個數字或是padding-top,把數值加大

    Dribs & Drabs 於 2014/01/18 08:22 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 77
  • 真的耶!!!!!!!!成功了!!!!!!!!!!!!!!!!謝謝解救~~~~~~~~~~
  • 不客氣 :P

    Dribs & Drabs 於 2014/04/02 17:13 回覆

  • Nicole Lee Ü
  • 妳好,今天我套用了你這個樣式,不知道能不能從CCS裡面更改大標題的大小?
    我想改小一點 可是只要每次改完 就會出現 崩壞狀態 >_< 大標題也沒跟著變小...
  • 你是說部落格標題嗎?
    改以下數字喔
    #banner h1 a{
    font-size: 35px;
    }

    Dribs & Drabs 於 2014/04/23 17:34 回覆

  • Nicole Lee Ü
  • 我改好了,謝謝你,目前沒有再出現奇怪的東西了
    其實我也不確定是什麼問題,因為我還有在CCS裡面加入去除廣告的語法XD
  • 不客氣喔 :D

    Dribs & Drabs 於 2014/04/23 20:06 回覆

  • 悄悄話
  • 快樂腳 趴趴GO ~
  • 已套用,永遠支持你,謝謝你一直分享好看的板面。
  • 謝謝你的支持 ヾ(*´∀`*)ノ
    順便幫我檢查一下有沒有bug,哈

    Dribs & Drabs 於 2014/06/13 18:27 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  •  張 潔 唲 .
  • 請問一下側欄二的元件可不可以獨立移動?@@!可以的話求語法,囧,謝謝。
  • 可以,以文章分類為例
    #category {
    position: absolute;
    top: 10px;
    left: 10px;
    }
    其他的元件就自己找名稱囉

    Dribs & Drabs 於 2014/06/15 09:57 回覆

  •  張 潔 唲 .
  • 那個,讓元件可以不需要滑鼠移過去標題才會出現的語法…是哪個?我把標題隱藏後就整個不見了!哈哈,求解!ˊooaˋ。
  • 不太懂你的意思耶,可以說仔細點嗎

    Dribs & Drabs 於 2014/06/15 19:27 回覆

  • 悄悄話
  •  張 潔 唲 .
  • 囧,就是把滑鼠移過去元件後才會顯示的功能關掉…變成一般的顯示…
    還有怎樣把獨立的元件設定它自己的空間大小!(抱歉上面少打字)。
  • #category .inner-box li{
    display: block !important;
    }
    空間大小可以用width和height來定義

    Dribs & Drabs 於 2014/06/16 08:19 回覆

  • 丨丶可樂灬
  • 妳設計這個版型花費多少時間呢?
  • 沒有計算耶,哈
    通常都花滿多時間的,有時還要看靈感來不來 :P

    Dribs & Drabs 於 2014/06/16 20:24 回覆

  •  張 潔 唲 .
  • 要在文章裡面加卷軸要怎麼弄?想把文章加卷軸縮短成短版。
  • 這個版型不適合喔

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

  •  張 潔 唲 .
  • 好吧,我期待你目前這個版型的分享!>w<。
  • 哈,不過可能不會那麼快分享捏~

    Dribs & Drabs 於 2014/06/17 13:53 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Claudia's family
  • 你的板型都好棒!但這個版型找不到可以套用的功能.....> <
  • 我撤掉了痞客後台的分享
    現在要套用的話需要複製CSS語法,在文章中灰色的區塊
    對著文字框按右鍵可以全選,複製貼上至管理後台"自訂樣式"->"CSS原始碼編輯"

    Dribs & Drabs 於 2014/06/23 11:10 回覆

  • Claudia's family
  • 清楚了!!
    謝謝你的分享....你設計的每個版型都好棒!
  • 謝謝你的稱讚 :D

    Dribs & Drabs 於 2014/06/23 12:46 回覆

  • S_戳戳小酒窩
  • 謝謝分享,每一次出的樣式好喜歡 ><
  • 謝謝你的稱讚>////<
    我剛剛發現你套用後側欄2會走位,有重新修改語法你再套用一次

    Dribs & Drabs 於 2014/06/24 14:52 回覆

  • S_戳戳小酒窩
  • 可以再問一個問題嗎 ~~~
    我現在套用此樣式格式

    那想要把圖片當作首篇文章的開頭
    那圖片的長寬高要設定多少,才不會跑框 ???
  • 只要圖片寬度>高度就可以了

    Dribs & Drabs 於 2014/06/24 14:53 回覆

  • S_戳戳小酒窩
  • 謝謝姐姐的修改哦,看到字沒有跑掉了 ~~~

    那有限制寬和高的數字 ???
    大概是幾到幾呢 ???
  • 沒有限制耶,只要寬>高就可以了

    Dribs & Drabs 於 2014/06/24 15:17 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Sunry
  • 套用了這次分享的版面,一直很喜歡妳設計的版面
    總是很簡約感覺很舒服!!!
    上方快捷bar終於順利拿掉,上回看Q&A時以為就把語法加到最後面就好,想說怎麼都還在呢?
    看了一下下面的大家留言,才看到原來我放錯位置!
    很謝謝Wei每次都很用心的回答大家呢!!!

    現在比較想把pix原本下方的快結bar用回來,那個再看通知很方便~
    只是不知道這部分Wei知不知道呢? 想跟你請教看看~~ 謝謝
  • 我也覺得原本的快捷功能很方便,現在都得登入後台看,不太登自己的部落格了~"~
    至於用舊的回來的方法我不知道耶,但我有看過有些網誌右下角還有之前的快捷功能
    沒有去研究他們怎麼達到的,現在一時也找不到網誌讓我研究一下....XD
    如果你有看到的話可以跟我說一下網址

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

  • Sunry
  • 剛剛去找了找,我印象是有看過的!
    果然讓我找到了,且當時按過推XD
    Wei可以試試看呢!!!

    那個快捷真得比較方便有多少訂閱及好友更新都顯示,以及有通知時也會顯示!
    這樣來說很方便不用在去後台那邊慢慢查。
    上方那個真得比較不實用啊!
  • 我看到了!!!
    趁假日來把它擺進版面裡,謝謝你 :)

    Dribs & Drabs 於 2014/08/09 23:29 回覆

  • Sunry
  • 沒想到Wei剛好也正在!
    嘻嘻 你們都好厲害呢! 努力學習中!!!
    這樣以後就可以用舊版的了 嘿嘿!
  • 舊版真的比較好用,只是我要先睡了,明天再來研究 :P

    Dribs & Drabs 於 2014/08/09 23:47 回覆

  • Sunry
  • ! 剛一回來找到就在那邊研究XD完全忘了時間!!
    希望Wei 一夜好眠~ 我在來研究一下XD
  • 研究這個真的會讓人一頭遭進去,忘了時間XD
    昨天睡得不錯,多謝你的祝福:D

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

  • 凱亭恩#
  • 好希望這個有分享文章模式的xDDD 真的超喜歡Wei的樣式感覺很簡潔又很特別:D
  • 你是說非圖文的版本嗎?
    其實我有在打算耶,哈!
    只是最近有點忙ORZ

    Dribs & Drabs 於 2014/08/14 22:35 回覆

  • 凱亭恩#
  • 其實圖文集的都想要Wei姐姐分享文章模式xD 忙也沒關係啊最主要的還是自己的身體,
    千萬別因為設計及分享CSS太熱衷結果忘了顧身體xDDD
  • 哈,你好貼心喔>/////<
    我知道圖文部落格還是占少數,會慢慢把文字模式的版本分享出來 :)

    Dribs & Drabs 於 2014/08/14 22:41 回覆

  • Rr
  • 您好,不好意思,請問要怎麼更改相簿樣式呢?我進到相簿後台都沒有看到關於更換樣式的選項... 好想趕快把醜醜的官方樣式換成版主的相簿樣式喔>_< 真的做的好棒!!!
  • 這個是部落格樣式,不是相簿樣式啦,哈哈
    我只是把它做成很像相簿的感覺
    痞客的相簿現在好像不能換樣式喔

    Dribs & Drabs 於 2014/08/27 10:40 回覆

  • namasta
  • Hello,要幫你點廣告是要去哪裡點呢??
    點廣告是"推"的按鍵嗎??
  • 哈~網頁左方有個click here!!
    感謝你 :)

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

  • 悄悄話
  • Miss Aireen
  • 已經套用了這個樣式了,真的很漂亮呀,大家也會稱讚我的版面 :D

    想請問一下 我想把首頁那八篇文章在首頁顯示的照片都變大一些,讓照片能更清楚的被看見,可以告訴我在哪裡調這個設定嗎?
    謝謝 :)
  • 謝謝你的稱讚 :)

    要放大要改很多地方,不太建議
    若你想試試的話,可以看一下註解 /*---文章區塊*/以下的程式碼

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

  • Joanne
  • 很美唷! 已套用了
  • 感謝你的支持,歡迎套用 :D

    Dribs & Drabs 於 2015/01/16 09:14 回覆

  • LEHONG 樂紅韓國
  • 感謝原PO的分享,簡約有質感,很喜歡,謝謝! :)
  • 不客氣 :D
    可以招待我去拍婚紗嗎?哈哈哈哈 (開玩笑的!)

    Dribs & Drabs 於 2015/01/16 22:30 回覆

  • LEHONG 樂紅韓國

  • 噗,重點是 Wei 有沒有拍婚紗的需求,既然有緣其他都好談 (咦?)

    Pixnet 的既有格式好老舊,應該要多學學 squarespace 還有 wordpress,
    可惜自己不懂CSS語法,沒有辦法自己寫一個來套用,
    好不容易才找到 Wei 分享的格式真的眼睛一亮,感謝你啊!

    剛才有過去 Dribs & Drabs 按讚了,
    可以也支持一下我們的 FB 粉絲團嗎? (羞)

    LEHONG KOREA 樂紅韓國婚紗攝影
    https://www.facebook.com/LehongKoreanweddingPhotography
  • 我有到你們粉絲團按讚了喔,也謝謝你支持 Dribs&Drabs :D
    婚紗需求有阿,不過還沒有被求婚,所以可能要等一下,哈哈哈!

    Dribs & Drabs 於 2015/01/19 08:31 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 小涵
  • 好喜歡妳的版型~~謝謝分享^___^
  • 謝謝你的支持 :)

    Dribs & Drabs 於 2015/08/11 15:47 回覆

  • 悄悄話
  • 悄悄話
  • Pam
  • 好讚喔!!! 而且非常容易學習!!! 已成功改成此版型了!! 謝謝你><!! 雖然才剛開始學習寫文章 但好的閱讀平台會讓人耳目一新 ^^
  • 不客氣,謝謝你的支持 :)

    Dribs & Drabs 於 2015/10/02 16:35 回覆

  • chiayuu
  • 好喜歡這版面!!!
    不過我想請教一下
    為何我版面的照片比例跑掉呢?
    謝謝你<3
  • 插入圖片的時候不要設定長寬,就不會有問題了: )

    Dribs & Drabs 於 2015/10/29 22:44 回覆

  • chiayuu
  • 關於版面照片比利跑掉的問題
    我找到原因了!哈
    謝謝你的分享:)
  • :)

    Dribs & Drabs 於 2015/10/29 22:45 回覆

  • chiayuu
  • 不好意思我還有個問題~~~
    看了上面的留言我加入了拿掉快捷bar的語法
    但導致我頁面中間那排連結跑到了黑線底下
    請問要怎麼把黑線移到連結底下呢?
    謝謝你><
  • 調整#links_row_2的top值

    Dribs & Drabs 於 2015/11/01 14:38 回覆

  • Ťimi
  • 請問圖片要怎麼設定才會跑出來?
  • 請詳看版面設定喔!

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

  • 厚片太太
  • 好喜歡你設計的樣式!
    希望之後還可以看到更多作品
  • 謝謝你的支持 :D

    Dribs & Drabs 於 2015/11/07 09:43 回覆

  • 艾兒莎
  • 真的很謝謝你!我正在嘗試看能不能把我的醜部落格換好看點><~
  • 謝謝你的支持 :D

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

  • Linnisha
  • 請問相簿的每個框可以調大一點嗎
  • 套用本站分享的版面,請勿刪除頁尾版權宣告!

    Dribs & Drabs 於 2015/11/25 23:04 回覆

  • ctuuuu
  • 帶走了,套用後好喜歡這個版面!! 謝謝版主~~
  • 不客氣 :D

    Dribs & Drabs 於 2015/11/26 20:03 回覆

  • 悄悄話
  • 贊
  • 你好~ 我有使用您的版面^^
    不過我照著步驟
    --------------------------------------------------
    4 - 撰寫完章時,請插入"繼續閱讀",繼續閱讀前的最後一張照片為文章的代表圖示,建議繼續閱讀前放入一張照片即可
    5 - 承4,該張照片長高最佳比例為1:1的照片,若為其他比例在首頁顯示時會被裁切。
    ---------------------------------------------------
    再繼續閱讀前放入一張照片
    但網誌那邊沒顯示照片,請問要如何改善呢? 謝謝

  • 到訪你的部落格已經成功了~

    Dribs & Drabs 於 2015/12/22 19:23 回覆

  • 贊
  • 有了唷^^ 我後來自己試
    但我放繼續閱讀後 才有顯示唷 :>
    謝謝你
  • 應該不可能是放在繼續閱讀的後方,放在繼續閱讀的後方的內容不會出現在首頁裡

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

  • 想睡覺
  • 喜歡你的設計><
    我也套用了呢!!!
    謝謝你~~期待有更多新作品~~~
  • 謝謝你的支持 :)

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

  • 贊
  • 好唷~~我再試試看! 謝謝你 : >
  • 不客氣 :)

    Dribs & Drabs 於 2015/12/25 16:26 回覆

  • pineapple110
  • 謝謝您的分享~剛進入痞客邦的世界,希望有好的版面能有好的開始!
  • 歡迎加入部落格人生 :)

    Dribs & Drabs 於 2015/12/25 16:25 回覆

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