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_3

有別於一般部落格的版面,這個版面是以相片列表的方式來呈現文章

每篇文章取文章的第一張圖來表示,最新的文章圖示會大些,整體看起來很像一個相簿集

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

 

 

Blog_5

文章模式,按圖可放大

 

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

 

 

CSS語法

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

 

版面設定

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

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

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

4 - 承3,該張照片長高最佳比例為3:2的橫式照片,若為直式或方形照片在首頁顯示時會被裁切。

 

Q&A

1 - 請問如何刪除痞客邦在側欄的廣告?

加入以下CSS語法

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

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

 

更新

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

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

2015/05/24  解決小螢幕主畫面被側欄遮蔽的問題

2015/12/14  配合痞客新版後台,更改每篇文章代表圖示顯示方式

 

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

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

, ,
創作者介紹

Dribs & Drabs 點點 滴滴

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


留言列表 (203)

發表留言
  • 御宅族阿廣
  • 超棒的版面!!!

    對了,大大
    我有版面上的問題想請教您
    不知道方便留E-mail給小弟嗎><"
  • 謝謝稱讚,好開心 :D
    我的mail是weilife.blog@gmail.com

    Dribs & Drabs 於 2013/06/10 09:49 回覆

  • 法蘭雞
  • 好久不見(我是之前那個的麵下),這版面真不錯,先推~~

    你可以試試看media screen and (max-width:1200px) {} ,這樣就不會受限於螢幕解析度要在1200以上囉 (っ´▽`)っ
  • 喔喔~面下大大你改名啦 :D

    因為語法有些東西定位是用absolute,所以max-width加上去反而沒有效用 ˊ ˋ
    不過又學到了一種CSS屬性XD

    Dribs & Drabs 於 2013/06/10 10:18 回覆

  • 御宅族阿廣
  • 我寄信了!
    大大的新版面真的好棒
    如果我是單純想用圖紀錄生活的網誌
    一定會想套用~
  • 回你囉 :D

    Dribs & Drabs 於 2013/06/10 10:34 回覆

  • 法蘭雞
  • 不完全是... 應該說,不完全是只要用media query,還要運用一點小技巧,你可以參考http://www.pinfographics.org/ig/10-basic-tips-about-responsive-design/

    不過,看你CSS3和JS都運用得出神入化,改天我也要向你討教一下 = =+
  • 是個好站呢!! 晚上來研究一下
    謝謝面下 :)

    我了解你的意思了~這麼棒的語法可能要等下次版面再來使用XD

    Dribs & Drabs 於 2013/06/10 19:13 回覆

  • lonelylong
  • 這版型超漂亮的Q_Q
    理想中的版型呢!
  • 謝謝稱讚,好開心唷 :D

    Dribs & Drabs 於 2013/06/10 13:22 回覆

  • AQUA MAN
  • 恩 很棒的設計 連匹克的強制廣告都有辦法藏起來

    但色調就...
  • 色調我很喜歡喔~謝謝

    Dribs & Drabs 於 2013/06/10 16:05 回覆

  • 菲希納
  • 好特別的版面喔*口*!!!
    WEI大大好厲害~~!!(拜
  • 謝謝稱讚 >/////////<

    Dribs & Drabs 於 2013/06/13 10:58 回覆

  • 阿丹
  • 感謝!又更新了!
  • 不客氣,謝謝你喜歡這個版面 :D

    Dribs & Drabs 於 2013/06/16 07:47 回覆

  • WinniChang35
  • 你好:
    我很喜歡你設計的這個版面樣式^_^,
    但我想請問一下,
    因為我有些文章標題是中英文一起所以比較長,
    所以那些比較長的就無法完全顯示在主頁的文章框框裡面,
    可否請問,
    不知道可不可以改主頁文章的框框大小(比如稍微拉長一點)?
    謝謝~~
  • 你好,謝謝你的稱讚 >/////<
    你遇到的問題,先找到#blog-main .title{height: 40px;}
    將40加大,假設增加x
    接下來會遇到的問題是,第一篇文章的高度跟兩篇小文章的高度不同
    找到#blog-main .article:first-child .title{height: 60px;}
    將60增加上一步增加高度的兩倍,也就是60+2*x,應該就可以了

    Dribs & Drabs 於 2013/06/19 20:43 回覆

  • WinniChang35
  • 謝謝你的幫忙~~
    我弄好了^_^
    Thank you so much!!!
    期待你有更好的作品喔~~~

  • 不客氣 :D
    你的照片看起來都好好吃喔 >////<

    Dribs & Drabs 於 2013/06/19 20:59 回覆

  • WinniChang35
  • 謝謝誇獎^_^
    我也是都看食譜隨便弄~~
    運氣好有單眼相機可以玩這樣^_^
  • 等有廚房也會想要自己來做料理~呵 :P

    Dribs & Drabs 於 2013/06/19 21:11 回覆

  • 小曦
  • 我非常喜歡這版面,很特別得看起來很舒適,可是我發現無論我是不是登入或登出部落,我的連結選項和部落描訴會重疊,請問版大我要如何處哩,我對於CSS不懂,麻煩版大幫我,感激不盡!!^^
  • (1) #header{height: 70px;} 70->90
    (2) #login-bar{left:195px;top:20px;padding-left:15px;} 195->85, 20->40, 15->0
    試試看吧~
    因為你的部落格描述較長,所以將登入資訊放在第三行,版面會比較漂亮

    Dribs & Drabs 於 2013/06/21 15:38 回覆

  • 小曦
  • 可以了謝謝你^.^
  • 不客氣 :D

    Dribs & Drabs 於 2013/06/24 09:14 回覆

  • 悄悄話
  • 生存確認
  • 可以了!
    非常感謝你的分享還有幫助!
  • 不客氣 :D

    Dribs & Drabs 於 2013/06/24 09:13 回覆

  • 漏風小姐
  • 漂亮!!!!這樣我寫文章都超想放圖片
  • 謝謝>//////<

    Dribs & Drabs 於 2013/06/28 08:18 回覆

  • 悄悄話
  • 悄悄話
  • WinniChang35
  • Hi, 你好:
    不好意思又來打擾了f^_^;
    想請問一下,
    如果點進單篇文章後,
    文章的標題因為太長被切掉要怎麼辦?
    (我手癢不小心點錯,結果之前弄的就不見了)
    謝謝,麻煩你了...:P
  • .title{width: 600px;} 寬度修改
    這段語法我寫不好,多謝告知 :P

    Dribs & Drabs 於 2013/07/09 20:01 回覆

  • WinniChang35
  • Hi,
    謝謝你的幫忙,
    可是不知道是哪裡出了問題,
    我改了之後,還是沒有辦法出現整句標題@@“
    我在想,因為點進單篇文章後會有編框
    如果把邊框改寬一點呢?
    因為我的文章標題有些比較長,它會自己變兩行,但就是最右邊的字會被切掉

    我是改這一個應該沒有錯吧?
    .title {
    text-align:left;
    width:600px;
    border-bottom:0 solid #aaa;
    padding-bottom:10px;
    padding-top:0;
    color:#666;
    }
    謝謝 :P
  • 我看了一下標題沒有被切掉
    我是看"無油洋芋片 & 洋蔥優格沾醬"與"宛如天堂香蕉可麗餅蛋糕"這兩篇標題較長的
    標題都有變成兩行,字也都有出現
    不知道你是還有再修改嗎???

    Dribs & Drabs 於 2013/07/10 08:15 回覆

  • WinniChang35
  • Hi,
    我想我的電腦應該是中邪了....哈哈
    剛剛看又變正常,
    昨天晚上看,字完全被切掉,
    總之現在一切正常,
    謝謝您的幫忙呦^_^~
  • 太好了,正常就好 :P
    一早看到你的食譜好餓阿 =口=

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

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 李小瑜
  • 謝謝分享^
    好可愛的版面喔~~
  • 謝謝你的稱讚>/////<

    Dribs & Drabs 於 2013/08/26 13:22 回覆

  • 悄悄話
  • Fiona
  • 謝謝分享XD~好好看的版面!!!>///<
  • 不客氣 :D
    謝謝你的稱讚

    Dribs & Drabs 於 2013/09/10 11:32 回覆

  • 悄悄話
  • 悄悄話
  • missc0712
  • 你好 ~我也喜歡用照片來寫日記.所以一看到你的設計就愛上了這版面!!!
    但不太懂CCS.想請問文章點進去的"內容部分想增寬"應該修改哪裡呢? (不是標題)
    希望可以讓照片左右兩張並排~但第二張總是會被擠到下面

    最後.謝謝你分享了這麼棒的版面:DDD
  • 你好:D 謝謝你的稱讚>///<
    這個版面若要增加寬度需要改滿多地方的
    #content、#header、.article、#user-post的width需要調整(增加的數值相同),ex: x
    另外#content、#header的margin-left減去上面數值的一半,ex: x/2
    我自始試過應該是沒問題,如果有問題再跟我說:D

    Dribs & Drabs 於 2013/09/20 21:01 回覆

  • ayustory
  • 我弄懂了^^
    原來一直不是語法問題!!謝謝你~~我找好久呢!呵
    最後再次謝謝你提供這特別的版面!
    讓我分享韓國文章的版面可以更簡單有型~
  • 謝謝你的稱讚 >////<

    Dribs & Drabs 於 2013/09/21 08:30 回覆

  • 首席技術長
  • 大大@@看到您創作的此版面驚豔了一下!!我就是要這種感覺~很棒!!
    相信現在網路瀏覽~本多人真的還是先以圖為首要選擇~所以這個版面很讚!!
    我套用了之後有兩個問題!!
    (1)問題:2013/06/05 - 原本把名片/留言/部落格/相簿的連結拿掉,現在加回去
    您的說明!!現在找不到這幾個選項~好像沒加回去!~
    (2)問題:部落格名稱跟描述欄位太短~抱歉因為我的名稱較長~有沒有語法可以處理!!
  • (1) 不要直接套用痞客邦後台的樣式,請直接複製這篇文章中的CSS碼,因為痞客邦後台樣式更新效率太差,所以以後若有更新只會更新此篇文章的CSS
    (2) 文章中的Q&A有提到喔 :D

    Dribs & Drabs 於 2013/09/21 13:58 回覆

  • 首席技術長
  • 剛有讀了一下文!!很多問題都解決了!!~剩下最難最難的就是..部落格描述跟連結會打在一起@@~
  • #header的height與#login-bar的padding-top調大,應該增加25-30就夠了

    Dribs & Drabs 於 2013/09/21 14:25 回覆

  • 首席技術長
  • ok!!解決了!!拜謝大大~

    ps~我的描述與連結的各第一個字與您原始的直虛線還有辦法空一格開嗎?現在是貼在一起的情況!!

    請教語法!!感謝
  • 原本語法裡有這一段 #login-bar{padding-left:15px;}
    你是不是刪掉了?
    另外還要把#banner h2{padding-left: 20px;} 改成35
    若你不想要虛線,可以直接把#login-bar{background....}這行拿掉

    Dribs & Drabs 於 2013/09/21 15:14 回覆

  • missc0712
  • 格主~成功了!!因為有點複雜所以研究了幾天現在才來回覆...
    謝謝你的教學和熱情分享美麗的版型來造福大家噢 :D
  • 恭喜你成功了 :D

    Dribs & Drabs 於 2013/09/23 13:06 回覆

  • 悄悄話
  • 勤奮小專員
  • 你好~請容許我這個版面也套套看,謝謝你~
  • :D

    Dribs & Drabs 於 2013/09/26 10:15 回覆

  • 悄悄話
  • sinhsofa
  • 一看到這個版面就被吸引了! =)
    超級棒的~~

    請問版大是否可以修改部分地方?
    1.每篇文章的標題 / 網誌標題與說明 改字型與大小
    2.首篇文章及右邊第二篇文章點擊圖片沒辦法進入網誌頁面,不過其他的都可以

    麻煩版大了~~謝謝您 >///<

  • 1) .title a{}、#blog-main .title{}裡有font屬性是每篇文章的標題,.title a{}是單篇文章的,#blog-main .title{}是首頁的
    2) #banner h1 a{}與#banner h2{}是網誌標題與說明
    3) 試試在後台"基本/進階設定"的"首頁文章顯示模式",改成顯示前1行摘要

    Dribs & Drabs 於 2013/09/26 21:27 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • YO爸
  • wei你真的很強,可以用了。謝謝您^^
  • 不客氣 :D

    Dribs & Drabs 於 2013/09/27 08:11 回覆

  • sinhsofa
  • 終於微調好了~真是太感謝您了!! =D
  • 不客氣 :D

    Dribs & Drabs 於 2013/09/27 08:11 回覆

  • 悄悄話
  • YO爸
  • 版主不好意思。又有問題,我想把內文章的寬加大到可以放1024的照片
    有看到上面的回覆
    這個版面若要增加寬度需要改滿多地方的
    #content、#header、.article、#user-post的width需要調整(增加的數值相同),ex: x
    另外#content、#header的margin-left減去上面數值的一半,ex: x/2
    我自始試過應該是沒問題,如果有問題再跟我說:D
    有照上面的改了,不過變成現在這樣,不知那裡有問題,可以幫忙看一下嗎?
    謝謝
  • 應該是你margin-left設錯了
    margin-left的數值原本是負號,減去x/2的話數值會更小

    Dribs & Drabs 於 2013/09/30 10:44 回覆

  • YO爸
  • 恩這樣了解了。謝謝說明
  • 不客氣 :D

    Dribs & Drabs 於 2013/09/30 20:57 回覆

  • alley259
  • 我好喜歡這個版面,一看到就毫不猶豫的用了。
    套用之後有些問題想麻煩版大幫忙看一下:
    右邊側欄的最新文章,在後台我設定可以顯示9篇,目前我發了兩則只出現一則文章;
    文章分類下收的未分類文章顯示(1),實際上應該是(2);
    請問是不是連結跑掉了?

    另外我想修改部落格大標的顏色跟尺寸,因為部落格大標跟側欄標題字體太小看不清楚,但是改完之後部落格大標字體上下方會出現虛線;
    以上這麼多問題,懇請版大撥空幫忙指點一下,拜託你。
    非常感激
  • 痞客邦的分類那邊不會即時更新數量,要過一陣子才會變動
    因為現在看你的部落格沒有你說的現象,這樣比較難找出問題
    如果方便的化先改好讓我看一下錯誤的版面,我會比較知道問題出在哪

    Dribs & Drabs 於 2013/10/07 08:30 回覆

  • 幸福國皇后
  • 好棒的設計,讓我有繼續寫部落格的動力.超讚的.謝謝
  • 謝謝你的欣賞 :D
    有你們的留言我也會更有動力寫部落格 :)

    Dribs & Drabs 於 2013/10/07 22:22 回覆

  • 楊小星
  • 你做的版型好漂亮喔!!而且超特別的!!好喜歡^^

    可是,我想要在網誌描述的點點虛線下,
    希望在加入自己的圖片,請問要如何修改呢?
    高度我記得大概三百左右...

    先謝謝你做出這麼漂亮的版型,真的很厲害!!♥
  • 謝謝你的稱讚 >////< 我會更努力的
    你說的問題,可以把語法加在公告版位裡,預設的公告版位會是在虛線下方,所有文章的上方
    而且支援語法(公告版位是在後台的側邊欄未設定裡)
    如果想把公告版位的名稱刪除,把這語法加進CSS裡
    #spotlight h5{display:none;}

    Dribs & Drabs 於 2013/10/08 19:04 回覆

  • 楊小星
  • 謝謝你!
    原來公告板位可以這樣使用!!好強喔你!!
    如果你沒說的話我大概用個八百年也不知道那在幹麼,哈哈。
    你真厲害♥(拇指)

    話說,我本來一直無法刪除公告名稱。
    後來終於發現原因了...

    我一直貼到側邊欄位那邊啦!!!哈哈哈!
    超蠢的。

    還好後來眼睛終於睜開了,"把這語法加進CSS裡"
    問題也就迎刃而解囉!!耶!!

    不過,我還有個小問題,
    我已經把照片都強制設定600PX,而且也都幾乎是4:3的照片。
    為什麼顯示出來都還是不完整呢???
  • 應該是每篇文章上面FB的讚會造成圖片整個往下位移
    只是我比較納悶的是我的按讚連結只會出現在文章模式,首頁模式不會出現
    你可以試試看CSS加入以下語法,看能不能把首頁模式的讚拿掉
    .bookmark{display: none;}
    #article-main .bookmark{display: block;}

    另外除了公告版位,頁尾描述也有一樣的功能
    可以看看我現在部落格最下方的個人描述,那就是在頁尾描述加語法
    痞客邦的設計讓使用者能自訂很多東西呢 :D

    Dribs & Drabs 於 2013/10/09 09:36 回覆

  • 楊小星
  • 哇,好棒喔!頁尾也可以玩耶~!!
    找時間再來看看要放什麼圖片,嘻嘻。

    我加了描述還是沒有辦法呢。
    不過,後來有發現,直接到基本設定那裏頭去把按讚的小工具給擺到文末就好了^^

    在這邊也分享給有相同困擾的朋友囉^^
  • 原來它是另一個小工具,跟我現在用的不一樣,難怪語法無效
    因為我看到滿多套用這版型的都有這個問題,我再加到文章提醒大家一下,謝謝你囉 :D

    Dribs & Drabs 於 2013/10/09 12:31 回覆

  • 孟親
  • 謝謝大大的分享ˊˇˋ
    孟親拿去用了:)
  • 歡迎歡迎 :D

    Dribs & Drabs 於 2013/10/12 13:25 回覆

  • 孟親
  • 這個樣式真的很特別呢
    用相簿的方式ˊˇˋ
    簡單又漂亮:)
  • 謝謝你的稱讚 >////<
    之後分享的版面也都會類似這樣的
    因為我本身就喜歡用照片寫文章,版面設計成這樣比較清楚 :D

    Dribs & Drabs 於 2013/10/12 13:38 回覆

  • 孟親
  • 原來是這樣呀!!
    版大好像很喜歡出遊旅行ˊˇˋ
    因為有看過版大的幾篇文章ˊˇˋ
    而且拍的照片都很漂亮:)
    不知道怎麼稱呼你ˊˇˋ
  • 我叫wei,部落格頁尾有自介
    還滿喜歡出去玩的,可以放鬆心情,因為平日上班很苦悶啊~哈哈!

    Dribs & Drabs 於 2013/10/12 13:53 回覆

  • 孟親
  • 哦哦!!你好Wei :)
    平日上班辛苦呢ˊˇˋ
    我現在才大二!!但是每天有寫不完的報告ˊˋ
  • 好年輕阿~姐姐我老了XD
    大學生活確實很忙,在那時也比較少機會出門旅行
    因為大部分的節日都接近期中期末考,不然就是要交一堆作業 T^T
    感覺上班了後比較有自己的時間耶~

    Dribs & Drabs 於 2013/10/12 14:30 回覆

  • 孟親
  • 摁摁對阿ˊˋ
    有好多報告都做不完ˊˋ
    真的很累呢><
    Wei 姐姐以前大學是讀什麼科系的??
    我讀的是不動產經營!!
  • 我是資工系 :D

    Dribs & Drabs 於 2013/10/12 16:53 回覆

  • 孟親
  • 原來如此@@
    資工系!!因該是學跟電腦有關的吧!!@@
  • 是阿~完全要依靠電腦XD

    Dribs & Drabs 於 2013/10/12 19:56 回覆

  • 悄悄話
  • 艾莉的旅遊世界
  • 哈囉,我很喜歡你的設計。謝謝你。
    我有個問題,不知道為什麼我的文章上方都會跑出facebook的icon跑出來。這樣的話,照片沒有辦法完整呈現,會被cut掉。跟你的不同啊....><

    另外就是,我是否可以把右側menu欄灰色改成其他顏色?謝謝!
  • FB那是一個痞客的app,你看能不能把它調到文章後面,因為我沒用過這個app
    我使用的FB分享是叫share的app,若你使用的不能調位置,薦議改用這個
    可以改顏色OK

    Dribs & Drabs 於 2013/11/02 06:37 回覆

  • timtam925
  • 哈囉!! 我無意間看到你自己設計的樣式
    很喜歡:D 救根你拿來用用喔 感謝妳:D
  • 換迎取用 (*˘︶˘*)

    Dribs & Drabs 於 2013/11/02 06:38 回覆

  • inwuyu
  • 哈囉,您好,
    不知道為什麼我的版面跑掉了,可以請您幫我看一下嗎?謝謝~
  • 哈囉,你是說文章的內文圖片超出版面嗎??
    因為我這個版面最大寬度是600px,圖片大於的話就會跑位
    建議在後台>基本/進階設定>文章顯示相關設定
    可勾選第三個,依文章區塊調整圖片寬度
    ps.你的婚紗照好美喔>///< 恭喜你:D

    Dribs & Drabs 於 2013/11/18 16:47 回覆

  • inwuyu
  • 啊~現在在家裡看又沒問題,大概是公司IE比較舊的關係(IE8),謝謝妳喔!!
  • 不客氣 :D

    Dribs & Drabs 於 2013/11/19 08:22 回覆

  • 悄悄話
  • 悄悄話
  • 笑小妞
  • 很美的版型呢 ^^
  • 哈,謝謝你的稱讚>///<

    Dribs & Drabs 於 2013/11/29 13:07 回覆

  • 悄悄話
  • 人類
  • 好久沒有看到這樣設計簡約有質感的版面歐
    超厲害的
    照片也都好漂亮^^
  • 謝謝你的稱讚>////<
    我以後會繼續努力的 :D

    Dribs & Drabs 於 2013/12/02 08:53 回覆

  • 歐拉愛體驗
  • 大大~您這個版型我超超超愛的
    清楚又優雅
    感謝你^^ (立馬改)
    之前一直找不到滿意的版型

    想問一下,
    1. 部落格名稱與描述,如何修改兩者的左右位置(往左或往右位移)
    2. 下方平行的虛線,如何改變垂直位置(往下位移)
    感謝您^^
  • 1. 如果是想讓部落格名稱跟描述對齊,#banner h2{padding-left: 20px;} 數值改成0,若數字加便會往右移
    2. 修改#header{height: 70px;} 的數值,加大。另外若想讓垂直的虛線跟著一起加長,修改#login-bar{padding-bottom:5px;},跟著加大一樣的值

    謝謝你的稱讚>////<

    Dribs & Drabs 於 2013/12/06 18:45 回覆

  • 悄悄話
  • 悄悄話
  • 妙妙
  • 謝謝分享!!!!!!!拿走囉
  • 謝謝捧場 :D

    Dribs & Drabs 於 2013/12/11 16:17 回覆

  • 訪客
  • 有很多問題><希望你可以解答謝謝
    1. 如何把header名片留言部落格相簿那行移過右面一點 與登入並排
    header與文章body的距離如何拉遠?
    2. 文章的框框如何可以弄大一點 因為我多放正方形的相 但現在文章的框框把我的相cut掉了QQ
    3. 如何可像以下的BLOG一樣把整個版面拉長 可放更多格子
    4. 如何像以下的BLOG一樣修改格子的外框顏色線條 去掉陰影
    http://pinkubebecindy.pixnet.net/blog

    知道問題很多 希望可以解答>////<
  • (1)
    目前是並排,如果要位移請修改#navigation{}裡面left的數值。header與文章body的距離如何拉遠請修改#header{}裡margin-bottom數值加大
    (2)
    建議只放大文章框框的長度,修改方式如下。
    #blog-main .article-content{height: 150px;} 將150改成更大的數值,例如150+x
    改完後最新一篇文章的高度會跟第二、三篇不太對稱,再找到
    #blog-main .article:first-child .article-content{height: 393px;} 將393改成393+2*x
    (3)
    不建議修改,該網誌是因為將右方側欄整個拿掉,所以不用考慮右方側欄會不會被遮住
    (4)
    .article與#blog-main .article與#category-main .article裡的box-shadow拿掉,並在.article裡加入外框的語法,請自行上網搜尋

    Dribs & Drabs 於 2013/12/24 12:53 回覆

  • 光
  • 您好^^很喜歡您分享的此版面樣式。不過我套用之後,不是主要第一篇的文章的縮圖變得很畸形,不曉得是否是圖片大小的緣故呢?可不可以麻煩您告知我該如何調整呢?謝謝您
  • 之前也有一位版友有同樣的問題
    他是用wundows live writer來撰寫文章的,不知道你是不是也是?
    wundows live writer在圖片部分有些bug存在,不建議使用
    如果是用痞客幫後台來撰寫文章、上傳圖片的話,不會有這種問題發生

    Dribs & Drabs 於 2014/01/16 15:59 回覆

  • 光
  • 您好^^
    我是從別的部落格轉移來這邊的,不曉得是不是這個原因。
    不過我有重新編輯圖片。因為很多圖片都死連了。
    可是重新編輯圖片還是會顯示錯誤呢!
    謝謝您
  • 哈囉,麻煩你重新套用CSS
    我有把CSS修正過,如果有問題再跟我說喔 :)

    Dribs & Drabs 於 2014/01/16 20:57 回覆

  • 光
  • 您好^^
    真是不好意思這麼麻煩您了!
    我已重新套用,不過圖片還是一樣有問題。
    我想可能需要重新打過文章,才有可能解決這個問題也說不一定呢!
    可能是因為我的網誌是從天空搬過來的緣故吧!
  • 重新套用是複製該篇文章的CSS,還是從後台套用的?
    後台的語法我沒有改,只有改這篇文章的語法
    如果還是沒辦法就只能請你手動改圖了 ORZ

    Dribs & Drabs 於 2014/01/18 09:57 回覆

  • 光
  • 您好^^
    方才自行測試了一下,果然是因為網誌搬遷的原因呢!
    看樣子只好把所有的文章都重新打過,才能夠正常顯示圖片了。
    真是不好意思給您添麻煩了。
    謝謝您特地修改css
  • 不會啦,不過沒幫到你的忙真不好意思

    Dribs & Drabs 於 2014/01/18 09:58 回覆

  • 光
  • 您好^^
    我是從後台直接改呢!
    原來是要從這邊複製阿!
    不好意思,我沒弄懂您的意思!

    我現在就在重新複製一次CSS語法。

    謝謝您呢!
  • :D

    Dribs & Drabs 於 2014/01/18 11:58 回覆

  • 光
  • 您好^^
    真的非常謝謝您!
    因為一開始我沒弄懂,以為要到後台去修改。
    原來是直接在您的此篇文章複製CSS語法即可。

    真是不好意思呢(^^ゞ

    方才去看我尚未修改完成的網誌的其他文章,
    圖片皆可正常顯示了!(*^_^*)

    真的非常謝謝您!m(__)m
  • 因為修改後台需要痞客邦重新審核,要很久
    所以以後更新都只會在這篇文章更新 :)
    不過很開心解決了你的問題!

    Dribs & Drabs 於 2014/01/18 11:59 回覆

  • 悄悄話
  • 悄悄話
  • 陳小旻
  • 真的喜歡泥的介面欸 ~ 所以我也稍微自學了一下 ~
    超難的 ~"~ 改到我頭昏眼花 ~ 囧
    ~"~ 其實我本來改的好好好的 ~
    殊不知 .. 邊改邊預覽都可以 ~
    但不曉得哪兒出了錯 ! 這樣一來回間 ~
    竟然存完再看是我最原先的版面 ~ ! 哭哭吶喊阿 ~~
    等等只好重新來過惹 ~ (( 我有稍微改了些地方 ~
    請您幫我看看哪些是您希望再保留的 ~
    另有些問題想請問 ~ (( 抱歉太長 ~
    ---------------------------------------------------------
    1. 請問右邊的顏色我如何可以更改成白色呢 ~ ( 就是在這裡整個不見了 ~
    2.部落格首頁 ~ 文章圖都被卡掉了 ~ 我有看先前留言是說因為文章標題下有個 " 讚
    我也有輸入語法 ~ 但砍不掉 ~ 可是我想將他留著留在文章底部也可 ~
    有無其他方式呢 ~
    3.部落格首頁 ~ 文章寬度 ~ 與點進去後的寬度 ~ 可以再調寬ㄇ ~ 我嘗試過了 ~
    不曉得是我改錯地方 ~ 還是怎麼惹 QQ ~
    ------------------------
    我再來嚐試看看 ~ 非常感謝您 !!!!!! 太棒的設計了 !!
  • 哈,謝謝你的稱讚!! 等熟悉CSS後改起來就會很快的 :D
    1)
    側欄背景刪掉在#links{},將裡面的兩個background屬性刪掉
    2)
    那個讚是要到後台>應用市集裡面將讚的app停用,加CSS是沒辦法消除的
    我看你的部落格裡面有兩個按讚的APP,只要留下"痞客邦文章分享工具"
    另一個刪掉,這樣圖片應該就不會有問題
    3)
    #header{}、#content{}、#blog-main #content{}、#category-main #content{}、#archives-main #content{}、.article{}、#user-post{}
    以上共七個的的width加大一樣的數值,例如200
    #header{}、#content{}的margin-left減掉上面數值的一半,例如-100

    Dribs & Drabs 於 2014/02/19 11:14 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 陳小旻
  • 而且"相本"的高度還是不能改 @@"
  • 上面那篇回覆了

    Dribs & Drabs 於 2014/02/19 13:55 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Amber
  • 謝謝您的建議,
    我會嘗試看看!
  • 加油!!!
    可是我看妳都改得差不多了XDD

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

  • 悄悄話
  • 悄悄話
1 23