akatuki

昨天晚上（正確說來是今天凌晨）做了件挺有趣的事。
現在來講解一下：

阿瓜希望文章部分寬一點，所以設定由原本的440→500px，旁側欄位也跟著改200→180px，應該足夠。
文章黑框以及標題下方的虛線框比較沒有問題，只是因為樂多跟fc2的寫法不同而需要找一下位置。
舉例：樂多[Banner]=FC2[Header]
　　　樂多[blogbody]=FC2[Primary]
　　　樂多[Link]=FC2[Secondary]
　　　…之類，大致上相同，但細節不太一樣，因為FC2可以再拆成很多部分。

文框跟邊線的距離原本是15px，阿瓜先前版面也是同樣距離，
不過後來修改成20px是因為，雖然小一點距離會更有FC2版型既有的精緻感，
可既然文章寬度增加，邊距還維持原狀在畫面上有點不太平衡，所以再三考慮後還是採用20px。

主框線也可以用CSS寫出來，但礙於還放了top圖所以當初製作sky版型的人是用一張線圖去做repeat，
另外就是將原先#828的框線統一改成#000，因為是圖片所以必須重新改圖之後上傳，
這部分弄完之後注意到：top圖周圍的線還是#828，可是css上怎麼都沒看到其他#828色碼了，
後來才發現，圖片下左右的框線也是用畫的…同樣改完重新上傳。

再來是標題前方的icon，sky版型的icon因為不好看所以阿瓜也決定用跟原先相同，
不過原本的就只是文字的*，我不知道要怎麼插入所以用圖片代替來變通一下。（喂）
放圖片簡單多了…不過可能是圖片過多，現在我開阿瓜的blog時圖片會顯示的有點慢。囧rz

至於粗體標題，只保留了blog標題以及comment標題不變，其他看到bold一律改成normal，
這項倒是改的很快，改到後來就比較抓的清楚位置了。

最美中不足的是，日期不知道要怎麼移動位置放到文章標題前面？
在樂多的日期這部分是固定在文章上方的，到了FC2我就不會改了…orz
像樂多在posted一行也是固定的，無法像FC2修改自由度這麼高，導致跳過來做就變的不會了。
所以…在文章內容下面那一行分類及comment之類的就完全沒有修改。

大致上就是這樣…雖然寫的很多但其實我做的修改只有一些，以第一次摸FC2的CSS來說，
雖然完成了很有成就感，但只給自己勉強及格的分數吧。

指定：
1.sky的框架與top圖
2.honey_as_bee的文章格式
3.全黑框線
4.全部icon更換
5.正常字體份量

大致上就是這樣。
一開始看完全搞不清楚哪裡是哪裡，FC2共用框架是由太多不同的人編寫，每一個版型寫法都不相同，
這就麻煩了點，需要花時間去稍微研究一下。

至於comment格式也沒有做修改，如果阿瓜還有哪邊想改可以再敲我，這樣還蠻好玩的XD

最後還有個疑問是，像是px(像素)、pt(點)、cm(公分)、in(英吋)、%(百分比)，這些我都知道，
個人最常用的是px，不過FC2裡頭用的em是什麼單位？如果有人知道請賜教囧/

TO跟阿瓜同時敲我的阿幽：

不能同時聊天不是改寫CSS有那麼忙，而是我昨晚視窗已經多到快爆，如果沒急事就…歹勢orz
既然阿幽對CSS也很有興趣，找時間我會整理一些資料來幫你入門，能夠同時上MSN的話再來"上課"吧。XD

●樣式結構表：轉自colaccl.com

html ｜整個網誌頁面
　
　　body｜整個網誌頁面的身體
　
　　　　a｜超連結
　
　　　　　A:link｜尚未連結過的超連結
　　　　　A:visited｜拜訪過的連結
　　　　　A:active｜正按下的連結
　　　　　A:hover｜游標在連結上方
　
　　　　img｜所有的圖片
　
　　　　label｜表單欄位的字型(『姓名:』『email:』『URL:』『回應:』)
　
　　　　input｜按鈕和單行文字方塊(按鈕『預覽』『送出』，也包含填寫姓名、email、URL的欄位)
　
　　　　textarea｜多行文字方塊(包含回應文章時填寫回應的欄位)
　
　　　　#container｜整個網誌最外圍的區塊(網誌置中的方法：#container {MARGIN: 0px auto 0px;})
　
　　　　 　　　　#banner｜最上面那塊包含部落格標題和敘述的部份
　
　　　　 　　　　　#banner A｜超連結
　　　　 　　　　　#banner A:link ｜尚未連結過的超連結
　　　　 　　　　　#banner A:visited ｜拜訪過的連結
　　　　 　　　　　#banner A:active ｜正按下的連結
　　　　 　　　　　#banner A:hover ｜游標在連結上方
　
　　　　 　　　　 　　　　.blogtitle｜部落格標題、『引用URL』
　
　　　　 　　　　 　　　　.description｜網誌敘述
　
　　　　 　　　　#content｜網誌文章那一大塊
　
　　　　 　　　　 　　　　.blog｜包住所有文章的東西
　
　　　　 　　　　 　　　　 　　　　.date｜文章日期
　
　　　　 　　　　 　　　　 　　　　.blogbody｜單篇文章標題和文章內容，包括回應、引用
　
　　　　 　　　　 　　　　 　　　　 　　　　.title｜文章標題
　
　　　　 　　　　 　　　　 　　　　 　　　　.main｜文章內容
　
　　　　 　　　　 　　　　 　　　　 　　　　 　　　　.pict｜文章內容貼的圖
　
　　　　 　　　　 　　　　 　　　　 　　　　 　　　　.main-continues｜整個『...繼續閱讀』區塊
　
　　　　 　　　　 　　　　 　　　　 　　　　 　　　　　A.acontinues｜尚未連結過的超連結
　　　　 　　　　 　　　　 　　　　 　　　　 　　　　　A.acontinues:link｜尚未連結過的超連結
　　　　 　　　　 　　　　 　　　　 　　　　 　　　　　A.acontinues:visited｜拜訪過的連結
　　　　 　　　　 　　　　 　　　　 　　　　 　　　　　A.acontinues:active｜正按下的連結
　　　　 　　　　 　　　　 　　　　 　　　　 　　　　　A.acontinues:hover ｜游標在連結上方
　
　　　　 　　　　 　　　　 　　　　 　　　　.posted｜文章和回應後的『Posted by...』
　
　　　　 　　　　 　　　　 　　　　 　　　　　A.aposted｜超連結
　　　　 　　　　 　　　　 　　　　 　　　　　A.aposted:link｜尚未連結過的超連結
　　　　 　　　　 　　　　 　　　　 　　　　　A.aposted:visited｜拜訪過的連結
　　　　 　　　　 　　　　 　　　　 　　　　　A.aposted:active｜正按下的連結
　　　　 　　　　 　　　　 　　　　 　　　　　A.aposted:hover｜游標在連結上方
　
　　　　 　　　　 　　　　 　　　　 　　　　.trackback-url｜引用的網址
　
　　　　 　　　　 　　　　 　　　　 　　　　.comments-head｜『引用列表：』和『回應文章』區塊
　
　　　　 　　　　 　　　　 　　　　 　　　　.trackback-body｜引用內容
　
　　　　 　　　　 　　　　 　　　　 　　　　.trackback-post｜引用後的『文章標題【網誌名稱】...』
　
　　　　 　　　　 　　　　 　　　　 　　　　　A.atrackback-post｜超連結
　　　　 　　　　 　　　　 　　　　 　　　　　A.atrackback-post:link｜尚未連結過的超連結
　　　　 　　　　 　　　　 　　　　 　　　　　A.atrackback-post:visited｜拜訪過的連結
　　　　 　　　　 　　　　 　　　　 　　　　　A.atrackback-post:active｜正按下的連結
　　　　 　　　　 　　　　 　　　　 　　　　　A.atrackback-post:hover｜游標在連結上方
　
　　　　 　　　　 　　　　 　　　　 　　　　.comments-body｜回應內容
　
　　　　 　　　　 　　　　 　　　　 　　　　.comments-post｜回應之後的『Posted by...』
　
　　　　 　　　　 　　　　 　　　　 　　　　.form｜整個留言表格
　
　　　　 　　　　 　　　　 　　　　 　　　　 　　　　#author｜填寫姓名的欄位(包含於"input"裡)
　
　　　　 　　　　 　　　　 　　　　 　　　　 　　　　#email｜填寫email的欄位(包含於"input"裡)
　
　　　　 　　　　 　　　　 　　　　 　　　　 　　　　#url｜填寫URL的欄位(包含於"input"裡)
　
　　　　 　　　　 　　　　 　　　　 　　　　 　　　　#text｜填寫留言的欄位(包含於"textarea"裡)
　
　　　　 　　　　 　　　　 　　　　 　　　　.menu｜『回blog首頁』『上一篇』『下一篇』
　
　　　　 　　　　 　　　　 　　　　 　　　　　A.amenu｜超連結
　　　　 　　　　 　　　　 　　　　 　　　　　A.amenu:link｜尚未連結過的超連結
　　　　 　　　　 　　　　 　　　　 　　　　　A.amenu:visited｜拜訪過的連結
　　　　 　　　　 　　　　 　　　　 　　　　　A.amenu:active｜正按下的連結
　　　　 　　　　 　　　　 　　　　 　　　　　A.amenu:hover｜游標在連結上方
　
　　　　 　　　　 　　　　 　　　　.pagetop｜『回頁首▲』『回最上方』
　
　　　　 　　　　#links｜行事曆與資料夾、文章分類、連結那一大塊
　
　　　　 　　　　 　　　　.sidetitle｜連結區塊標題
　
　　　　 　　　　 　　　　.side｜連結區塊
　
　　　　 　　　　 　　　　　A.aside｜超連結
　　　　 　　　　 　　　　　A.aside:link｜尚未連結過的超連結
　　　　 　　　　 　　　　　A.aside:visited｜拜訪過的連結
　　　　 　　　　 　　　　　A.aside:active｜正按下的連結
　　　　 　　　　 　　　　　A.aside:hover｜游標在連結上方
　
　　　　 　　　　 　　　　 　　　　.sidebody｜連結區塊內容
　
　　　　 　　　　 　　　　 　　　　.photo｜個人簡介照片
　
　　　　 　　　　 　　　　 　　　　.nickname｜個人簡介名字
　
　　　　 　　　　 　　　　 　　　　.message｜個人簡介內容
　
　　　　 　　　　 　　　　.calendarhead｜行事曆標題(月,年)
　
　　　　 　　　　 　　　　.calendartable｜行事曆內容區塊
　
　　　　 　　　　 　　　　 　　　　.calendarwd｜行事曆星期區塊
　
　　　　 　　　　 　　　　 　　　　 　　　　.calendarweek｜行事曆星期字型
　
　　　　 　　　　 　　　　 　　　　.calendard｜行事曆單一日期區塊
　
　　　　 　　　　 　　　　 　　　　.calendardbg｜行事曆單一日期區塊(表示有文章時)
　
　　　　 　　　　 　　　　 　　　　 　　　　.calendar｜行事曆單一日期字型
　
　　　　 　　　　 　　　　 　　　　 　　　　　A.acalendar｜超連結
　　　　 　　　　 　　　　 　　　　 　　　　　A.acalendar:link｜尚未連結過的超連結
　　　　 　　　　 　　　　 　　　　 　　　　　A.acalendar:visited｜拜訪過的連結
　　　　 　　　　 　　　　 　　　　 　　　　　A.acalendar:active｜正按下的連結
　　　　 　　　　 　　　　 　　　　 　　　　　A.acalendar:hover｜游標在連結上方
　
　　　　 　　　　 　　　　.syndicate｜最下方的web feeds 和樂多的Banner
　
　　　　 　　　　#footer｜最下方的區塊(和#banner相對應)