本教學是針對使用800*600解析度及設定三欄式版型的格友而發表的。
因為玄音看習慣了800*600的螢幕解析度，所以為了更方便使用部落格，所以找了這個方法。
而對設定1024*768解析度的格友來說，是不會有下列困擾產生的。
可是很麻煩的，我常常修改部落格，每次要進入管理部落格，一定要拉 拉桿才能看到管理部落格按鈕。而訪客要訂閱部落格，也要將拉桿往右拉，才能看到訂閱按鈕，我覺得這個很不方便。
很巧的，在a-Jin的部落格看到這篇Blog title增高術後，引發了玄音許多想法。
若是能將三欄的內文欄變瘦，那麼三欄就能同時顯示了。（但這個想法我測試良久，都不成功！放棄。）
然後又想到既然標題橫框能夠增高，那應該也能變窄吧！（哈！有變窄，只有底圖變窄，白框還是存在，沒有成功！再放棄。）
喔喔！又看到a-Jin說的：成功增高後還有個問題……
那就是「發表文章」「上傳相片」「管理部落格」這三個按鈕還待在原位， 這樣在視覺上會有些突兀，但可以更改他們的位置。
呵呵！就這樣囉！所以我成功的把→
有看到嗎？我小部現在的訂閱部落格圖示，直接就能看到了，不用再拉 拉桿了，很方便吧！
若您是三欄版型設定者，也覺得拉 拉桿很不方便，那麼就可以開始動手來修改按鈕位置囉～
※ 首先要特別注意：測試n次顯示↓
※ 將按鈕往左移後，自製的訂閱部落格圖示無法顯示，要用奇摩原預設圖才能看到圖示。
所以→ /*btnsbsrb訂閱部落格圖示*/ ←這段語法內容要全刪除，才能回到預設值，看到部落格訂閱圖片。
圖一↓ 設定三欄版型後，Blgo是出現這樣的版面，訪客進來，沒有拉 拉桿是看不到訂閱按鈕的。
圖二↓ 訪客要將拉桿往右拉，才能看到右上角的訂閱部落格按鈕。
圖三↓ 登入後，進入自己的部落格，沒有拉 拉桿也是看不到管理部落格那個按鈕的。
圖四↓ 要將拉桿往右拉，才能看到管理部落格按鈕。
好！到這裡我們開始做修改。
首先進入ＣＳＳ裡面找到 /*Blog title*/ 這個段落標籤，整段語法是這樣↓
/*Blog title名稱標題橫框預設值*/
#yblogtitle .mbd,#yblogtitle .mft{background-color:#383838; color:#FFF;}
#yblogtitle h1{color:#FFF;}
#yblast{display: none}
請在段落底下加上 #yblogtitle .tft {margin:上px 右px 下px 左px;} ←這道指令。
↑這指令的意思是設定這三個按鈕距離標題框上、右、下、左邊的位置。
通常只會改到上和右的數值，下和左直接打 0 就可以了。
因此修改好的語法是這樣的↓
/*Blog title名稱標題橫框*/
#yblogtitle .mbd,#yblogtitle .mft{background-color:#383838; color:#FFF;}
#yblogtitle h1{color:#FFF;}
#yblast{display: none}
#yblogtitle .tft {margin:20px 150px 0px 0px;}
語法說明：
※ #yblast{display: none} ←這一段有沒有都看不出它的變化，刪除也可以。
※ 若您的部落格描述文字，跟我一樣只有一行，那麼 {margin:20px 150px 0px 0px;} 這樣的設定就是我小部的示範。
※ 若是您的欄高有變動，請配合您的 Blog title 多測試幾次，直到改到您滿意的位置囉～
↓那麼再來看看改好的按鈕位置如何。
圖五↓ 改好後的小部，果然很理想，不用拉 拉桿，也能看到管理部落格按鈕了。
圖六↓ 而且訪客也可以直接看到訂閱部落格按鈕！也不用拉 拉桿唷！
呵！又完成了一道更新指令，很開心吶～！大家一起來唷～！
除了把按鈕往右移，還可以將 Blog title 標題框拉高喔！
請看上圖的標題框，高度不是很高吧！這是奇摩的預設值。
那如何增高呢？這要感謝a-Jin的妙方分享了。
作法：
一樣的請進入CSS裡面，找到/*Blog title*/這個段落標籤↓
/*Blog title名稱標題橫框預設值*/
#yblogtitle .mbd,#yblogtitle .mft{background-color:#383838; color:#FFF;}
#yblogtitle h1{color:#FFF;}
在紅字黃底這一行→ #yblogtitle .mbd,#yblogtitle .mft{background-color:#383838; color:#FFF;}
加入→ height:你要的高度px; 這段指令。
語法範例：
/*Blog title名稱標題橫框奇摩預設值*/
#yblogtitle .mbd,#yblogtitle .mft{background-color:#383838; color:#FFF;height:200px;}
#yblogtitle h1{color:#FFF;}
語法說明：
※ ↑上面語法有看到吧！只要將→ height:你要的高度px; ←這個指令
※ 貼在 #yblogtitle .mbd,#yblogtitle .mft{background-color:#383838; color:#FFF;height:200px;} ←這段語法後面就ｏｋ了。
※ 標題框高度要設多高，可以配合您想要加入標題框的底圖大小而定。
※ 像a-Jin的部落格，她把標題框增高，剛好底圖也一樣高度，所以她的部落格看起來，很乾淨明亮喔！有空您可以去參觀看看。
↓現在來看看增高後及調整按鈕位置成功的示範。
圖七↓ →標題框增高 height:200px; 語法如下:↓
/*Blog title名稱標題橫框奇摩預設值*/
#yblogtitle .mbd,#yblogtitle .mft{background-color:#383838; color:#FFF;height:200px;}
#yblogtitle h1{color:#FFF;}
※ ↓因為要看清楚一點，所以設200 px高，按鈕的位置沒有設定，所以跟著在上面，看起來真的很突兀。
做了按鈕位置修改後，
就是語法裡再加入這段→ #yblogtitle .tft {margin:150px 150px 0px 0px;}
意思是指→ 離上邊框↑150px 離右邊框→ 150px
語法範例↓
/*Blog title名稱標題橫框奇摩預設值*/
#yblogtitle .mbd,#yblogtitle .mft{background-color:#383838; color:#FFF;height:200px;}
#yblogtitle .tft {margin:150px 150px 0px 0px;}
#yblogtitle h1{color:#FFF;}
若將上面這段語法貼入CSS表裡面，版面就變成圖八所示範的。成功的將按鈕往下拉。
圖八↓
您是第
位訪客
沒有留言:
張貼留言