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的元件,放置在文章正上方的下拉式選單

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

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

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

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

 

Q&A

1 - 首頁模式不想要顯示文章內容,只需要顯示圖片該怎麼修改?

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

.article{height: 280px;}

.article-content p{border-bottom: none;}

.article-content p:nth-child(n+2){display: none;}

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

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

.topbar-placeholder{display: none;}

#blog-category{display: none;}

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

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

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

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

4 - 怎麼更改首頁模式拍立得的高度呢?

請修改以下height的數值

.article{height: 360px;}

5 - 為什麼拍立得裡的文字出不來?

首先檢查 後台 > 基本/進階設定 > 首頁文章顯示模式,選擇 "視單篇文章之設定" 的要確認文字放在繼續閱讀前方,選擇 "顯示前N行摘要" 的要確定前N行要有文字。

另外安裝 "插入 Facebook 按讚鈕" 該APP也可能導致文字無法顯示,因為FB按讚的區塊會出現在文章之前,把文字擠到後方,建議停用該APP改安裝功能相同的 "痞客邦文章分享工具"。

6 - 首頁有些文章區塊可以進入文章,有些卻不行,請問為什麼?

因為該篇文章的所有內容已於首頁顯示,沒有額外的連結可進入文章內部。可能原因有二,一是內容過短,二是文章內沒有插入繼續閱讀。若沒有插入繼續閱讀的習慣,可於後台 > 基本/進階設定 > 首頁文章顯示模式,選擇"顯示前4行摘要"。

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

 

更新

2014/06/09  解決痞客邦新增快捷功能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 留言(302) 人氣()


留言列表 (302)

發表留言
  • 悄悄話
  • 艾莉的旅遊世界
  • 哈囉..請問我想從你的另一款改成這一款,但是pixnet還沒上架。我是不是還不能更新?...
  • 可以唷! 這篇文章有提供CSS語法,將它複製貼到後台>自訂樣式>CSS原始碼編輯

    Dribs & Drabs 於 2014/03/18 07:27 回覆

  • melita1217
  • 可以設定顯示每一篇文章的的第一張圖片嗎?(之前的樣式好像事會自動選取每篇文章的第一張)
  • 之前的樣式其實會有bug,所以後來都改成選取第一行的圖片
    如果不介意有bug的話,請把以下CSS加到所有語法的最後面
    .article-content p img{
    display: block;
    width: 300px;
    height: auto;
    position: absolute;
    top: 55px;
    left: 20px;
    clip:rect(0px,300px,200px,0px);
    }

    Dribs & Drabs 於 2016/01/21 22:54 回覆

  • melita1217
  • 1. 我公告注目區想要再往上一點,我用padding: -10px沒有用耶~
    2. 我的人氣很奇怪,滑鼠靠近時會觸動廣告區塊~不知如何是好?
  • 1) 調這裡喔,第三個數字調小
    #header{padding: 70px 0px 70px 0px;}
    2) 把人氣換到側欄2就可以了

    Dribs & Drabs 於 2014/03/19 13:53 回覆

  • 悄悄話
  • 悄悄話
  • 艾莉的旅遊世界
  • 謝謝你的回答喔 !!!
  • 不客氣:D
    是說後台已經通過審核了,可以直接到後台套用

    Dribs & Drabs 於 2014/03/21 16:37 回覆

  • 悄悄話
  • 哈娜〃Azrael
  • 你好,很開心當我決定回來繼續寫部落格的時候
    看到你設計的這個版面,一看就愛上了,謝謝你的分享

    但我想請問,因為我個人習慣 Gulim 這個字型
    要怎麼改CCS才能整個版都這個字體
    文章的首圖大小該修成多少,或者是怎樣的比例才會完整呈現像拍立德得感覺

    另外,想請教的是
    該怎麼像你的網頁那樣,將分類放在上方?還有把部落格名稱變成圖片?

    歹勢,問得有點多>口<
  • 哈囉,你好
    謝謝你這麼喜歡這個版面 :)
    (1)
    部落格字型請找到下方這行,把Arial改成你要的字型
    body{font-family:"Arial";}
    (2)
    目前首頁的圖我是設定長寬比3:2,但只要你的第一張圖片不要有框,都會很像拍立得
    (3)
    分類在上方的教學在這裡: http://weilife.pixnet.net/blog/post/356355326
    不過我看你已經開始在改了~
    (4)
    把部落格標題改成圖檔↓,url裡面填圖片網址
    #banner h1 a{
    width: 300px;
    height: 200px;
    background: url(.......) left top no-repeat;
    font-size: 0px;
    display: block;
    margin: 0 auto;
    }

    Dribs & Drabs 於 2014/04/07 13:19 回覆

  • 哈娜〃Azrael
  • 呵呵呵呵,剛好今天休假,想說慢慢研究
    結果被發現了,呵呵呵!
    謝謝你細心又仔細地回答,果然比我慢慢試慢慢找,來得快多了

    另外想問,如果要跟妳一樣把最新文章放在上方
    已經你最右方的about,該怎麼修改?
  • 這個樣式只要在後台把元件拉到側欄2,就都會顯示在部落格上方
    最右方的about是用公告區塊#spotlight 修改的
    修改的方法跟這個版面的側欄2是一樣的概念
    如果不太懂可以參考這篇教學的第7個範例 :D
    http://weilife.pixnet.net/blog/post/321563384

    Dribs & Drabs 於 2014/04/07 13:38 回覆

  • 哈娜〃Azrael
  • 喔喔喔,我懂了!哈哈哈,謝謝你不厭其煩地回答,謝謝!
  • 不客氣 :D

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

  • 悄悄話
  • 哈娜〃Azrael
  • 終於搞定了,謝謝你,wei!
    我就這樣用著你的分享版型,繼續我的部落格生活了,謝謝你!
  • 不客氣,我會很開心大家喜歡這些版面!!
    歡迎有空多來聊聊天 :)

    Dribs & Drabs 於 2014/04/08 21:27 回覆

  • sanlee157
  • 一直很喜歡你的設計,簡潔好看,謝謝。
  • 謝謝你的留言,真的好開心喔 ☆,:*:‧\( ̄▽ ̄)/‧:*‧°☆*
    我會更加努力、創作的 :D

    Dribs & Drabs 於 2014/04/10 18:19 回覆

  • 蛋拔
  • 很喜歡您的這個樣式,感謝您的分享喔^^

    花了一點時間,終於把部落格的樣式搞定了,但內文照片的寬度設為900px,我想把照片設定寬一點,但一直無法成功,想問您要從什麼地方著手呢???....先感謝您的撥空回覆喔^^
  • 是不是指套用後照片最大就顯示600px,比之前的版面都來的小?
    剛剛有更新CSS的錯誤,不過你語法應該已經改很多,重新套用的話太麻煩了
    請找到這行 #article-main .article-content p img{}
    把裡面的max-width: 600px;刪掉就可以了 :)

    謝謝你喜歡這個樣式喔 :P

    Dribs & Drabs 於 2014/04/17 19:05 回覆

  • 蛋拔
  • 我改好了,感謝您大力的協助喔^^
  • 我才要謝謝你幫我找出這個問題呢!!

    Dribs & Drabs 於 2014/04/17 19:40 回覆

  • 蛋拔
  • 您太客氣了,我是瞎貓碰到死耗子啦^^

    對了,首頁的那個讚,我找不到可以在哪邊改(想往下移一點)^^

    您的小公主很可愛喔^^
  • .article-content{padding-top: 235px;} 這個數值加大
    那是我姪女,哈哈哈,她超可愛的,謝謝你的稱讚>////<

    Dribs & Drabs 於 2014/04/17 20:11 回覆

  • 悄悄話
  • lefu
  • 很實用 ^^ 謝謝分享
    請問怎麼把旁邊隱藏式的改到右邊呢@@
  • (1)
    #links-row-1{
    left: -210px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;
    }
    改成
    #links-row-1{
    right: -210px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
    }
    (2)
    #links-row-1:hover{left: 0px;} 改成 #links-row-1:hover{right: 0px;}
    (3)
    #links-row-1 .box:first-child{
    padding-right: 40px;
    background: url(...) right 10px no-repeat;
    }
    改成
    #links-row-1 .box:first-child{
    padding-left: 40px;
    background: url(...) left 10px no-repeat;
    }
    (4)
    加入 #links-row-1 .box{margin-left: 40px;}
    (5)
    加入 #links-row-1 .box:first-child{margin-left: 0px;}

    Dribs & Drabs 於 2014/04/18 08:53 回覆

  • w i n g
  • 你好!!感謝你的無私分享!!
    但不知為什麼我調了文章分享到側欄2的第一順位,也打了相關css,
    仍是沒有顯示到在文章最上方?
    令下選式的選單沒法顯示,也不知道成功與否。
    還有我想知道如何移除我最上方的blog name and description呢?
    中間又怎麼可以夾一張圖片呢?
    感謝你不嫌其煩回答…感謝…
  • 你好 :)
    我剛看過你的blog,目前下拉式選單有正常顯示
    不曉得你說的問題是甚麼? 可以再說詳細點嗎?
    部落格標題和敘述移除變成單只有圖片的話↓,url裡面填圖片網址
    #banner h1 a{
    width: 300px;
    height: 200px;
    background: url(.......) left top no-repeat;
    font-size: 0px;
    display: block;
    margin: 0 auto;
    }
    #banner h2{display: none;}

    Dribs & Drabs 於 2014/04/27 19:19 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 李培芳(沁遠)
  • 很喜歡你的設計
  • 謝謝你的支持 (*˘︶˘*)

    Dribs & Drabs 於 2014/05/03 22:37 回覆

  • Sylvia
  • 早安,我又出現了~這次有問對版XD~
    之前你有教我title h2 斷行的問題
    不過我依照教學
    以下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;}

    修改後
    .title h2{
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height: 200%;
    position: absolute;
    top: 270px;
    left: 20px;
    }
    只是現在長度似乎拉長了,但卻無法自動斷行。
    不知道是不是我又哪邊沒處理好了~
    又麻煩你了>"<
  • .title h2的前三行沒有去掉,如果去掉會變成這樣
    .title h2{
    width: 300px;
    height: 20px;
    position: absolute;
    top: 270px;
    left: 20px;
    }
    去掉後應該就正常了

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

  • Sylvia
  • Ya~~~修正好了~謝謝~謝謝!
  • 不客氣 :D

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

  • 悄悄話
  • 悄悄話
  • 口妮姬娃
  • 真的好喜歡好喜歡你設計的版面
    每個都非常有質感! 真心感謝你的分享與付出 :)
    現在在規劃去巴塞隆納 也有看你的分享喔 好棒呢~

    噢對了
    想請問
    我旁邊連結的FB版面過寬 要改哪個語法阿 ? 謝謝
  • 找到以下這段語法
    #links-row-1{left: -210px; width: 240px;}
    #links-row-1 .box{width: 180px;}
    假設側欄1要增大100px的話,改成
    #links-row-1{left: -310px; width: 340px;}
    #links-row-1 .box{width: 280px;}

    謝謝你的稱讚 ☆,:*:‧\( ̄▽ ̄)/‧:*‧°☆*
    你要去巴塞隆納呀~那裡很棒唷,我好想再去一次!!
    祝你玩得愉快呀:D

    Dribs & Drabs 於 2014/05/23 17:07 回覆

  • 口妮姬娃
  • 你好
    想請問側欄2的10個元件是怎麼樣才能像你一樣放在頁面最上面呢?
  • 到後台 > 側邊欄位設定
    把元件拖到側欄2就可以了

    Dribs & Drabs 於 2014/05/23 17:08 回覆

  • 口妮姬娃
  • 我拖到側欄二
    可是沒顯示 :(
  • 我剛看了你的版面,跟預設的不一樣@@?
    在想是不是你有額外貼一些語法讓版面亂掉了?
    你可以先試試把側欄1的元件都搬到版位暫存區,然後看看網誌會不會正常
    還是你有做甚麼額外的設定?

    Dribs & Drabs 於 2014/05/24 08:25 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • miao
  • 謝謝妳一直分享那麼棒的版面
  • 哎呀呀~我發現日曆區的色碼沒有改過來
    如果你介意的話再重新套用 :P

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

  • miao
  • 原來如此,還以為是本來就這樣XD
    通通是我愛的藍色!超開心的拉ヾ(●´▽`●)ノ
    感謝妳:D
  • 哈,不客氣啦 :D

    Dribs & Drabs 於 2014/06/09 22:28 回覆

  • S_戳戳小酒窩
  • 好喜歡,讓我可以放喜歡的照片 :">
  • 分享的樣式幾乎都是考慮圖文的部落格喔 :)
    謝謝你的支持!

    Dribs & Drabs 於 2014/06/09 22:29 回覆

  •  張 潔 唲 . 
  • 請問為甚麼【公告區塊】跟【頁尾描述】的地方只要瀏覽文章他就會內容自動靠左?有解決方法嗎!蠻喜歡這個樣式的可以每次套用這樣式(加後台有分享的那個樣式也會這樣)!那兩個板塊的內容一瀏覽文章就會自己靠左用置中語法也無效,真無奈呀。
  • 公告區塊CSS預設是靠左,如果要置中的話加入以下語法
    #spotlight{text-align: center;}
    另外頁尾描述的部分本來就是設定置中
    其實不太懂你說的"只要瀏覽文章他就會內容自動靠左"?
    我測試是沒有這個問題,是不是能截圖讓我看呢?

    Dribs & Drabs 於 2014/06/10 08:09 回覆

  •  張 潔 唲 . 
  • 已經把樣式重新套用這個樣式了,麻煩您到我網誌隨便點一篇文章幫我看看問題出在哪裡可以嗎?表面【公告區塊】跟【頁尾描述】的地方看是置中的!但是點進去看文章【公告區塊】跟【頁尾描述】的地方是靠左邊的,囧…(如果不知道問題出在哪我只好再換其他樣式了!Q_Q,感謝)。
  • 我改了一下CSS,你再套用看有沒有問題

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

  • 蛋拔
  • 您好,我把之前拍立得的版面換成這個,但有個問題想請問您

    我把文章分類獨立開來,但滑鼠移過去時,他會跑掉,而且左上方會有一塊感覺怪怪的....

    對了,您右邊的訂閱又如何加上啊???

    問題有點多,先感謝您的耐心回答喔^^
  • 這篇 http://weilife.pixnet.net/blog/post/356355326
    Q&A-1的語法再重新套用一次
    訂閱和信箱是寫html放在公告區塊,再定義CSS讓區塊顯示在右邊

    Dribs & Drabs 於 2014/06/10 16:06 回覆

  • 蛋拔
  • 我套用過了很多次,還是一樣@@....
  • 那篇教學文我剛剛有更新過,請問是套用剛剛的嗎?

    Dribs & Drabs 於 2014/06/10 16:34 回覆

  • 蛋拔
  • 我改好了,目前只剩左上角"蛋拔的吃跟玩"怪怪的@@....

    不好意思,真的太麻煩您了^^
  • 同上回覆

    Dribs & Drabs 於 2014/06/10 16:36 回覆

  • 蛋拔
  • 您真的是太強了,一切都搞定了^^

    真是太感謝您了^^
  • 恭喜 :P
    教學文要找個時間來重寫ORZ

    Dribs & Drabs 於 2014/06/10 16:54 回覆

  • 溏
  • 版主你好~~
    想請問關於頁數的寫法
    痞客預設是1 2 3…8這樣
    我想要像你的全部攤開顯示
    1 2 3 4 5 6 7 8
    這樣該怎麼寫呢? 謝謝
  • 我只是文章比較少,文章變多或是每頁顯示文章數變少我也會有...喔

    Dribs & Drabs 於 2014/06/10 18:09 回覆

  •  張 潔 唲 . 
  • 我想請問一下,那個讚的按鈕怎麼弄成你文章這樣,@@ ..
    還有我蠻喜歡你現在這個樣式的,什麼時候會分享啊!(期待)。
  • FB按讚可以看一下這篇 http://weilife.pixnet.net/blog/post/370706507 的C-4
    而且可以用.bookmark來設定它的位置,我現在就是把它釘在文章右上角
    現在打算先把以前分享過的樣式改好,才有時間來分享現在的樣式ORZ

    Dribs & Drabs 於 2014/06/10 20:44 回覆

  •  張 潔 唲 . 
  • 需要語法?那可以給我你設定的語法嗎?@@。
  • #article-main .bookmark{
    display: block;
    position: absolute;
    right: -15px;
    top: 0px;
    }
    數值再自己調一下

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

  •  張 潔 唲 . 
  • 那請問文章底下這排【 XXX 發表在 痞客邦 PIXNET 留言(0) 引用(0) 人氣(0) 】可以不要置左,把它改成置中或是置右嗎?@@…(抱歉問題有點多)。
  • .author{text-align: center;}

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

  • 悄悄話
  • 蛋拔
  • 拍謝,我又來麻煩您了@@...

    您旁邊那個訂閱的欄位我試了很久,但還是弄不出來....拜求您的語法,感恩^^
  • HTML基本語法如下,可貼在公告區塊、頁尾描述或自訂欄位
    <div id="BlogLink_S">這邊寫內容</div>

    CSS基本語法如下,其他美化功能請自己加入
    #BlogLink_S{
    position: fixed;
    top: 50%;
    right: -180px;
    z-index: 10;
    width: 200px;
    margin-top: -45px;
    transition: right 0.5s ease-out;
    -webkit-transition: right 0.5s ease-out;
    -moz-transition: right 0.5s ease-out;
    -o-transition: right 0.5s ease-out;
    }
    #BlogLink_S:hover{
    right: -70px;
    }

    Dribs & Drabs 於 2014/06/11 14:06 回覆

  • 蛋拔
  • 感謝您,我來去試試^^
  • 加油!

    Dribs & Drabs 於 2014/06/11 16:40 回覆

  • 小百
  • 更新的版本更棒了
    之前就想問文章標題如何改到圖片上面
    更新版本就弄出來了
    真是開心^^
    謝謝分享~
  • 哈,謝謝你的稱讚 :)
    你分享的衣服都好漂亮喔,嘻嘻!

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

  • 溏
  • 版主太感謝你了~~~~~
    我成功了!!!!!!
  • 不客氣 :D

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

  •  張 潔 唲 .
  • 我再請問,如果想把首頁文章三格變成首頁文章四格,要怎樣改?可以給我語法嗎!@@。
  • 不建議喔,要改很多東西!

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

  •  張 潔 唲 .
  • 那個,怎樣把上面那排側欄2的下拉背景弄成不要透明看得到底下的字啊?
    @@…我下拉會看到我文章分類的字,覺得有點礙眼!求語法,感謝!>w<。
  • 我試過了好像沒辦法耶~

    Dribs & Drabs 於 2014/06/12 11:19 回覆

  • Sylvia
  • 偷偷拿去用了~謝謝板主^^
    細節等有空在來調整~有問題的話就得來打擾妳囉XD
  • OKOK,不客氣 :D

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

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 洛嵐情.K.
  • 超好看的!!!
    謝謝版主大方分享

    我帶回家套用了xDDD謝謝
  • 不客氣 :D

    Dribs & Drabs 於 2014/06/19 12:54 回覆

  • Claudia's family
  • 我想請問要如何才可以顯示出上方的"文章分類,熱門文章...."這些選單呢??
    CSS實在好難啊>.<
  • 看一下這篇文章版面設定的(3-4)
    至後台>側邊欄位設定修改

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

  • 布拉妮妮
  • 我應該留言在這才對~想請問您,我是套用您這款版型,但是文章的部分無法在首頁顯示出來,呈現灰色的眶,另外我想嵌入粉絲團名片貼建議該怎麼放置會比較好,因為放在左邊的收縮攔不易發現,想像您一樣右邊「訂閱、信箱、搜尋」,但爬了您的文章好久還是不會,不知是否有甚麼方式能讓我操作的,無論如何依然感謝您的分享,非常喜歡您的版型,願 順心。
  • 上一篇留言我有回喔~
    灰色框的問題,該版型建議第一張圖的長寬比為1.5或是小於1.5
    若長寬比大於1.5就會發生你現在這樣的狀況,有灰色的地方出現
    FB粉絲團的話直接有現成的語法,不用用像我「訂閱、信箱、搜尋」這種比較麻煩的語法
    例如 http://www.pilipress.com/2014/03/float-facebook-like-box.html

    謝謝你的稱讚 :D

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

  • man3pic
  • 版主~~謝謝您提供這麼棒的版型!!!!!
    我想請問您我想將我的原本在右方的伸縮連結(facebook和線上預約)一樣維持在右邊,不要跑到上面去請問要怎麼用??
    我把那段程式碼拆除就整個不見了~~~可以麻煩您幫我看一下嗎?萬分感謝~~~~~~麻煩您了
    http://man3pic.pixnet.net/blog
  • 我不確定你說的右方伸縮連結是甚麼樣子
    不過你可以把FB跟線上預約的語法放在公告板位裡不要放在側欄裡

    Dribs & Drabs 於 2014/06/25 19:55 回覆

  • man3pic
  • 我原本的右方伸縮版位是長像這樣http://freibridal.pixnet.net/blog
    後來貼上程式碼後跑到上方,所以想問您要怎麼修正可以維持原來的位置.....
    真的很抱歉麻煩您了^^
  • 把程式碼貼到公告版位裡應該就可以了

    Dribs & Drabs 於 2014/06/26 10:40 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 艾醬
  • 謝謝!
    我實在太喜歡版主的樣式了...又不專業
    換過版主的樣式後,
    整體風格美呆惹!好專業 ^O^
    超開心的~~~
  • 不客氣,謝謝你的支持 :D
    你部落格拍的照片好漂亮喔!!!

    Dribs & Drabs 於 2014/07/28 22:13 回覆

  • 艾醬
  • 版主的美多了!
    剛才看了九份的照片,
    完全不像在台灣啊~~~
    會不會太美啦!
    如果是我,大概也會在燈籠區走不了 ^^

    希望我的版面可以再更富有個人特色
    (我的小小心願吶...)
    有機會再來找版主討論囉~
  • 謝謝你的稱讚 >////<
    歡迎來討論討論喔!!!

    Dribs & Drabs 於 2014/07/28 22:50 回覆

  • 艾醬
  • 結果我馬上就跑來了...
    請問要如何將首頁的題目全部都顯示出來呢?
    因為現在的設定只可以顯示一行
    謝謝
    ^^
  • 把以下這三行拿掉就可以顯示完整標題
    .title h2{
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    }
    但是這樣的話圖片與內文的高度就需要再調整喔,修改以下兩行的數值
    .article-content{padding-top: 210px;}
    .article-content p:first-child img{top: 90px;}

    Dribs & Drabs 於 2014/07/28 22:50 回覆

  • 艾醬
  • 我改啦!
    謝謝妳的立即回覆,
    好感動哦...
  • 那是剛好有再用電腦
    不客氣喔 :D

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

  • 史努比
  • 史努比大推
    好喜歡你做的這幾個樣式
    謝謝你的分享喔!
  • 不客氣 :D

    Dribs & Drabs 於 2014/07/31 20:51 回覆

  • abc3366276
  • 好好看>///<
    謝謝你的分享:)
  • 套用該版型,頁尾的版權宣告請勿移除!

    Dribs & Drabs 於 2014/08/03 21:54 回覆

  • vicky
  • 好漂亮的樣式啊~!
    讓我塵封已久的痞客邦又重出江湖了哈哈
    感謝您無私的分享 :)
  • 不客氣喔 :)

    Dribs & Drabs 於 2014/08/04 21:03 回覆

  • abc3366276
  • 我沒有刪啊 他自己消失了.....
  • 你的版面好奇怪喔,沒有頁尾描述耶!! 連痞客的那些連結都沒有
    看起來套用其他版面也是有同樣的問題
    可能是你FB的語法造成的~語法可能多了個<div>或是不太正確
    你可試試先把FB那個元件移置暫存區

    Dribs & Drabs 於 2014/08/07 14:39 回覆

  • abc3366276
  • 我弄好了! 謝謝你:)
  • 不客氣喔 :)

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

  • Hunt
  • 好讚的版型..真是高手呀~
  • 哇!!能被高手稱讚實在太榮幸了 >////<

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

  • Hunt
  • wei 很厲害,這CSS...我只懂皮毛啦...
  • 昨天看到你的部落格有提供舊版快捷功能bar重新加入的方法,好開心,舊版真的比較實用
    哀,可是痞客的寫法是嵌入一個網頁,這樣就不能美化它了,有點苦惱,還在研究中~"~

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

  • Hunt
  • 哈哈哈...沒有錯...
    那個修改iframe內容的方法我也研究很久了
    暫時放棄..哈~
  • 哈,我也很想放棄,還在垂死掙扎中XDDD

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

  • Claudia's family
  • 謝謝你的MAIL回答,我已經修改好了!CSS真的好難⋯⋯><
    但我想再請教你一下,下拉式選單可以放在中間嗎?我現在是放在尾巴部份才不會糾在一起!
  • 你是說像 最新文章 > 熱門文章 > 文章分類等三項 > 動態訂閱 > 參觀人氣 這樣嗎???
    如果是這樣的話不建議,側欄的寫法都要改掉才行
    CSS不會難啦,慢慢學會覺得很有趣呢 :)

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

  • Claudia's family
  • 嗯!那我了解⋯⋯謝謝你喔!
    不過我在你的那看到"部落格樣式-客製化服服",請問你未來是有這種服務的打算嗎?
  • 哈,有阿,現在版面右方灰色區塊就有寫囉,只是不明顯
    那個分類裡之後會發一篇文章,寫較詳細的服務方式
    只是我還在思考要怎麼寫XD

    Dribs & Drabs 於 2014/08/11 16:33 回覆

  • Claudia's family
  • 哇!真的嗎!很期待吶!
    有預估幾時開始服務嗎?或是現在就可以捎MAIL給你了呢?
  • 我前陣子剛接第一個case,應該算那時候就開始服務了吧(笑
    現在就可以mail給我了,不過先看一下這篇文章的D1
    http://weilife.pixnet.net/blog/post/370706507

    Dribs & Drabs 於 2014/08/11 16:48 回覆

  • 桃樂絲
  • 感謝wei 的無私分享,真的讓我學到不少不擅長的領域,也確實蠻有成就感的^^
  • 不客氣 :)
    CSS很有趣,學會了真的很有成就感!!

    Dribs & Drabs 於 2014/08/13 17:41 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 小悠
  • 謝謝你的分享噢~CSS一直無法上手
    還好有你美麗的版型 感激
  • 不客氣,感謝你的支持 :)

    Dribs & Drabs 於 2014/08/23 07:43 回覆

  • 小悠
  • 你好 我遇到一個問題想請教
    我文章裏面有放一些並列的小圖
    因為本來的高度都不一致
    所以在編輯時候我有特定把它們改成統一的高度
    並且維持在一行之內(硬是不讓他們自己斷行)
    但目前看來尺寸都跑掉了
    而在編輯文章的地方看設定卻都還在
    這個問題有棒法解決嗎?
    附上網址http://stacyminiyu.pixnet.net/blog/post/184943217大概是這種狀況
  • 找到這行 #article-main .article-content p img{....}
    把它改成#article-main .article-content p:first-child img{....}
    內文的圖片應該既可以正常顯示了 :D
    我有更新程式碼,如果你沒甚麼修改的話可以重新套用

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

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