v 版面大小的調整 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...