雖然原本的模板稍嫌陽春，但也算的上乾乾淨淨、家世清白，只是，在這個擠奶露臀講求花俏版面來吸引流量的年代，還是來改一下版型好了。
之前對CSS的了解不多，只知其用途但不知如何使用，找出塵封已久的CSS大全一書(Cascading Style Sheets, Eric A. Meyer著, 莊友欣譯，我的是二版，購於二手書攤
)
K了頭兩章後便動手修改。
了解CSS的想法不難，CSS的目的和語法規則也淺顯易懂，了解基本的概念以後，剩下的就是對屬性的運用和排版的創意了。
目前這個就是我改完的成果，我想大家可以很清楚的了解一件事，那就是....
幹，我沒什麼美術天份
不過這不是本文的重點....
接下來是對Pixnet grey2模板的研究。找了一些對Pixnet模板修改的資料，發現repeat網友做了一個很詳細的圖表，看完這篇應該可以對grey2的模板有了清楚的了解。
pixnet blog css 解析 (grey2)
再來是工具的準備，首先是CSS編輯器。人家說殺雞焉用牛刀，可是我還是用了牛刀 囧>。我用Eclipse 3.3.1.1 + Aptana Plugins來編輯CSS。這個牛刀的好處是，它有CSS Code Complete的功能
，當然其他優點就不用說了，統一的IDE介面總是讓人用起來得心應手。
另外輔助的工具是Firefox的CSSViewer和Firebug兩個套件，前者可以觀看目前所使用的CSS tag，後者則有強大的debug功能。
上工前先整理一下grey2所能使用的CSS class和ID，CSS有支援階層的效果，為了怕亂掉，我把每個Class&ID的parent element都詳細列出：
* #Container {}
*
* #Container #Top {}
* #Container #Top #BlogHeader {}
* #Container #Top #BlogDescr {}
*
* #Container #Main {}
* #Container #Main #Sidebar {}
* #Container #Main #Sidebar .SidebarHeader {}
* #Container #Main #Sidebar .Sideblock {}
* #Container #Main #Sidebar .Sideblock .Sidetitle {}
* #Container #Main #Sidebar .Sideblock .Sidetitle h4 {}
* #Container #Main #Sidebar .Sideblock .Sidebody {}
* #Container #Main #Sidebar .Sideblock .Sidebody .isLock {}
* #Container #Main #Sidebar .Sideblock .Sidebody .isLock img {}
* #Container #Main #Sidebar .Sideblock .Sidebody .userImg {}
* #Container #Main #Sidebar .Sideblock .Sidebody .userLink {}
* #Container #Main #Sidebar .Sideblock .Sidebody #userBlog {}
* #Container #Main #Sidebar .Sideblock .Sidebody #userAlbum {}
* #Container #Main #Sidebar .Sideblock .Sidebody #userGuestBook {}
* #Container #Main #Sidebar .Sideblock .Sidebody #userProfile {}
* #Container #Main #Sidebar .Sideblock .Sidebody #adminConsole {}
* #Container #Main #Sidebar .Sideblock .Sidebody #CategoryPlugin a {}
* #Container #Main #Sidebar .Sideblock .Sidebody .nodecoration {}
* #Container #Main #Sidebar .Sideblock .SideBottom {}
* #Container #Main #Sidebar #CalendarPlugin {}
* #Container #Main #Sidebar #LatestArt {}
* #Container #Main #Sidebar #LatestComments {}
* #Container #Main #Sidebar #LatestTrackbacks {}
* #Container #Main #Sidebar #userBlock {}
* #Container #Main #Sidebar #ArchivePlugin {}
* #Container #Main #Sidebar #CategoryPlugin {}
* #Container #Main #Sidebar #LinksPlugin {}
* #Container #Main #Sidebar #FavoritePlugin {}
* #Container #Main #Sidebar #PageviewPlugin {}
* #Container #Main #Sidebar #RSSPlugin {}
* #Container #Main #Sidebar .SidebarFooter {}
*
* #Container #Main #Content {}
* #Container #Main #Content .mainEntry {}
* #Container #Main #Content .mainEntry .mainEntryTitle {}
* #Container #Main #Content .mainEntry .mainEntryTitle h3 {}
* #Container #Main #Content .mainEntry .mainEntryTitle h3 a {}
* #Container #Main #Content .mainEntry .mainEntryBody {}
* #Container #Main #Content .mainEntry .mainEntryBody a {}
* #Container #Main #Content .mainEntry .mainEntryBody .date {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryBase {}
* #Container #Main #Content .mainEntry .mainEntryBody .extended {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot a {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot a:hover {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot p {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot .trackback_url {}
* #Container #Main #Content .mainEntry .mainEntryBottom {}
* #Container #Main #Content .mainEntry .mainEntryBottom .ptop {
* #Container #Main #Content #Comments {}
* #Container #Main #Content #Comments .commentTitle {}
* #Container #Main #Content #Comments .commentTitle a {}
* #Container #Main #Content #Comments .commentBody {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentheader {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentcontent {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentcontent replyBox {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentcontent replyBox replyContent {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentcontent replyBox replyInfo {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentposterinfo {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentposterinfo br {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentposterinfo img {}
* #Container #Main #Content .listall_msg {}
* #Container #Main #Content .listall_pagelist {}
* #Container #Main #Content .listall_date {}
* #Container #Main #Content .listall_title {}
*
* #Container #pagefooter {}
* #Container #pagefooter #Bottom {}
* #Container #pagefooter #Bottom .style1 {}
* #Container #pagefooter #Bottommenu {}
上表可以對照repeat板友辛苦整理的圖示說明。
大概幻想一下自己要的成果和了解等等要動手的部位後就開工了，整個動刀的過程大概花了我4個小時左右。扣掉美工編排的部份來說，一開始對CSS的selector與declaration的組合搭配的不是那麼熟練。例如，我一開始是針對每個Class去做修改，包括加上他們特定的字型、顏色、邊界....等，不過後來發現這樣的修改方式並不恰當，因為改出來如果很醜就很難調整，就算Eclipse的取代功能很強大，但是這也不是一個良好且適當的修改方式。
後來改變了語法的排列，將某些常用的設定單獨抽出來，例如字型有字型單獨的設定，對每個Class和ID則採用累加的效果，這樣改起來方便多了。
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
/* 使用字型10px的Class&ID */
#Container #Main #Sidebar #LatestComments .SideBody {
font-size: 10px;
}
/* 使用字型12px的Class&ID */
input, select,
#Container #Main #Sidebar .Sideblock .Sidebody,
#Container #Main #Sidebar .Sideblock .Sidetitle h4,
#Container #Main #Content .listall_date,
#Container #pagefooter #Bottom,
#Container #pagefooter #Bottommenu,
#Container #Main #Content #Comments .commentBody .CommentInnerBox .commentposterinfo,
#Container #Main #Content .mainEntry .mainEntryBody .date {
font-size: 12px;
}
/* 使用字型16px的Class&ID */
body {
font-size: 16px;
}
/* 使用字型18px的Class&ID */
#Container #Top #BlogDescr,
#Container #Main #Content .mainEntry .mainEntryTitle h3 {
font-size: 18px;
}
/* 使用字型24px的Class&ID */
#Container #Top #BlogHeader {
font-size: 24px;
}
/* 要套用粗體的Class&ID */
#Container #Top #BlogHeader,
#Container #Main #Sidebar .Sideblock .Sidetitle h4,
#Container #Main #Content #Comments .commentTitle,
#Container #Main #Content .mainEntry .mainEntryTitle h3,
#Container #Main #Content #Comments .commentBody .commentInnerBox .commentheader {
font-weight: bold;
}
body, #Container #Top #BlogHeader {
text-align: left;
}
總結來說，這次的修改還算順利(因為CSS真的很簡單)，不過對於屬性的用法只能算是粗淺的階段(書都還沒看完1/10呢
)。有些想法可以搭配JavaScript來實現，到時候可以用的東西就更多啦。
謎之聲：阿？配色？配色很奇怪你知不知道!?我....我知道
之前對CSS的了解不多，只知其用途但不知如何使用，找出塵封已久的CSS大全一書(Cascading Style Sheets, Eric A. Meyer著, 莊友欣譯，我的是二版，購於二手書攤
)K了頭兩章後便動手修改。
了解CSS的想法不難，CSS的目的和語法規則也淺顯易懂，了解基本的概念以後，剩下的就是對屬性的運用和排版的創意了。
目前這個就是我改完的成果，我想大家可以很清楚的了解一件事，那就是....
不過這不是本文的重點....
接下來是對Pixnet grey2模板的研究。找了一些對Pixnet模板修改的資料，發現repeat網友做了一個很詳細的圖表，看完這篇應該可以對grey2的模板有了清楚的了解。
pixnet blog css 解析 (grey2)
再來是工具的準備，首先是CSS編輯器。人家說殺雞焉用牛刀，可是我還是用了牛刀 囧>。我用Eclipse 3.3.1.1 + Aptana Plugins來編輯CSS。這個牛刀的好處是，它有CSS Code Complete的功能
，當然其他優點就不用說了，統一的IDE介面總是讓人用起來得心應手。另外輔助的工具是Firefox的CSSViewer和Firebug兩個套件，前者可以觀看目前所使用的CSS tag，後者則有強大的debug功能。
上工前先整理一下grey2所能使用的CSS class和ID，CSS有支援階層的效果，為了怕亂掉，我把每個Class&ID的parent element都詳細列出：
* #Container {}
*
* #Container #Top {}
* #Container #Top #BlogHeader {}
* #Container #Top #BlogDescr {}
*
* #Container #Main {}
* #Container #Main #Sidebar {}
* #Container #Main #Sidebar .SidebarHeader {}
* #Container #Main #Sidebar .Sideblock {}
* #Container #Main #Sidebar .Sideblock .Sidetitle {}
* #Container #Main #Sidebar .Sideblock .Sidetitle h4 {}
* #Container #Main #Sidebar .Sideblock .Sidebody {}
* #Container #Main #Sidebar .Sideblock .Sidebody .isLock {}
* #Container #Main #Sidebar .Sideblock .Sidebody .isLock img {}
* #Container #Main #Sidebar .Sideblock .Sidebody .userImg {}
* #Container #Main #Sidebar .Sideblock .Sidebody .userLink {}
* #Container #Main #Sidebar .Sideblock .Sidebody #userBlog {}
* #Container #Main #Sidebar .Sideblock .Sidebody #userAlbum {}
* #Container #Main #Sidebar .Sideblock .Sidebody #userGuestBook {}
* #Container #Main #Sidebar .Sideblock .Sidebody #userProfile {}
* #Container #Main #Sidebar .Sideblock .Sidebody #adminConsole {}
* #Container #Main #Sidebar .Sideblock .Sidebody #CategoryPlugin a {}
* #Container #Main #Sidebar .Sideblock .Sidebody .nodecoration {}
* #Container #Main #Sidebar .Sideblock .SideBottom {}
* #Container #Main #Sidebar #CalendarPlugin {}
* #Container #Main #Sidebar #LatestArt {}
* #Container #Main #Sidebar #LatestComments {}
* #Container #Main #Sidebar #LatestTrackbacks {}
* #Container #Main #Sidebar #userBlock {}
* #Container #Main #Sidebar #ArchivePlugin {}
* #Container #Main #Sidebar #CategoryPlugin {}
* #Container #Main #Sidebar #LinksPlugin {}
* #Container #Main #Sidebar #FavoritePlugin {}
* #Container #Main #Sidebar #PageviewPlugin {}
* #Container #Main #Sidebar #RSSPlugin {}
* #Container #Main #Sidebar .SidebarFooter {}
*
* #Container #Main #Content {}
* #Container #Main #Content .mainEntry {}
* #Container #Main #Content .mainEntry .mainEntryTitle {}
* #Container #Main #Content .mainEntry .mainEntryTitle h3 {}
* #Container #Main #Content .mainEntry .mainEntryTitle h3 a {}
* #Container #Main #Content .mainEntry .mainEntryBody {}
* #Container #Main #Content .mainEntry .mainEntryBody a {}
* #Container #Main #Content .mainEntry .mainEntryBody .date {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryBase {}
* #Container #Main #Content .mainEntry .mainEntryBody .extended {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot a {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot a:hover {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot p {}
* #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot .trackback_url {}
* #Container #Main #Content .mainEntry .mainEntryBottom {}
* #Container #Main #Content .mainEntry .mainEntryBottom .ptop {
* #Container #Main #Content #Comments {}
* #Container #Main #Content #Comments .commentTitle {}
* #Container #Main #Content #Comments .commentTitle a {}
* #Container #Main #Content #Comments .commentBody {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentheader {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentcontent {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentcontent replyBox {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentcontent replyBox replyContent {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentcontent replyBox replyInfo {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentposterinfo {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentposterinfo br {}
* #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentposterinfo img {}
* #Container #Main #Content .listall_msg {}
* #Container #Main #Content .listall_pagelist {}
* #Container #Main #Content .listall_date {}
* #Container #Main #Content .listall_title {}
*
* #Container #pagefooter {}
* #Container #pagefooter #Bottom {}
* #Container #pagefooter #Bottom .style1 {}
* #Container #pagefooter #Bottommenu {}
上表可以對照repeat板友辛苦整理的圖示說明。
大概幻想一下自己要的成果和了解等等要動手的部位後就開工了，整個動刀的過程大概花了我4個小時左右。扣掉美工編排的部份來說，一開始對CSS的selector與declaration的組合搭配的不是那麼熟練。例如，我一開始是針對每個Class去做修改，包括加上他們特定的字型、顏色、邊界....等，不過後來發現這樣的修改方式並不恰當，因為改出來如果很醜就很難調整，就算Eclipse的取代功能很強大，但是這也不是一個良好且適當的修改方式。
後來改變了語法的排列，將某些常用的設定單獨抽出來，例如字型有字型單獨的設定，對每個Class和ID則採用累加的效果，這樣改起來方便多了。
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
/* 使用字型10px的Class&ID */
#Container #Main #Sidebar #LatestComments .SideBody {
font-size: 10px;
}
/* 使用字型12px的Class&ID */
input, select,
#Container #Main #Sidebar .Sideblock .Sidebody,
#Container #Main #Sidebar .Sideblock .Sidetitle h4,
#Container #Main #Content .listall_date,
#Container #pagefooter #Bottom,
#Container #pagefooter #Bottommenu,
#Container #Main #Content #Comments .commentBody .CommentInnerBox .commentposterinfo,
#Container #Main #Content .mainEntry .mainEntryBody .date {
font-size: 12px;
}
/* 使用字型16px的Class&ID */
body {
font-size: 16px;
}
/* 使用字型18px的Class&ID */
#Container #Top #BlogDescr,
#Container #Main #Content .mainEntry .mainEntryTitle h3 {
font-size: 18px;
}
/* 使用字型24px的Class&ID */
#Container #Top #BlogHeader {
font-size: 24px;
}
/* 要套用粗體的Class&ID */
#Container #Top #BlogHeader,
#Container #Main #Sidebar .Sideblock .Sidetitle h4,
#Container #Main #Content #Comments .commentTitle,
#Container #Main #Content .mainEntry .mainEntryTitle h3,
#Container #Main #Content #Comments .commentBody .commentInnerBox .commentheader {
font-weight: bold;
}
body, #Container #Top #BlogHeader {
text-align: left;
}
總結來說，這次的修改還算順利(因為CSS真的很簡單)，不過對於屬性的用法只能算是粗淺的階段(書都還沒看完1/10呢
)。有些想法可以搭配JavaScript來實現，到時候可以用的東西就更多啦。謎之聲：阿？配色？配色很奇怪你知不知道!?我....我知道
全站熱搜
留言列表
