Photo


I'm Wei

Traveler / Photographer / Designer

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

 

▸ Facebook:Dribs & Drabs

▸ Instagram:dribs__drabs

▸ Mail:weilife.blog@gmail.com

▸ Pixnet訂閱:weilife

07

自己的習慣是,在瀏覽他人部落格時,最常使用 "文章分類" 來搜尋想要的文章 (不知道大家的習慣是否都一樣?)

在看一些知名部落格時也有發現他們會設定一些較常被使用的文章連結(類似文章分類)放在網誌的最上方

因此在設計部落格版面時,會特別將文章分類這區塊放在較醒目的地方,以助於大家搜尋

 

廢話不多說,這篇教學文是要教大家怎麼將文章分類的各個資料夾拆解然後釘選到想要的區域

另外一項重點是,隱藏資料夾內的各分類達到節省空間的效果,當滑鼠移至資料夾時分類才會出現

目前是覺得這樣的設計還不賴,讀者可以很清楚地找到想要的分類,且版面仍保持的很乾淨

效果如下圖動畫,想學的再繼續往下看吧!

01

 

(0) 先前提要

這篇文章的教學主要是在教"概念",套用在每個樣式都難免會有一些問題產生

建議有一些CSS基礎的再來學習比較適合,因為還有後續的CSS問題須自行解決

 

(1) 了解 "文章分類" 的標籤架構

改CSS前需要將標籤架構調查一番,才知道該怎麼寫CSS

下面的CSS語法如果看不太懂,請記得回過頭來看這張圖

03

 

(2) 前置設定

原本的文章分類有一堆有的沒的,需要將其刪除

例如"文章分類"這四個字就需要刪除,還有控制所有資料夾開闔的按鈕與各資料夾前方的圖示

另外還需要將文章分類的各資料夾設定打開,這些動作的CSS如下

把上述CSS語法加入後,文章分類的區塊會變成下圖這樣,純屬正常現象

02

 

(3) 水平展開

接下來利用inline-block屬性將各資料夾分類水平展開,這步驟的結果也呈現在下圖中

04

 

(4) 設定下拉觸發事件

最重要的是當滑鼠移至分類資料夾標題時,分類子項目才會出現,利用hover屬性來達到,套用後應該就很接近成果了

 

(5) CSS清空設定

各位套用的CSS版面可能已經在先前定義過.box或是#category的樣式,這些可能會影響目前文章分類的長相

例如上面的示意圖出現了一些箭頭和虛線,都是之前定義的

最後這一步驟提供的CSS語法是清空所有的樣式設定,至於接下來的美化動作就要靠各位囉!

如果有些清空設定無效,請在屬性後面加個 !important ,強制加入屬性

美化的部分要參考文章分類的元件放在哪一個側欄,如果放在側欄2建議參考側欄2的CSS設定

 

(6) 複製以上所有語法

 

 

♥ 部落格樣式 - 實用教學: http://weilife.pixnet.net/blog/category/1358731

, , ,
創作者介紹

Dribs & Drabs 點點 滴滴

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


留言列表 (127)

發表留言
  • melita1217
  • 你現在整個新版面我也很喜歡耶,會上架嗎?
    可分享CSS嗎?
  • 哈囉,目前版面會分享喔( ^ω^)
    只是最近較忙,可能要過些時候了( ´_ゝ`)

    Dribs & Drabs 於 2014/03/09 12:32 回覆

  • melita1217
  • 好喔!!!謝謝,辛苦了~~~
  • 不客氣啦! 請多多支持ヾ(*´∀`*)ノ

    Dribs & Drabs 於 2014/03/09 12:38 回覆

  • 歿
  • 謝謝分享喔(’・ω・`)
    推一下(’・ω・`)
  • 不客氣! 請多多支持ヾ(*´∀`*)ノ

    Dribs & Drabs 於 2014/03/13 20:40 回覆

  • Mr.Liam
  • 您好,想請教一下,這些語法要加在哪裡呢?

    我不管加在哪一層,側欄列都是在左側垂直向下排列,

    且滑鼠移動至上方後,會全部的相簿都一起打開~

    再麻煩您跟我講解一下摟!
  • 哈囉,語法可以加在全部CSS語法的最後面
    但我剛試了一下,這個語法跟你現在套用版面的語法不太相容
    看了你的blog,文章分類並沒有使用到資料夾,所以應該不需要用到本篇的教學
    不過我還是會研究怎麼讓這兩個語法相容,研究出來再更新教學文

    Dribs & Drabs 於 2014/03/14 09:59 回覆

  • Mr.Liam
  • 好的,那就再麻煩您摟!

    剛剛先去建立了資料夾,但是套用本篇的語法後,還是不會把資料夾直接顯示出來~

  • 哈囉,我已經找到替代方案了,如果有需要的話再看一下Q&A吧!

    Dribs & Drabs 於 2014/03/20 20:31 回覆

  • pwp608
  • HI,您好~

    我不得不說,你的網誌風格棒級了!
    那質感~
    讓人一眼就被“洗鍊且純淨”的畫面吸引住,《唯美》。

    小弟不才,CSS一竅不通。
    只好厚顏的全盤套用基本篇的語法。

    只是有點小問題想尋求解決方式,
    否則套用之後資料夾的排版不如預期。

    我的“分類導覽”多達14~15大項,
    不過都希望能全部加入(上下兩排各7)

    麻煩您了!!





  • 範例的語法只處理四個分類資料夾,如果直接套用,第五個分類資料夾以後可能會有問題
    你需要看一下第四步驟,增加第5-15的資料夾位置設定
    然後每個資料夾的位置要計算一下
    謝謝你的讚美 :D

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

  • 悄悄話
  • pwp608
  • 又來打擾了,請教一下。

    當我將下段CSS加入內容後發生了驚人的現象!!!

    #category .inner-box ul {display: block !important;} /*所有資料夾打開*/
    (OK)

    #category .box-title{display: none;} /*刪除文章分類的標題*/
    (oh~不,整段分類項都消失不見)

    #category .box-more{display: none;} /*刪除控制所有資料夾開闔的按鈕*/
    (OK)

    #category h6 img{display: none;} /*刪除各個資料夾前方的圖示*/
    (OK)

    於是跟教學的範本完全不同了。
    不知問題出在何處,

    麻煩你了!謝謝

  • Q&A(1) 的語法先加入,再進行其他步驟

    Dribs & Drabs 於 2014/03/22 17:36 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • sam
  • 解說詳細 ...
    但!只怪自己腦殘還是維持現況囉
  • 哈,這篇教學要有一點CSS的基礎才會較容易理解

    Dribs & Drabs 於 2014/05/11 19:25 回覆

  • 悄悄話
  • 口妮姬娃
  • 想請問為什麼我的文章分類無法跑到正中間呢?
    謝謝你 :)
  • 你先試試以下說的

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

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 口妮姬娃
  • 可以了 :) 謝謝你
    我發現是我連結FB的語法怪怪的
    會讓整個版面都不對勁
    耶!解決囉 ^_^
    Thanks
  • 不客氣 :D

    Dribs & Drabs 於 2014/05/24 20:56 回覆

  • 悄悄話
  • 口妮姬娃
  • 恩恩 後來試成功了
    我想問說 就是資料夾的水平距離
    你的190px 310 px 695px 840px是怎麼算出來的阿?
    因為我想多增幾個資料夾~~~~可是我不知道該怎麼算距離

    謝謝你 :) 真的非常熱心 謝謝
  • 第四步有圖示教學
    我自己通常是憑感覺先設一個數值,再做微調

    Dribs & Drabs 於 2014/05/25 06:46 回覆

  • 悄悄話
  • 悄悄話
  •  張 潔 唲 .
  • 他底下有細細細細細細非常細的虛線,怎樣把它弄掉?@@。
  • 加入以下語法
    #category .box h6{border: 0px;}

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

  •  張 潔 唲 .
  • 沒有反應欸!@@,加入語法了一樣出現餒。
  • 那你找到 .box h6{....}把裡面border那行刪掉就可以了

    Dribs & Drabs 於 2014/06/12 10:57 回覆

  •  張 潔 唲 .
  • 那,如果要加下拉背景顏色的話是怎樣加?@@,求語法!感謝。
  • 現在下拉背景本來就有顏色了(藍+灰)
    只是現在文章分類的層次在比較上面,所以才會變成這樣
    我有試著改變他的層次順序但沒有用

    Dribs & Drabs 於 2014/06/12 12:37 回覆

  •  張 潔 唲 .
  • 那個,其實…我是問,文章分類下拉選單的背景顏色怎麼增加或是更改顏色!(囧,剛剛就在想是不是有搞錯,抱歉)。
  • #category li{background: #ffffff;}
    像是改哪裡之類的問題,你可以參考這篇教學
    http://weilife.pixnet.net/blog/post/267442817
    試著找看看該改哪裡

    Dribs & Drabs 於 2014/06/12 21:43 回覆

  •  張 潔 唲 .
  • 更改不了欸,而且你說的那篇我照樣去弄也看不懂!我比較習慣知道哪段語法去修改,抱歉喔!求解。
  • #category .inner-box ul{background:.....}
    這篇教學裡面的第一段有標籤圖示,可以參考一下
    如果是初學者的話建議不要大幅度的修改,不然就去學著看網頁標籤

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

  • inwuyu
  • 您好,目前套用了「拍立得圖文集」版本,一些小設定也依照您教學修改,
    但上方的「文章分類」想修改成上面教學的樣式,但不知道要從哪裡下手??

    另外,我有些文章標題較長,不知道是否於首頁可以完整呈現,謝謝~
  • 你可以一步一步照著教學做,不過這篇教學建議要有些CSS基礎比較適合
    標題的問題找到下面這幾行刪掉
    .title h2{
    white-space: nowrap;
    text-overflow:ellipsis;
    }
    然後調整圖片顯示垂直位置
    .article-content p:first-child img{top:90px;}

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

  • w i n g
  • 你好,這個更換了,現在版面非常簡潔,感謝你的教學!
    但是下拉式選單我已經遢過很多次,放在不同的位置,
    也沒有效果。也找不出問題所在。
    也看見你說每個套用都可能會有問題,但不知怎樣處理。
    可以幫我看看嗎?感謝!
  • 我看你的部落格沒有文章分類,應該先去後台把文章分類叫出來
    後台>側邊欄位

    Dribs & Drabs 於 2014/06/21 09:50 回覆

  • w i n g
  • 可是「文章分類」一放在側欄就長期都在開,關不了。你可以看看。感謝!
  • 這篇教學主要是將文章分類的"資料夾"做成下拉式選單
    你的文章分類目前沒有用資料夾歸類,所以才會出現這個問題
    你可以至後台>文章列表的左側編輯資料夾分類

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

  • 布拉妮妮
  • 感謝您前幾次的解說,另外還有一個問題~就是這篇文章的教學,我操作了一下,不知道哪邊錯了!似乎變得怪怪的,不知是否有方法修正呢?誠心感謝您的幫助
  • 你看一下第四步驟解說的三種寬度,搭配步驟三的圖
    依你的狀況這三個寬度值都需要修改
    另外如果要用成下拉式選單的話,建議文章分類的資料夾名稱不要取得那麼長
    上面白色BAR沒有那麼多空間讓你擺完全部

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

  • Fong
  • 我好喜歡你設計的風格喔!
    感覺就是簡約又漂亮!

    我套用了你設計的樣式,也想試試能把文章分類放到上面那一排去,
    可是,我只要貼上,下面這一列的語法,整個文章分類就會消失,但是裡面的分類排版,不會顯示

    #category .box-title{display: none;} /*刪除文章分類的標題*/

    請問,我要怎麼改呢?

  • 第二步驟的第五行語法加進去就可以了

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

  • Fong
  • 唔,加入一樣不行的說。

    後來還一條一條程式碼對照了解~用超久…還是不行
    超喜歡能夠直接把文章分類項目顯示在上面啊!這樣看真的好清楚!

    果然是殘念嗎~


  • 你的文章分類沒有用資料夾分類,所以會沒有效果

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

  • Fong
  • 耶?我剛剛看了,第一層的都是資料夾沒錯~
  • 剛用手機看所以看錯了
    你第二步驟的第二行語法應該沒加喔/*刪除文章分類的標題*/

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

  • 悄悄話
  • 悄悄話
  • Fong
  • 謝謝,我完成啦!
    感恩~鞠躬。
  • 恭喜 (*˘︶˘*)

    Dribs & Drabs 於 2014/07/06 21:05 回覆

  • 汀尼扣
  • 首先我想先感謝你非常大方的分享!我好喜歡你的風格,我讓一眼就愛上
    我想說...我也很不好意思的說...我很仔細的看完上面的步驟
    但!我用出來的結果還是依然不行,不知道是不是我理解能力太差:(
    希望可以請您幫我點出我錯誤的地方。非常感謝!
  • 你要把文章分類這個元件移到側欄2
    現在是在側欄1,已經有效果了

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

  • 汀尼扣
  • 還有網誌首頁的下方文章顯示處,能把捲軸移除嗎?
  • 我剛有更新CSS語法,請重新套用喔~

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

  • 汀尼扣
  • 是的!我放到側欄2了!但是都是跳出來的....應該是整個都跳出版面
  • 我看你拿掉語法了
    建議保留有問題的畫面我才能檢查

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

  • 汀尼扣
  • 哈哈謝謝你的開導!我現在已經慢慢有摸出一點頭緒了
    真的很不好意思耽誤到你的時間^^
    我一段文字很努力的重複重複重複的回頭看一次
    我要一個一個字的看,一個一個步驟的慢慢走終於摸出來了
  • 加油加油!

    Dribs & Drabs 於 2014/07/10 15:42 回覆

  •  Tako
  • 我試想把每個資料夾放到想要的位置,我按照版大說的把 #category .inner-box{float: left;}刪掉
    然後加入#category .inner-box:nth-child(2){position: absolute; top: 10px; left: 10px;}
    可是我只移動了一個資料夾,要移動第三個資料夾,是同樣的語法然後nth-child(2)內的數字換成3嗎?
  • 沒錯喔,有幾個資料夾就要定義幾個nth-child
    不過第一個資料夾的編號是2,第二個資料夾的編號是3,以下類推

    Dribs & Drabs 於 2014/07/15 18:00 回覆

  • 悄悄話
  • hahaha810522
  • 我將語法放入 css
    但是資料夾並沒有在上方顯示出來
    怎麼辦:(
  • 你要先把文章分類這個元件放到側欄2

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

  • hahaha810522
  • 我改好了 可是怪怪的 你可以看我網誌的樣子嗎 0.0
    為什麼變成紅紅一大塊
  • 這個就是我在教學文裡面第五步驟說的
    "各位套用的CSS版面可能已經在先前定義過.box或是#category的樣式,這些可能會影響目前文章分類的長相"
    所以要自己再修改一下CSS的設定

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

  • 小米熊
  • 謝謝你大方分享樣式~
    好漂釀
    用了美麗的樣式後,設定了好一陣子
    有幾個問題,我一直無法解決
    想請您幫忙
    1) 上面下拉式選單
    滑鼠經過時,希望下拉式還單有底色,不要透明的,請看該如何設定?
    2) 首頁想將每篇文章的標題放在照片下面
    3) 接續 問題2) 在照片下面放上FB的讚圖示
    非常謝謝^^

  • 謝謝你的稱讚 :)
    1) 下拉是選單的部分是ul,你可以照著上面的設定幫ul加入background屬性
    2) 要改滿多的,不建議
    3) FB的讚是痞客的應用程式,到後台安裝即可

    Dribs & Drabs 於 2014/10/26 09:14 回覆

  • 悄悄話
  • nocturness
  • 您好,我也想要在原本的樣式中加入下拉式選單,
    也看了相關的 Q & A 等教學文章,
    不過一直沒辦法成功。
    能否煩請您幫忙看一下問題出在哪裡呢?
    1. 下拉式選單沒辦法跑到上排 banner 的位置,而是卡在文章上方
    2. 選單不像您提供的這樣透明的,而是有粉紅色 (應該是因為套用到文章框內的樣式?)
    原本您漂亮的風格被我改得好失敗嗚嗚~

    另外想冒昧請問,目前您網誌的樣式之後會分享嗎 >////<
    現在這個真的超漂亮的~~~
    謝謝您大方的分享、用心及花了很多時間設計 :)
  • 1) 你可以調整links-row-2的top屬性,把它拉高
    2) 對,這篇教學文的第五步驟就是在說這個情況,有些屬性還需要再設定

    謝謝你的稱讚>////< 不過這個版型不適合分享,因為大多數的人套用後需要做很多的設定,太麻煩了,會造成很多問題ORZ

    Dribs & Drabs 於 2014/10/29 14:28 回覆

  • nocturness
  • 謝謝您的回覆,我已經 (盡自己最大努力....) 的修改了,
    目前資料夾部分已經成功變成透明,
    但是底下的分類也是透明,會重疊到文章,因此不太清楚。
    請問有建議的方式可以讓分類的地方有底色嗎 (這樣不知道會不會怪怪的就是了)
    另外,每個分類之間 & 資料夾和分類中間的間隔好窄,
    我找了 css 中各個有關 height 的設定,但是都沒有成功 (不好意思,我是第一次使用 css > <)
    想再請問您,這個有辦法解嗎?是不是我找錯方向了 QQ

    我喜歡雜誌封面的樣式,但是下拉式選單則喜歡簡約相簿的,
    雜誌封面的因為少了分隔線,我比較喜歡後者,可惜我還沒找到方式讓兩者合併 QQ

    謝謝您熱心的分享及回覆 :DDD
  • 設背景顏色可以在ul這邊加顏色,因為這邊比較多層,建議看一下HTML上下層的關係(第一步驟的圖),不然設定會有問題
    間隔的話可以用padding這個屬性,一樣也是加在ul那個地方
    若是CSS初學者,不建議將兩個樣式合併,會發生很多問題喔~

    Dribs & Drabs 於 2014/10/29 20:51 回覆

  • nocturness
  • 謝謝你!!我成功了~~~
    不過每個分類之間分隔的虛線消失了(我猜應該是虛線的顏色跟背景粉色相同,所以看不到)
    我找了 css 中有用到薔薇色碼的地方,去改顏色,但是還是無法出現,不知道有沒有辦法讓他回來?

    另外資料夾跟分類中間離接近,我調了 padding,但是只找到調每個分類之間間隔的(現在呈現的樣子是調好的),不知道能不能調分類的粉紅框框跟上面資料夾名稱的間隔,讓他們稍微有點空間呢?

    最後一個問題(對不起QQ),分類和資料夾中間沒有區隔線這點,有什麼簡單的方法可以做出來嗎?
    無論是簡約相簿那種黑條狀(我有爬文,知道那款是照片做出來的,可能比較難)
    如果想要有分隔線,還有什麼建議的方式呢(因為目前我調整不好,滑鼠移過去資料夾出現粉紅色分類框時,框的大小和各個資料夾間的比例不太好看,想說若有分隔線可能比較好)

    不好意思一連問了這麼多問題,真的超級感激你!!
  • 你可以在資料夾名稱h6加padding可以拉大間隔
    簡約相簿沒有用照片作分隔線,你所謂的分隔線應該是border這個屬性做出來的

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

  • nocturness
  • 您好,不好意思又有個問題想請教您,
    我目前已經將版面改成現在的樣子,
    可是每個分類的四周都沒辦法像您的範例這樣,保留空間
    (我現在每個分類下也有設虛線,但是虛線底下無法像您這樣有空白,而是直接就是框框的底了)
    感覺起來是每個 li 外沒有一個更大的 ul 包住,或是要調整 margin 或將 li 縮短、縮排進去下拉選單中間。
    我有嘗試調整各個設定,但是可能方向不對,都沒有成功。
    能否請教您這方面應該怎麼調整,才能像範例這樣呢?
    不好意思,不太會描述問題,真不好意思~~~
    另外也想問,您每篇文章中間都會有分隔線 (例如京阪行程記錄 Day 1 下面那條虛線),
    我在寫文章時找不到類似的選項,請問是跟 css 有關、不是透過編輯文章的小工具產生的嗎?
    謝謝您,不好意思再煩請您解答,非常謝謝!
  • 其實你的問題解答都是padding,你回去看看第一步驟的架構圖,li外面包了ul,在ul加padding應該就是你要的答案
    京阪行程記錄 Day 1這部分,是在文章裡面加HTML與CSS,這部份需撰寫語法的,不是痞客提供的
    要簡單一點的話,你可以把虛線做成圖片,直接插入圖片就好了

    Dribs & Drabs 於 2014/10/31 13:42 回覆

  • nocturness
  • 太謝謝您了,我成功了!
    真不好意思擅自亂修改您分享的 css,我會繼續美化,努力讓我的版面越來越漂亮!
    btw 我知道目前您版面的樣式不會分享,
    但這留言板真的漂亮的,清晰簡單!希望以後您有機會可以分享目前留言板的樣式:D
    謝謝您不厭其煩的回覆!!!
  • 留言樣式可能會出現在之後某一個分享樣式中吧~
    只是這個樣式留言過長就會變得不好看~"~

    Dribs & Drabs 於 2014/10/31 16:23 回覆

  • 酉癸
  • 您好,感謝您的教學分享,對於css一竅不通的我摸索了許久
    順便把上面有人提出的問題看過一次,搞到現在看貌似能夠成功顯示了,但好像又有點怪怪的

    想請問
    1.該怎麼樣才能像您這個部落格一樣,將分類後面的數字(6)刪除呢?這需要更深的CSS語法嗎?
    2.滑鼠移過去後顯示的板塊要怎樣才能下面一點(現在有點貼得太近了)

    謝謝您的回覆哦!!!
  • 將文章分類的資料夾數字刪除,我是用nth-child去找到每個資料夾 .inner-box
    然後把標題的字體大小設成0,再用before{content:"...."; font-size: 10pt;}這個屬性強制加上一段文字
    有興趣的話可以查一下上面提到的一些關鍵字用法 :)

    Dribs & Drabs 於 2014/11/17 09:39 回覆

  • 酉癸
  • 不好意思,我再度摸索摸索一下後,第二個問題已經解決了
    但我該如何讓文字與方塊的間格寬一些呢?如滑鼠移到bar上 ➥ 這個符號前面想空一些
    另外,我不曉得調到什麼,只要點進內文,整個板塊都會往右移動,每個都微調過還是不曉得是哪裡出問題
    謝謝解答 Q_Q
  • 寬一點可以加入padding
    版面位移應該是你改到margin這個屬性,再檢查一下吧!

    Dribs & Drabs 於 2014/11/17 09:40 回覆

  • dontkjoanne
  • 你好,看了你CSS提供的教學,真的受益匪淺,也了解到很多簡單的應用,先說上一句感謝!
    想知道如果有「未分類文章」的話,要怎麼樣也讓這個分類也一並水平展開呢QQ?
    http://i.imgur.com/oo7830B.png
    還是說這個未分類文章,和文章先前提要所描述相同,是不被允許存在的呢?
  • 語法更新囉,重新套用應該就可了 :)

    Dribs & Drabs 於 2015/01/16 13:04 回覆

  • 悄悄話
  • 悄悄話
  • Rai
  • 我用了此文章所教學的下拉教學後,雖然大誌上成功,但有個問題
    就是「分類A, 分類B, 分類C」的資料夾都縮在一塊,請問該如何讓調整間句分開?
    還有該怎麼弄才能像您的網站,讓下拉式選單能一直保持在網頁最頂端上層呢?謝謝!
  • 請附上你的部落格網址,且保留有問題的地方,才能偵錯
    下拉式選單置頂可以參考position: fixed; 這個屬性

    Dribs & Drabs 於 2015/03/08 16:15 回覆

  • 悄悄話
  • 賽肥&amp;膩膩
  • 好讚的介面~!!
    這個網站真適合我這種亂改一通的哈哈~
    想請問一下~"文章分類"要怎麼樣才能移到部落格正上方呢@@?
  • 用 position: absolute; 搭配 top, left 等來設定它的位置
    但時候會受限於上層CSS的定義

    Dribs & Drabs 於 2015/04/16 19:00 回覆

  • 賽肥&amp;膩膩
  • 不好意思再問詳細一點,請問是加在#category .box {...} 這裡面嗎@@?
  • 下方回覆

    Dribs & Drabs 於 2015/04/16 21:39 回覆

  • 賽肥&amp;膩膩
  • 我剛剛嘗試了#category{position: absolute; top:0;} 這個寫法,結果跑到該側欄最上面了@@,
    可是我想要的效果是整個文章分類脫離出欄位,然後放在部落格最上方,好難用阿QQ"
  • 這就是我說的上層CSS會影響下層的語法
    表示你這個版面無法將文章分類移置部落格最上方,因為側欄定義的CSS影響了它

    Dribs & Drabs 於 2015/04/16 21:38 回覆

  • 悄悄話
  • 賽肥&amp;膩膩
  • 好的,太感謝你啦T_T,揪甘心!!
    等我網站文章數量更多的時候,一定要來請你幫我設計客製化的網頁,太感謝了!!
  • 不客氣喔 (*˘︶˘*)

    Dribs & Drabs 於 2015/04/17 18:32 回覆

  • fangyilee
  • 我想請問幾個問題,
    1) 為什麼上方的分類的字位置偏高,沒有和''繁中''這兩個字平行?
    2) 如果想要更改下拉選單字型的顏色是要在 /*(2) 前置設定*/ 下面改嗎?
    3) 下拉選單的色塊怎麼改成有一點圓角的矩形(類似你現在的版型)?
    謝謝你~~
  • (1) 請自行調整
    (2) 在第五步驟修改,要找到下拉選單的標籤再加入顏色的屬性
    (3) 圓角的語法是border-radius,可以自行查詢使用方法

    Dribs & Drabs 於 2015/05/15 23:06 回覆

  • Mei
  • 請問這些語法是要加在哪裡?? 是加在自訂樣式的CSS原始碼編輯嗎?
  • CSS原始碼編輯裡面

    Dribs & Drabs 於 2015/05/16 08:09 回覆

  • 口妮姬娃
  • 因為套用了其他樣式也嘗試修改後發現還是最喜歡這個版面
    有可能把現在文章分類的項目和痞客邦設定的部落格.相簿.留言板換位置嗎?

    謝謝 :D
  • 可以啊,自行修改每個標籤的位置
    文章分類的標籤 #links-row-2
    部落格連結的標籤 #navigation

    Dribs & Drabs 於 2015/05/21 20:43 回覆

  • 口妮姬娃
  • Q_Q 如果說要把links-row-2文章分類的資料夾間隔拉大以及位置往下
    請問要修改哪個部份呢?

    謝謝^_____^ 麻煩了
  • 間隔拉大可以加入padding,標籤的話可以參考這篇文章的圖片
    位置往下將#links-row-2的top數值加大即可

    Dribs & Drabs 於 2015/05/22 19:35 回覆

  • 悄悄話
  • yang
  • HIIIII不好意思打擾了
    我套用了這個方式 可以麻煩您幫我check我的側欄2嗎?
    文章分類的地方跟後面Message、Counter沒有辦法一樣
    (當滑鼠碰到時底色為藍色)
    已經盡力把他調到很接近了啊啊啊啊啊啊
    再麻煩您幫忙看一下,謝謝您!!!我會再加油的!!
  • 這就是在步驟五說到的 " 套用的CSS版面可能已經在先前定義過.box或是#category的樣式,這些可能會影響目前文章分類的長相 "
    你可以參考步驟一的架構圖,來定義你想要的東西

    Dribs & Drabs 於 2015/07/02 21:08 回覆

  • 悄悄話
  • 悄悄話
  • ZOU
  • 超愛簡約美!!!!!
    但是爬了你的很多文還是不知道怎麼把他放到部落格標題下面第二欄位上面
    不能把他放到像圖中那樣在上面中間耶 ?
  • :)

    Dribs & Drabs 於 2015/10/24 13:02 回覆

  • ZOU
  • 剛剛自己摸索成功放到上面了XD
    但是當滑鼠去觸碰到那塊的時候上面會有一個不完整個線框出現
    然後文章分類也會超出那個範圍
    請問該如何改掉呢 ?
  • 這就是內文提到的,上層的CSS語法會影像到下層,請檢查.box裡面的語法和.box-text:hover的語法

    Dribs & Drabs 於 2015/10/24 13:02 回覆

  • ZOU
  • 成功了!!# 還有個問題想請教一下
    選單那邊觸碰打開的時候裡面的分類會超出整個格線跑到下面的文章那邊去
    請問該怎麼改呢?
  • 你可以調整下拉選單的位置,讓它出現在格線下方,這樣就不會奇怪,可以利用padding這個屬性。

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

  • ZOU
  • 分類下面有條細細的灰色線條該怎麼弄掉呢 ?
    看了上面有人問同樣的問題但是我試過了還是無法去除..#
  • 可以檢查一下.box裡的屬性,線的屬性是border_bottom

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

  • 悄悄話
  • 悄悄話
  • *玲玲*
  • 如果用了拍立得樣式再用這樣分類法~也依樣會跑去最上面呢!!
    要怎麼改道相簿/部落格那欄下方呢??
  • 要用css語法 position: absolute 來定位,可以google一下教學

    Dribs & Drabs 於 2015/12/11 07:59 回覆

  • dodo80257
  • 你好 不好意思 因為我用的網站後台找不到原始碼的編輯 好像要付費才能編輯 或者是我太笨請問原始碼在哪編輯
    所以一般只能在側欄增加外掛 像下面我放的圖示 要怎麼用我原本的側欄樣式可以點下拉選單 有可以變最右邊這樣的語法嗎? 甚至因為我用的模板是套用網站提供的固定沒有下拉選單 那您教的部分還有辦法改嗎? <blockquote class="imgur-embed-pub" lang="en" data-id="Vv2bgAb"><a href="//imgur.com/Vv2bgAb">View post on imgur.com</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
    因為登入才能看看回復所以再傳一次:") 麻煩希望可以回復在這篇 謝謝~~
  • 我把悄悄話解開了,不然你會看不到 (只有痞客會員才看的到悄悄話)
    你是用痞客邦嗎?如果不是的話這個功能就不適用,痞客邦的原始碼編輯在後台的樣式編輯裡面,另外你貼的語法我看不太懂,這應該不是痞客邦的語法吧!?

    Dribs & Drabs 於 2015/12/18 20:29 回覆

  • 悄悄話
  • 悄悄話
  • 丸玩玩
  • 你好
    很喜歡這種簡單乾淨的版面,謝謝你無私的分享。

    請教我套用後,大致修改得差不多,但對於滑鼠滑過hover時
    整排分類文字和最底部的黑線就會往下約2px,請問該如何下手才好呢?
    謝謝您的指教!
  • 我猜應該是這個東西影響的
    #links-row-2 .box:hover .box-text{line-height: 200%;}
    你可以先移除這個屬性看看

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

  • 丸玩玩
  • 解決了,拜謝大師!
  • 恭喜 :D

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

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Sandy Lu
  • Hello,

    首先,謝謝你的分享,真的很實用吶!

    在問題中,你有提到如何將文章分類的資料夾數字刪除,你是用nth-child去找到每個資料夾 .inner-box…
    我用nth-child去找,可是都沒有找到後面有接 inner-box的耶
    請問我該怎麼樣才能將資料夾後面的數字刪除呢?

    謝謝你~
  • 嗨Sandy,謝謝你的稱讚 >////<
    nth-child是指第幾個元件,後面通常會接(數字),可以指定第幾個元件的屬性。
    要刪除資料夾的數字,我之前的方法都是把資料夾文字大小設定0,也就是不顯示,再用nth-child和before搭配,指定before的content,用偽元素來代替原本的資料夾名稱,設定上較為複雜,若有不懂得可以google查詢一下上面提到的屬性用法。
    另外一種方法則是撰寫JavaScript來達到,但需要有相關的程式基礎喔。

    Dribs & Drabs 於 2016/03/30 20:36 回覆

  • 悄悄話
1 2