Pixnet Blog 樣板CSS（含迴響CSS），模板為痞客模版。（可顯示頭像那種）
連製作首頁圖的PSD檔案都釋放囉XDD
【特色】
→ 主打灰階！無炫目色彩依然華麗XD
→ 最上方大圖可隨喜好更替。
→ 1024x768 以上建議，文章區寬620px。
→ 『發表迴響CSS』有配套樣式（請見下文）
【使用說明】
→ 可自行修改
→ ie6可用。ie5以下不支援。
→ 預設隱藏：網誌分類附近的招呼語、頁尾超連結、文章內的回到頁首、單篇文章的迴響數與人氣。
→ 發現bug請務必告訴我，會盡快修正^^|||（建議也歡迎）
連製作首頁圖的PSD檔案都釋放囉XDD
【特色】
→ 主打灰階！無炫目色彩依然華麗XD
→ 最上方大圖可隨喜好更替。
→ 1024x768 以上建議，文章區寬620px。
→ 『發表迴響CSS』有配套樣式（請見下文）
【使用說明】
→ 可自行修改
→ ie6可用。ie5以下不支援。
→ 預設隱藏：網誌分類附近的招呼語、頁尾超連結、文章內的回到頁首、單篇文章的迴響數與人氣。
→ 發現bug請務必告訴我，會盡快修正^^|||（建議也歡迎）
◆網誌CSS：點這（請貼在痞客模版那邊）（有註解） ◆網誌CSS 鋼琴版：點這（請貼在痞客模版那邊）（有註解） ◆發表迴響CSS：點這 |
【特別注意】
一、網誌名稱有兩個以上的英文字會看不到（因為標題是直書，但是英文會是橫書），解決方法：
1. 改成全中文。ex. SuperMario → 速撥蟆荔嘔（啥米XD!?）
2. 每個英文字中間加上半型空白。ex. SuperMario→ S u p e r M a r i o (比較可行)
3. 放棄用這個樣板吧XD|||（改成全型英文只對ＩＥ有用喔）
二、網誌設定建議620px以上自動縮圖
三、若套用上有問題，請給我擷圖、使用的瀏覽器和螢幕解析度（或其他您認為可能的原因）
我會盡量解決^^
祝套用愉快！
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
【各瀏覽器實測】
1280 x 1024 維度。
火狐2.0.0.14
IE 6
IE 7.0.5730.13
Avant Browser 11.6 build 11
IE 7.0.5730.13 新增留言迴響視窗
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
【換首頁圖】
請在div#header的background: url後面的網址換掉即可。
找不到這個標籤可以用Ctrl+F搜尋網頁文字『首頁圖』
有時候圖片比較淺或是什麼的，網誌描述也需要換顏色，請在div#banner h2裡面加上color:#000;
井字號後面的色碼依底圖而異～（圖淺字深，圖深字淺，要隱藏文字則例外～）
以下是我用過的首頁圖，有興趣自取XD（右鍵／內容／複製網址／貼上）
↓V1 初代月暈 ↓V2 鋼琴 ↓V3 末彌純作品
↓V4 沙林瑪庭園 ↓V5 逆轉一代賀圖
【自製首頁圖】
貼心者如我也連PS原始檔都放出來XD
適用於有裝Photoshop（或是任何支援PSD檔案的程式），會基本使用方法的朋友。
PS版本我是用8.0（也就是CS）
點這邊下載RAR壓縮檔（2.08MB），解壓縮出來4.48MB的PSD
圖層如下圖，通常深色的圖用大黑框，淺色的用小黑框，如逆轉那張我只用小黑框。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
【1/11 初發文】
測試環境主要是為FF2.0和IE7.0，不過方才也有用IE6.0跑過，乍看沒啥問題~
當初是在IE6做樣板，最近才變成IE7.0。
套用者修改css後若想再上架請先禮貌知會我一聲，基本上所有的圖片素材必須重新製作。
畢竟幾乎都是自己畫的，要不然就是寒舍，在不知道的地方被貼來貼去感覺非常奇怪orz
需要把隱藏的元素放出、哪個地方想微調而不會的也可以提出來^^
【1/12 修改紀錄】
1. 網誌名稱超連結改成直書：#banner h1 a { writing-mode: tb-rl; } 感謝Rockemail回報^^
因為我設定超過寬度就隱藏（overflow: hidden;），所以不斷行的半形英文就消失了orz
2. 網誌全站分類加設行高。
【1/15 修改紀錄】
1. 網誌標題改回橫書。因為火狐不支援tb-rl，而我也懶得找其他方法了orz
理所當然，網誌描述位置也往下移、跳到主文也修改寬度。
2. 相簿、名片等連結（#navigation）加在首頁圖角落。有點不情願，所以就那樣了orz
3. 個人頭像（#headshot-img）往中間移動，整體比較平衡～
4. 好友碎碎唸文字（.broadcast-text）改到右邊，增加上邊距，文字比較清楚～
5. 全部文字預設Courier New，因為之前的字型讓小丸子三條線看不清楚 ex. |||orz
6. 發現ie有下方捲軸火狐沒有，所以定位框原width: 1000px 加設*width: 997px
7. 發現最新文章和迴響的預設高度忘了刪（因我有加捲軸，分享的則無），已修正。還有改哪些忘了。
【2/22 重新釋放】
發現seednet個人空間竟然會不斷偷換網址orz 那我之前分享的檔案不都會連結失效嗎(可惡 = =#)
這次改用google個人網頁XD 看起來優雅，又可以線上編輯。
看到樣式留言區有人為我打抱不平，真的很感動。
測試環境為 Mozilla Firefox 2.0.0.12 、 Internet Explorer 7.0.5730.13
和 Avant Browser 11.5 Build 21 。
IE6的文字顯示會比IE7還大，似乎是pt的大小認定不同。其它用IE6測試正常。
【4/22 修正】
官方把丟到不通過區的樣式都加上不通過原因了XD 哈哈！
| repeat: 樣式規範已定(詳見公告) ４．正確擷圖：請修正預覽縮圖，請擷取樣式的全螢幕畫面（瀏覽器的第一捲高度即可） 謝謝 PIXNET痞客邦 2008/04/16 |
| repeat: 樣式規範已定(詳見公告) ２．瀏覽器標示：請依照實際狀況勾選可用之瀏覽器圖示 謝謝 PIXNET痞客邦 2008/04/16 |
而關於全螢幕，我照的也是按f11的全螢幕啊～怪哉。那這次把瀏覽器邊框剪掉好了。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
【相關連結】
◆製作心得與說明：http://blog.pixnet.net/smallwu36/post/10833459
◆官方公告的規範：http://blog.pixnet.net/admin/post/8774958
◆為何不通過官方審核的問答：http://support.pixnet.tw/index.php?topic=31541.msg87974
文章標籤
全站熱搜
【Comic】漫畫 (6)
目前用起來沒有什麼問題， 只有左上方的網誌名稱需要改成中文或全形英文才能正常顯示。 感謝小無啦~~^^
>>全形英文 喔喔!? 有這回事! 感謝回報(自己全中文名稱完全沒發現orz) 半形英文目前想到的方法只有改成直書^^||| >>比預期還早啊XD 其實是人懶的反作用力XDD 早晚都會上架，總是要渡過剛上架的頻繁修bug期orz
到剛剛才發現有更新... 網誌標題比較喜歡原來的直書(不用 FireFox XD)。 果然把那"四大連結"給修出來會破壞整體感啊... 個人覺得改到網誌標題右側似乎會好一些， 不過效果還是不及Prototype... 想自己改掉XDDD
我也不喜歡橫書的感覺XDD 暫時還是不要直接套用比較好喔XD 越修越亂了XDD >>改到網誌標題右側 也是有想過把它們放到標題附近 不過那邊已經有網誌分類、描述等很多文字 感覺有一堆字擠在一起的壓迫感？？？ 當然可以自行修改囉！畢竟每個人的習慣和喜好不同嘛^^ 連結是刪除了，還有需要註解版嗎？
小無你好像看錯了XD 我比較喜歡直書喔...XD >>也是有想過把它們放到標題附近 你說的擠在一起的問題我也有想到... 或許也可以放在個人頭像中? >>還有需要註解版嗎？ 可以的話來一份吧~謝謝~ 原本使用的字型是哪一個? 新版的字型感覺不好看， 想換回舊的XD
不是，是手誤錯字XD (不然我自己的怎麼會還是直書XD >>或許也可以放在個人頭像中? 啊!? 兩個是不同區塊吧，要當然可以，只要區塊重疊即可 問題是以後個人頭像就不可以移動瞭，因為四個連結的位置是固定的～ 舊的沒設定字型喔，說實在我的確是隨便選個字型的XD 把body的font-family: Courier New;刪掉就好了^^ 那個字型的好處是因為這個樣式預設移近超連結 小寫英文會變成大寫，而那個字型的小寫與大寫字元寬度都相同 文字不會忽長忽短～ 註解版上傳了(是橫書的喔) http://homepage19.seed.net.tw/web@5/smallwu36/css/20080116blogCssNotes.txt 之前直書的是這個 http://homepage19.seed.net.tw/web@5/smallwu36/css/20080111BlogCss.txt
為什麼我用上去之後 版面都亂跳啊
全部跑位的話會不會是css貼錯地方了？這個是要貼在痞克模板 還是有問題的話可以給我擷圖，還有使用的瀏覽器和螢幕解析度嗎？ 其實現在不建議套用喔....orz 因為官方老是不通過心情不爽就給他放死了XD||| （好吧，今明天內會再去修修orz）
我用IE開再貼就可以了耶 不知道為什麼用火狐就不行 還有發表迴響CSS的網頁出不來 (該不會又是我家火狐的問題了吧) 總之 非常感謝你提供的版面樣式!!
我拿去用囉 謝謝分享^^辛苦了~ 尤其是那個十字架>///<
不客氣 也感謝套用此樣板^^
*****
若您是使用『闇之沉鬱』，其模板是WRETCH，所以沒有那些區域喔 痞客模版的才有（如上文的「∞闇之寒影∞」 ） 假如有的話，在網誌後台的版面管理的版面設定 把[左右兩側未使用欄位]那幾區拉下去就可以了
你好，套用你的樣式。 不過想請問一下，我想把「跳回主文」跟「部落格分類」這兩個去掉。參考過解說版的CSS，我把那兩個部分的CSS都砍掉了，不過還是可以在網頁最上面看到小字，而且跳出原本看不到的登入痞客邦這些東西。 請問要怎麼做才能讓這些東西完全消失呢？ 另外連結留言版跟相簿，你的設計是斜的，不過如果我想把他整齊排成一排在首頁圖跟文章標題中間的空格的話，padding-left要怎麼設定呢？我試過好幾次，都沒辦法讓相簿的連結往下降。 不好意思，CSS新手，自己摸索中。麻煩指導一下。
您太客氣了。 很喜歡你做「闇之～～」的樣式風格。 而且你不但大方開放，還指導CSS語法。真是太讚了～ 按照您的語法我已經改好我的版面了。 謝謝您！
不好意思，套用您的鋼琴版樣式一直到現在。我又遇到難題了...請教一下。 之前照您所說的把相簿、部落格這些連結排成一排了。不過變成沒有獨立連結。現在因為痞客邦的相簿空間不太夠了，我想要新增一個外部連結來當相簿2。請問這樣的CSS語法要怎麼寫？放在哪裡呢？
想要在樣式上新增東西，就找出閒置的元件或新增元件來修改 所以用想像的做法是： １新增側欄的版位 ２隱藏標題 ３內容放入超連結 ４修改ＣＳＳ放到想看到的地方 詳細 １ 新增側欄的版位 自訂欄位請放在側欄１的最上方 ２ 新欄位標題先暫時打個不會和頁面文字重複的詞句 假設：［歐麥尬］ ３ 內容放入超連結 相簿２ 當然，請修改成您想顯示的名稱和連結位置 預設是新視窗開啟（target="_blank"） ４ 存檔後，檢視網誌原始檔 搜尋新欄位的標題［歐麥尬］，找到 id="box36363" (假設的數字) ５ 修改最下方的CSS語法，貼上～ 注意所以有的ID都要修改（也是井字號開頭的那個） 細部語法您應該都知道了吧^_^ ７ 因為我人在網咖，手邊沒有工具去檢視您的CSS（用火狐外掛） 也沒辦法精確的量出邊距（用PHOTOSHOP的尺） 所以只能用自己的測試orz http://smallwu36test.pixnet.net/blog ８ 『不過變成沒有獨立連結』 這句聽不懂＠＠ 所以不知道該如何下手＠＠ ９ 點進貴網誌看到敝圖有點嚇到///（羞 假如還有問題的話，希望先給您網址的全部CSS，比較方便修改～～～ 若貼不下或不想貼出來 可以寄到痞客邦 Gmail 信箱（我的帳號@pixnet.net） 以上，祝您修改順利：） /*------------------ 相簿二號 --------------------*/ #box36363 { /*這個要自己去查編號*/ border: 0px solid; } #box36363 .box-title { display: none; } #box36363 .box-text { text-align: left; position: relative;/*自訂欄位請放在側欄最上面*/ right: 539px;/*自己僑位置*/ top: 715px;/*自己僑位置*/ border: 0px solid #2d2d2d; font-size: 16px; color: #FFF; display: block; width: 80px; height: 60px; } #box36363 .box-text a { border-bottom: 0px solid #2d2d2d; text-decoration: none; padding: 0px; } #box36363 .box-text a:hover { text-decoration: none; background: none; color: #fff; } /*------------------ 相簿二號 END --------------------*/