2007年6月16日 星期六

版面大小的調整

原本我的螢幕解析度都是設800*600,因為我的電腦已經用很久了,螢幕也只有15吋,所以設800*600,但是常被朋友批評現在沒有人在用那麼低的解析度,螢幕也太小了,叫我換台新的,現在都是1024*768或是1280*1024,17吋或是19吋的螢幕了,後來幫朋友成立部落格時,用notebook來看,發現畫面呈現真的是太小,只好切換到1024*768,剛開始還真不能適應,因為文字都變小了,經朋友提醒將設定值dpi從原來的96改成120dpi,果真字都變大了,才不至於讓我近視又加重了。

其實我在看艾瑪的網站時也會這樣,下面都不會出現捲軸,每次都要利用左右鍵來移動,看得很累,後來用了1024*768,這種情形就不再發生了,而且最近有用Google Analytics,發現我的訪客80%都是1024*768的解析度,基本上我是不喜歡用滑鼠去移動左邊右邊,而是希望整個螢幕就能呈現網頁的內容,當初用800*600設計網頁時,就要考慮到本文的寬度不能太寬,不然邊欄就被遮住,還要移動滑鼠去看邊欄內容,當初都是以px決定blog的寬度,譬如:網頁body-800px;文章post部分580px;邊欄200px,後來隨著網頁樣式的轉變,這樣制定的格式已經不符合我的需求,太硬邦邦,如果我要改個寬度,就全部格式都要更改,後來參考別人的做法,以百分比%來顯示,只要更改主要寬度,其他的就會隨著而更改

譬如現在的格式,我只要改變整個blog的width寬度,就可以配合螢幕,而不必去計算實際的寬度,

主要更改
#outer-wrapper {
width:1000px;

要配合的就是,原先的樣版裡的,加起來的百分比,盡量以97%-99%,因為還有一些padding(空格)要考慮到
witdth都以百分比表示,而不以px固定像素,較為彈性化。
#main { 【主要文章區】
width: 60%;

#sidebar { 【邊欄1區】
width: 21%;

#sidebar2 { 【邊欄2區】
width: 18%;

因為我的是三欄式的,所以sidebar有兩個,如果你的只有兩個,你可以計算你的sidebar大小要多少,比如要放Adsense 200*200,如果寬度是900px,至少要設定23%,這樣就有207px,可以計算看看。

更改好了,記得你的banner也要改變,如果是用圖片當底的,偷懶的方法就是將圖片置中,或是resize你的圖片,再上傳即可,另外標題的位置也要跟著改變。

Banner圖片置中的方式,語法裡加個center即可。
background: url("圖片網址") center no-repeat ;

標題變更位置,在 #header h1{ ,更改 padding即可
#header h1 {
padding: 105px(上) 20px(右) 0(下) 80px;(左)

我的模板目前是使用我的版面是套用小梅子的善搞Blogger Beta Template 綠黨懶人包

但是這個版面還是有些問題要解決,因為他的邊欄有時會跑到主欄來,目前還未解決,如果想下載1024*768版面的模板,
按右鍵另存新檔下載

P.S. 小梅子的templates,2007.6.28已經被我換掉了,希望新的樣版可以符合自己的需要,搬家改版還蠻辛苦的。

29 則留言:

  1. 可以直接給我你現在的版面的xml我嗎?
    我找了很久,很多版面都太窄或者怪怪的,自己又不太懂怎樣改,腦暈了..
    但我不一定要你版面的顏色和圖片
    我想要三欄的版面(兩行網頁元素放在右方)
    dicky2868[at]yahoo.com.hk
    謝謝

    回覆刪除
  2. 你好,我將檔案連結貼在文章最後,你再下載即可。

    回覆刪除
  3. 謝謝~~~
    你會不會做成這個呢?
    http://dicky2868.googlepages.com/template-nyoba.xml
    例子
    http://v2868.blogspot.com/

    跟你的不同的是,這個版面在800*600的時候都可以看到右方的兩行網頁元素,因為視窗縮窄的時候文章也會縮窄了,而網頁元素則不會縮窄.

    但是這個視我怎樣改成上方的灰色部消去,還有右上方(Blog Archive)的部分突了出來,很醜..怎樣改呢??

    回覆刪除
  4. 修正:

    但是這個版面我不知道怎樣改成上方的灰色部消去,還有右上方(Blog Archive)的部分突了出來,很醜..怎樣改呢??

    回覆刪除
  5. #header {
    下面的敘述
    background-color: #cccccc;
    改成你要的顏色,或是去掉
    就不會是灰色的

    在#header-wrapper {
    這裡加上這行敘述
    height:150px;
    高度可以自己調整

    另外yahoo的信箱是會檔google的檔案的。

    回覆刪除
  6. 上方灰色的部分我不是想改顏色
    而是想消去
    像這個
    http://dicky2868.blogspot.com/
    我把網頁元素移丟都無效
    orz

    回覆刪除
  7. 對不起,我有點搞混了,這兩個你提出來的例子網站都是屬於dicky2868 這個帳號,同一個人所有,應該是你自己的blog吧,是不是試了許多版面而忘了自己改的css,你可以註記,或是用存檔的檔名來分清楚,不然你會很累的。

    回覆刪除
  8. 在#header-wrapper {
    設定 height:0;

    還有#header {
    這裡的height:0;

    或是在裡面加入
    display: none;

    這樣你的標頭部份應該就沒有了
    試試看吧

    回覆刪除
  9. 要慢慢研究一下,thanks~~

    回覆刪除
  10. 又麻煩你了~~請問一下你上傳的版面中
    怎樣法除在每篇文章後面都有的
    "各式書籤 Digg | Delicious | Technorati | HemiDemi黑米 | MyShare | Yahoo分享"

    http://it2868.blogspot.com/

    但是想保留
    "Translate this post: English
    訂閱: 文章 (Atom)"

    回覆刪除
  11. 展開小裝置範本,然後找到"各式書籤",從各式書籤到Yahoo分享</a><br/>這段刪掉,記得原來的要先備份。

    回覆刪除
  12. 再請教一下

    消去哪個翻譯
    "Translate this post: English "
    又要怎樣改?

    還有深綠色的背景可以改嗎??

    回覆刪除
  13. Translate this post:
    到 </font>這段刪掉即可

    body { 這個宣告
    background: #892;
    顏色改成你要的即可

    回覆刪除
  14. 嘿嘿,又來問了嘿,不懂編碼真麻煩呀~

    我在編中找到一些圖片連結,這些是版面的顏色嗎?可不可以改成自己網的寄存?因為我怕如果這個網停了可能影響的blog
    http://www.blogblog.com/moto_son/innerwrap.gif
    http://www.blogblog.com/moto_son/headbotborder.gif
    http://www.blogblog.com/moto_son/topper.gif
    http://www.blogblog.com/moto_son/diamond.gif
    http://www.blogblog.com/moto_son/commentbug.gif

    還有一個js檔,是必需的嗎??
    http://www.anniyalogam.com/widgets/hackosphere.js

    回覆刪除
  15. 當然可以,你可以存成自己的圖片網址。
    js檔是繼續閱讀的程式。

    回覆刪除
  16. 還有~~
    怎樣消去每段文章後面都有的"此文章的連結"

    還有"首頁"

    怎樣像你的blogger在每段文章後加上google廣告呢??thank you~~

    回覆刪除
  17. google廣告,請參考
    http://angelo-nmb.blogspot.com/2007/03/google-adsense-for-blogger.html
    "此文章的連結",應該是
    <!-- email post links
    -->>
    這段的語法刪掉,我不太記得了,試試看吧。

    回覆刪除
  18. "此文章的連結"不是
    email post links
    這段啦..只是刪了email的圖

    你知不知不哪裏有討論blogger的論壇呢?香港的差不多全是xanga....

    回覆刪除
  19. 抱歉,目前我不知道有這樣的論壇,通常有問題是上PTT BBS上的BLOG版去問,因為BLOGGER設計需要懂CSS語法,才能這裏改那裡改,你可能要多看些有關CSS、XML語法的書或網站,才比較能得心應手,我也是在網路上啃了很多資訊才比較進入狀況,其實你可以問樣板釋出的作者,這樣答案比較準確。

    回覆刪除
  20. 弄了幾天我都快腦暈了
    你可不可以直接幫我把哪些外連的http的gif圖消去,消去js哪個檔,
    文章好像你這個要按題目才顯示

    因為好多背景等都很難自由在範本>字型和顏色哪裏改
    我直接刪去js哪個連結會在IE顯示網頁錯誤
    可以的話給我個xml檔吧,thank you very much~~

    回覆刪除
  21. 如果你要單純三欄式的,你可以參考這個網站,裡的Minima Blue Stretch模板 http://hoctro.blogspot.com/search/label/Free%20Templates
    至於文章按了才顯示,是裝了繼續閱讀的外掛,你可上google去找相關的資訊
    我也有寫我自己如何改的http://01mistery.blogspot.com/2007/05/blog-post_8494.html
    我沒辦法幫你改 因為原樣板不是我寫的,我自己也是改了無數次才有現在的版面,如果決定在blogger落腳,就堅持下去,不然就選擇像sina或是yahoo這些bsp,也不用傷腦筋了,你也會比較輕鬆些。

    回覆刪除
  22. 您好:我是Mark,剛從無名搬過來blogspot,對於這裡的一切都還很陌生。抱著學習求知挖寶的精神來參觀您的網誌,還盼在未來的日子裡,前輩們能不吝給與指導。謝謝!

    回覆刪除
  23. 歡迎來到blogger的世界,昨天我有到你的網站參觀,看到你的大頭照歐,今天已經拿掉了,希望你的文章越來越多,這裡是個自由的世界,如果能幫上忙是我的快樂。

    回覆刪除
  24. 你好:
    看了你的部落格受益良多 非常感謝
    只是我再側欄的部份遇到了一個問題
    就是我不管增加什麼小工具(EX最新回應最新文章..)
    排再第三個的都會被擠掉到最下面
    上面寬度等等的方式我都試過了還是找不到原因(苦惱)
    可否麻煩幫我解答一下 謝謝唷

    LINK:http://max-communication.blogspot.com/

    回覆刪除
  25. 看起來像是你的"繼續閱讀"位置造成的,我不曉得你是用哪種語法,是這個嗎?<p style='text-align:right;'>拿掉,或是參考http://01mistery.blogspot.com/2009/05/readmore.html看看。

    回覆刪除
  26. 繼續閱讀我嘗試過了
    好像不是他的問題 ><

    我是改這個裡面的K2模板
    http://blog.joaoko.net/archives/510
    不好意思我剛開始學而已
    可以修改的寬度我都有調整過可是還是會被擠下去
    可以再麻煩你幫我看看嗎

    回覆刪除
  27. 你要不要試看看這個,http://www.eblogtemplates.com/k2/應該是一樣的版面,我試這個好像沒有問題,你提供的那個會發生你說的情形,目前我也找不到解決方式,不過我找到這個是2008年版本的。

    回覆刪除
  28. 作者已經移除這則留言。

    回覆刪除
  29. 哈哈哈自己回覆
    我解決了呼~~~~
    你的BLOG真的幫了我很多
    真的謝謝你唷 :)

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能