自己的習慣是,在瀏覽他人部落格時,最常使用 "文章分類" 來搜尋想要的文章 (不知道大家的習慣是否都一樣?)
在看一些知名部落格時也有發現他們會設定一些較常被使用的文章連結(類似文章分類)放在網誌的最上方
因此在設計部落格版面時,會特別將文章分類這區塊放在較醒目的地方,以助於大家搜尋
廢話不多說,這篇教學文是要教大家怎麼將文章分類的各個資料夾拆解然後釘選到想要的區域
另外一項重點是,隱藏資料夾內的各分類達到節省空間的效果,當滑鼠移至資料夾時分類才會出現
目前是覺得這樣的設計還不賴,讀者可以很清楚地找到想要的分類,且版面仍保持的很乾淨
效果如下圖動畫,想學的再繼續往下看吧!
(0) 先前提要
這篇文章的教學主要是在教"概念",套用在每個樣式都難免會有一些問題產生
建議有一些CSS基礎的再來學習比較適合,因為還有後續的CSS問題須自行解決
(1) 了解 "文章分類" 的標籤架構
改CSS前需要將標籤架構調查一番,才知道該怎麼寫CSS
下面的CSS語法如果看不太懂,請記得回過頭來看這張圖
(2) 前置設定
原本的文章分類有一堆有的沒的,需要將其刪除
例如"文章分類"這四個字就需要刪除,還有控制所有資料夾開闔的按鈕與各資料夾前方的圖示
另外還需要將文章分類的各資料夾設定打開,這些動作的CSS如下
把上述CSS語法加入後,文章分類的區塊會變成下圖這樣,純屬正常現象
(3) 水平展開
接下來利用inline-block屬性將各資料夾分類水平展開,這步驟的結果也呈現在下圖中
(4) 設定下拉觸發事件
最重要的是當滑鼠移至分類資料夾標題時,分類子項目才會出現,利用hover屬性來達到,套用後應該就很接近成果了
(5) CSS清空設定
各位套用的CSS版面可能已經在先前定義過.box或是#category的樣式,這些可能會影響目前文章分類的長相
例如上面的示意圖出現了一些箭頭和虛線,都是之前定義的
最後這一步驟提供的CSS語法是清空所有的樣式設定,至於接下來的美化動作就要靠各位囉!
如果有些清空設定無效,請在屬性後面加個 !important ,強制加入屬性
美化的部分要參考文章分類的元件放在哪一個側欄,如果放在側欄2建議參考側欄2的CSS設定
(6) 複製以上所有語法
♥ 部落格樣式 - 實用教學: http://www.dribs-drabs.com/blog/category/1358731
可分享CSS嗎?
推一下(’・ω・`)
我不管加在哪一層,側欄列都是在左側垂直向下排列,
且滑鼠移動至上方後,會全部的相簿都一起打開~
再麻煩您跟我講解一下摟!
剛剛先去建立了資料夾,但是套用本篇的語法後,還是不會把資料夾直接顯示出來~
我不得不說,你的網誌風格棒級了!
那質感~
讓人一眼就被“洗鍊且純淨”的畫面吸引住,《唯美》。
小弟不才,CSS一竅不通。
只好厚顏的全盤套用基本篇的語法。
只是有點小問題想尋求解決方式,
否則套用之後資料夾的排版不如預期。
我的“分類導覽”多達14~15大項,
不過都希望能全部加入(上下兩排各7)
麻煩您了!!
當我將下段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)
於是跟教學的範本完全不同了。
不知問題出在何處,
麻煩你了!謝謝
但!只怪自己腦殘還是維持現況囉
謝謝你 :)
我發現是我連結FB的語法怪怪的
會讓整個版面都不對勁
耶!解決囉 ^_^
Thanks
我想問說 就是資料夾的水平距離
你的190px 310 px 695px 840px是怎麼算出來的阿?
因為我想多增幾個資料夾~~~~可是我不知道該怎麼算距離
謝謝你 :) 真的非常熱心 謝謝
但上方的「文章分類」想修改成上面教學的樣式,但不知道要從哪裡下手??
另外,我有些文章標題較長,不知道是否於首頁可以完整呈現,謝謝~
但是下拉式選單我已經遢過很多次,放在不同的位置,
也沒有效果。也找不出問題所在。
也看見你說每個套用都可能會有問題,但不知怎樣處理。
可以幫我看看嗎?感謝!
感覺就是簡約又漂亮!
我套用了你設計的樣式,也想試試能把文章分類放到上面那一排去,
可是,我只要貼上,下面這一列的語法,整個文章分類就會消失,但是裡面的分類排版,不會顯示
#category .box-title{display: none;} /*刪除文章分類的標題*/
請問,我要怎麼改呢?
後來還一條一條程式碼對照了解~用超久…還是不行
超喜歡能夠直接把文章分類項目顯示在上面啊!這樣看真的好清楚!
果然是殘念嗎~
感恩~鞠躬。
我想說...我也很不好意思的說...我很仔細的看完上面的步驟
但!我用出來的結果還是依然不行,不知道是不是我理解能力太差:(
希望可以請您幫我點出我錯誤的地方。非常感謝!
真的很不好意思耽誤到你的時間^^
我一段文字很努力的重複重複重複的回頭看一次
我要一個一個字的看,一個一個步驟的慢慢走終於摸出來了
然後加入#category .inner-box:nth-child(2){position: absolute; top: 10px; left: 10px;}
可是我只移動了一個資料夾,要移動第三個資料夾,是同樣的語法然後nth-child(2)內的數字換成3嗎?
但是資料夾並沒有在上方顯示出來
怎麼辦:(
為什麼變成紅紅一大塊
好漂釀
用了美麗的樣式後,設定了好一陣子
有幾個問題,我一直無法解決
想請您幫忙
1) 上面下拉式選單
滑鼠經過時,希望下拉式還單有底色,不要透明的,請看該如何設定?
2) 首頁想將每篇文章的標題放在照片下面
3) 接續 問題2) 在照片下面放上FB的讚圖示
非常謝謝^^
也看了相關的 Q & A 等教學文章,
不過一直沒辦法成功。
能否煩請您幫忙看一下問題出在哪裡呢?
1. 下拉式選單沒辦法跑到上排 banner 的位置,而是卡在文章上方
2. 選單不像您提供的這樣透明的,而是有粉紅色 (應該是因為套用到文章框內的樣式?)
原本您漂亮的風格被我改得好失敗嗚嗚~
另外想冒昧請問,目前您網誌的樣式之後會分享嗎 >////<
現在這個真的超漂亮的~~~
謝謝您大方的分享、用心及花了很多時間設計 :)
目前資料夾部分已經成功變成透明,
但是底下的分類也是透明,會重疊到文章,因此不太清楚。
請問有建議的方式可以讓分類的地方有底色嗎 (這樣不知道會不會怪怪的就是了)
另外,每個分類之間 & 資料夾和分類中間的間隔好窄,
我找了 css 中各個有關 height 的設定,但是都沒有成功 (不好意思,我是第一次使用 css > <)
想再請問您,這個有辦法解嗎?是不是我找錯方向了 QQ
我喜歡雜誌封面的樣式,但是下拉式選單則喜歡簡約相簿的,
雜誌封面的因為少了分隔線,我比較喜歡後者,可惜我還沒找到方式讓兩者合併 QQ
謝謝您熱心的分享及回覆 :DDD
不過每個分類之間分隔的虛線消失了(我猜應該是虛線的顏色跟背景粉色相同,所以看不到)
我找了 css 中有用到薔薇色碼的地方,去改顏色,但是還是無法出現,不知道有沒有辦法讓他回來?
另外資料夾跟分類中間離接近,我調了 padding,但是只找到調每個分類之間間隔的(現在呈現的樣子是調好的),不知道能不能調分類的粉紅框框跟上面資料夾名稱的間隔,讓他們稍微有點空間呢?
最後一個問題(對不起QQ),分類和資料夾中間沒有區隔線這點,有什麼簡單的方法可以做出來嗎?
無論是簡約相簿那種黑條狀(我有爬文,知道那款是照片做出來的,可能比較難)
如果想要有分隔線,還有什麼建議的方式呢(因為目前我調整不好,滑鼠移過去資料夾出現粉紅色分類框時,框的大小和各個資料夾間的比例不太好看,想說若有分隔線可能比較好)
不好意思一連問了這麼多問題,真的超級感激你!!
我目前已經將版面改成現在的樣子,
可是每個分類的四周都沒辦法像您的範例這樣,保留空間
(我現在每個分類下也有設虛線,但是虛線底下無法像您這樣有空白,而是直接就是框框的底了)
感覺起來是每個 li 外沒有一個更大的 ul 包住,或是要調整 margin 或將 li 縮短、縮排進去下拉選單中間。
我有嘗試調整各個設定,但是可能方向不對,都沒有成功。
能否請教您這方面應該怎麼調整,才能像範例這樣呢?
不好意思,不太會描述問題,真不好意思~~~
另外也想問,您每篇文章中間都會有分隔線 (例如京阪行程記錄 Day 1 下面那條虛線),
我在寫文章時找不到類似的選項,請問是跟 css 有關、不是透過編輯文章的小工具產生的嗎?
謝謝您,不好意思再煩請您解答,非常謝謝!
真不好意思擅自亂修改您分享的 css,我會繼續美化,努力讓我的版面越來越漂亮!
btw 我知道目前您版面的樣式不會分享,
但這留言板真的漂亮的,清晰簡單!希望以後您有機會可以分享目前留言板的樣式:D
謝謝您不厭其煩的回覆!!!
順便把上面有人提出的問題看過一次,搞到現在看貌似能夠成功顯示了,但好像又有點怪怪的
想請問
1.該怎麼樣才能像您這個部落格一樣,將分類後面的數字(6)刪除呢?這需要更深的CSS語法嗎?
2.滑鼠移過去後顯示的板塊要怎樣才能下面一點(現在有點貼得太近了)
謝謝您的回覆哦!!!
但我該如何讓文字與方塊的間格寬一些呢?如滑鼠移到bar上 ➥ 這個符號前面想空一些
另外,我不曉得調到什麼,只要點進內文,整個板塊都會往右移動,每個都微調過還是不曉得是哪裡出問題
謝謝解答 Q_Q
想知道如果有「未分類文章」的話,要怎麼樣也讓這個分類也一並水平展開呢QQ?
http://i.imgur.com/oo7830B.png
還是說這個未分類文章,和文章先前提要所描述相同,是不被允許存在的呢?
終於成功了OAO,這程式語法也太好用了:D
就是「分類A, 分類B, 分類C」的資料夾都縮在一塊,請問該如何讓調整間句分開?
還有該怎麼弄才能像您的網站,讓下拉式選單能一直保持在網頁最頂端上層呢?謝謝!
這個網站真適合我這種亂改一通的哈哈~
想請問一下~"文章分類"要怎麼樣才能移到部落格正上方呢@@?
可是我想要的效果是整個文章分類脫離出欄位,然後放在部落格最上方,好難用阿QQ"
等我網站文章數量更多的時候,一定要來請你幫我設計客製化的網頁,太感謝了!!
1) 為什麼上方的分類的字位置偏高,沒有和''繁中''這兩個字平行?
2) 如果想要更改下拉選單字型的顏色是要在 /*(2) 前置設定*/ 下面改嗎?
3) 下拉選單的色塊怎麼改成有一點圓角的矩形(類似你現在的版型)?
謝謝你~~
有可能把現在文章分類的項目和痞客邦設定的部落格.相簿.留言板換位置嗎?
謝謝 :D
請問要修改哪個部份呢?
謝謝^_____^ 麻煩了
我套用了這個方式 可以麻煩您幫我check我的側欄2嗎?
文章分類的地方跟後面Message、Counter沒有辦法一樣
(當滑鼠碰到時底色為藍色)
已經盡力把他調到很接近了啊啊啊啊啊啊
再麻煩您幫忙看一下,謝謝您!!!我會再加油的!!
但是爬了你的很多文還是不知道怎麼把他放到部落格標題下面第二欄位上面
不能把他放到像圖中那樣在上面中間耶 ?
但是當滑鼠去觸碰到那塊的時候上面會有一個不完整個線框出現
然後文章分類也會超出那個範圍
請問該如何改掉呢 ?
選單那邊觸碰打開的時候裡面的分類會超出整個格線跑到下面的文章那邊去
請問該怎麼改呢?
看了上面有人問同樣的問題但是我試過了還是無法去除..#
要怎麼改道相簿/部落格那欄下方呢??
所以一般只能在側欄增加外掛 像下面我放的圖示 要怎麼用我原本的側欄樣式可以點下拉選單 有可以變最右邊這樣的語法嗎? 甚至因為我用的模板是套用網站提供的固定沒有下拉選單 那您教的部分還有辦法改嗎? <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>
因為登入才能看看回復所以再傳一次:") 麻煩希望可以回復在這篇 謝謝~~
很喜歡這種簡單乾淨的版面,謝謝你無私的分享。
請教我套用後,大致修改得差不多,但對於滑鼠滑過hover時
整排分類文字和最底部的黑線就會往下約2px,請問該如何下手才好呢?
謝謝您的指教!
首先,謝謝你的分享,真的很實用吶!
在問題中,你有提到如何將文章分類的資料夾數字刪除,你是用nth-child去找到每個資料夾 .inner-box…
我用nth-child去找,可是都沒有找到後面有接 inner-box的耶
請問我該怎麼樣才能將資料夾後面的數字刪除呢?
謝謝你~