Paul's Blog

出走無名的前置作業除了搬網誌、相簿外，最花費心思的應該是
CSS 樣式修改。所幸Pixnet有群熱心的網友，才使平台順利轉換
完成！睡過頭來不及上課的早上，就讓我寫寫搬家後的新鮮事！





首先要先說說從「爛站」轉換至 Pixnet 的心得吧，剛開始接觸
這個平台真的很不習慣，打個比方來說好了：「無名小站的操作
介面是小學生等級，那麼 Pixnet 的等級應該算是高中生的介面
。」，不是說 Pixnet 的介面設計的不好喔，而是Pixnet本身讓
使用者發揮的自由度相當的高，即使沒有付費，也能使用一些很
棒的功能。在無名慣性地用著固定的模式，用久大概就是這樣子
，沒有太多智能上的進步。反觀 Pixnet 僅需要一點HTML的基礎
概念，很快地又能輕鬆自在地使用囉。只是 Pixnet 還是有個比
較弱勢的地方，在於教學文件並不是很完整，初期找答案的時間
總會讓剛加入的使用者較費心力！

在此就暫時不贅述轉換平台中間的過程，整個部落格搬過來的確
花了些時間，中間透過站方的協助，解決了相簿、部落格破圖的
問題，這些都得花時間等待與整理。一開始會想去動 CSS樣式設
定，主因在於轉過來後發現無名標題樣式是透過 CSS控制圖片的
方式顯示，並無法正確的顯示出兩側的分類標題。在等待的過程
中就先著手修改 CSS的設定。

Pixnet支援多種 CSS版模，像是預設的Grey、無名版模、樂多版
模，這些都是為了讓其他平台能順利轉移提出的解決方案，意思
是各位能用舊平台設定，透過 Pixnet 後端的支援，順利搬遷完
畢，也不會有需要重新了解與設定上的困難。

扯了這麼遠，拉回正題..

加入 Pixnet 的朋友一定覺得預設的 Grey 顯示各項個人服務連
結設計的很好，僅用短短的幾行字解決了這個基本的需求，但您
假若跟我一樣使用的是無名版模，這個問題可就沒這麼簡單囉？

翻閱「網頁之翼‧CSS 教學」後，可以查到無名小站與 Pixnet
樣式結構表的差異性，會發現假若各位使用無名版模，是沒有支
援 #Topmenu (ID選擇器)，也就沒辦法顯示出類似下圖這類方便
的連結列囉。





這樣說來，會不會無名版模就無法使用上面那個功能了呢？當然
不是啊！透過網路一堆高手的協助，這類問題自然迎刃而解囉！
有興趣的朋友，可以先看看這篇‧無名版模能使用Topmenu嗎 ?
的延伸討論。

「我的地盤」這個功能就是顯示各位在這個平台常見的服務，像
是網誌、相簿、留言版之類的連結囉。

以下標籤文字引述於網頁之翼‧CSS 教學

實作前，我們先了解一下這兩個平台選擇器的設定內容：

無名的設定是這樣：

#boxMySpace｜○○的地盤
　.boxMySpace0｜「○○地盤」字樣（也在.sidetitle裡）
　.boxMySpace1｜○○地盤內容（也在.side裡）
　　.mySpaceLink｜列表中的連結
　　　#linkMypage｜首頁（本身也是.mySpaceLink）
　　　#linkBlog｜網誌（本身也是.mySpaceLink）
　　　#linkAlbum｜相簿（本身也是.mySpaceLink）
　　　#linkGbook｜留言（本身也是.mySpaceLink）
　　　#linkUser｜名片（本身也是.mySpaceLink）
　　　#linkFriend｜好友（本身也是.mySpaceLink）

Pixnet的設定則改成這樣：

#boxProfile｜我的地盤（取代了無名的#boxMySpace）
　.boxProfile0｜「我的地盤」字樣（也在.sidetitle裡）
　.boxProfile1｜○○的地盤內容（也在.side裡）
　　.boxMySpaceImg｜包著地盤裡的照片
　　　.boxMySpaceImg img｜地盤裡的照片
　　.boxProfileLink｜列表中的連結
　　　#userProfile｜○○的名片（本身也是.boxProfileLink）
　　　#userBlog｜○○的網誌（本身也是.boxProfileLink）
　　　#userAlbum｜○○的相簿（本身也是.boxProfileLink）
　　　#userGuestbook｜○○的留言板（本身也是.boxProfileLink）
　　　#adminConsole｜管理介面（本身也是.boxProfileLink及.adminConsole）
　　　#boxMySpace select｜好友的網誌

透過以上，不難發現，我們需要查看的是 Pixnet 的boxProfile
相關設定，假如各位懶得看這些細項的廢言，可以直接跳過這段
，至下段實作設定。

這次實作的目的，是想將我的地盤顯示能做到跟Pixnet的功能相
同，看來只能用一些偷吃步的技巧來達成。按照網友們給的建議
，我們得先將「我的地盤」利用 CSS隱藏起來，然後再另外設定
標籤的位置。在各個服務連結中間的「|」，是利用「框線樣式」
做到的喔，這也算是讓我有點驚訝的方式。


稍微了解後，回到「部落格管理介面」→「版面管理」→「編輯
CSS」，找到「#links 」區的設定，在下面加入以下設定：


.boxProfileImg {display:none;}　/* 將「我的地盤」照片設定成隱藏 */
.boxProfile0 {display:none;}　　/* 將「我的地盤」字樣設定成隱藏 */
.boxProfile1 br{display:none;}　/* 將「我的地盤」內容換行設定成隱藏 */

#userBlog {
　　　　position: absolute;
　　　　top:485px;
　　　　left:270px;
　　　　width:80px;
　　　　font-size:14px;
　　　　border-right:1px solid #fff;
　　　　padding:0px;
}

#userAlbum {
　　　　position: absolute;
　　　　top:485px;
　　　　left:365px;
　　　　width:80px;
　　　　font-size:14px;
　　　　border-right:1px solid #fff;
　　　　padding:0px;
}

#userGuestbook {
　　　　position: absolute;
　　　　top:485px;
　　　　left:460px;
　　　　width:95px;
　　　　font-size:14px;
　　　　border-right:1px solid #fff;
　　　　padding:0px;
}

#userProfile {
　　　　position: absolute;
　　　　top:485px;
　　　　left:570px;
　　　　width:80px;
　　　　font-size:14px;
　　　　border-right:1px solid #fff;
　　　　padding:0px;
}

#adminConsole {
　　　　position:absolute;
　　　　top:485px;
　　　　left:665px;
　　　　width:80px;
　　　　font-size:14px;
　　　　padding:0px;
}


排列的順序，可以按照各位的喜好任意調整，當然上面的設定值
都是小弟我慢慢調整出來的位置，各位可能得要親自按照自己的
版模做細部的調整喔。特別要說明的是「width (寬度)」這部分
，當各位沒有加入 width，會發現在IE瀏覽器顯示會變成直列，
為了改善這個問題，hit1205 (網頁之翼的站長)提供了寶貴的經
驗分享，只要將每個標籤設定寬度，自然就能解決在IE瀏覽顯示
的問題囉！


對了？假若各位不希望弄成我這麼複雜的設定，在此建議各位可
以改成下面這個樣子：

.boxProfileImg {display:none;}
.boxProfile0 {display:none;}
.boxProfile1 br{display:none;}

.boxProfile1{
　　　　position: absolute;
　　　　top:480px;
　　　　left:300px;
　　　　width:500px;
　　　　font-size:14px;
}

至於編輯後的 CSS會是怎麼樣的畫面，就請各位自行測試吧！就
不貼圖告知囉。這個設定沒有選擇的原因在於想將服務連結做排
序，就只好乖乖地細部調整連結位置囉。

哇！寫了這麼多，相信各位應該也看不懂我在寫什麼吧？嗯，看
來我也該好好深刻檢討一下表達的方式，假如下次有機會再寫簡
單易明瞭的格式好了，因為這篇文章，單純只是怕我哪天變笨突
然看不懂自己弄得 CSS設定所做的筆記，就請各位多多見諒囉！


在此也向各位推薦兩個關於 CSS教學的好網站，碰到不熟悉的樣
式，建議各位可以到那邊查查，相信很快就可以得到解答囉！


網頁之翼‧CSS 教學
OECSPACE‧CSS 教學


當然，這次碰上的這個問題要特別感謝 hit1205、repeat兩位網
友的協助，要不然這問題應該會繼續困擾很久哩，這篇文章也會
貼回原討論文幫助遇到跟我一樣問題的朋友們！

好吧？在此就不多說啦！已經錯過一早上的課程，下午可不能再
遲到哩，上課去囉！今天也是個值得繼續努力「戰鬥」的一天！ ^0^/


　　　　　　　　　　　　　　　　　　　　　　　　　　Paul

　　　　　　　　　　　　　　　　　　　　　　　2007.07.22