« 如何將文章內加入底圖 | 主頁面 | 歡迎RainbowChild »

把單篇文章的頁面做成兩欄式



'; } ?>

小黛的問題:怎樣在單篇文章中搞成兩欄格式?

答:(本回答僅適用於MT預設版面,馬戲團團員的模版已經是兩欄式)
這要提到一點MT版面的CSS「解剖學」。不過呢,我們大家都是麻瓜,對於大體解剖這回事是有點恐懼的,所以我們在這裡只解剖一隻小青蛙,當然,有些人解剖青蛙也會暈倒,那不妨請隔壁比較膽大的同學代為操刀。

借用ipa的說法:"MT的版面是個大拼花地板",各個部份都放在一個「容器」裡,然後容器裡面又可以有容器,好像俄羅斯套娃娃一樣。容器的蓋子是<div id=”…”>或<div class=”…”>,容器的底是</div>。容器裡的文字、顏色、大小、位置等等該長什麼樣子的格式資訊,是在式樣表(stylesheet)中指定。(以上若有謬誤,煩請高手指教

所以我們若要換版面,一個方法是改放到另一個容器裡,另一個方法是改式樣表。
而在MT的主頁上,文章內容是放在名為「content」的容器裡;在單篇文章的模版裡,文章內容是放在名為「container」的容器裡。而左欄或右欄是放在名為「links」的容器裡。

回到主題,如何把單篇文章的頁面改成兩欄式呢?最簡單的方法是換容器。

0. 強烈建議把你要改動的模板先複製,另外存檔,若不小心搞到不可收拾,可以重新貼回去。

1. 在單篇文章的模板(Individual Entry Archive)中找到<div id="container">,把它改成<div id="content">,先儲存起來

2.事情還沒完,你要再指定左欄或右欄要放什麼東西,你可以直接把主頁面模版中的邊欄整個搬過來。到主索引模版,找到<div id="links"> ,把以下的部份複製起來,一直到對應的</div>為止。中間當然還有很多<div class="…">…</div> ,你要一個一個對好,若丟頭漏腳,可能會產生版面混亂。

3. 回到單篇彙整模版,把剛才從主索引模版複製來的部份貼到單篇模版適當的位置。這個「適當的位置」,一般來說,可能會是在最下頭,</body></html>的上面。

4. 儲存->重建

馬戲團的團員若有興趣研究,你的版面結構是這樣:
左欄的容器:left
右欄的容器:right
三欄式的主文欄:center
兩欄式的主文欄:centerfor2col

del.icio.us HEMiDEMi MyShare


'; } ?>

歷史上的今天

共 11 則迴響


  1. anpanman 說:

    我想問在無名有個布景主題是蔡健雅,如何更改banner中的4個小icon,thanks!



  2. Josk CaT 說:

    您好 ^^ 我想請問一下關於將單篇文章彙整改成兩欄式的問題....

    我目前已經改了一些...但是問題來了....

    我有將我的右邊的區塊弄出來了...

    但是資訊方塊列的部份依然是在最下方的說 @@

    我使用的是 MT 3.2 ...

    不知道該如何做才能讓側邊資訊方塊列回到他原本的地方呢!?

    以下是我的站點 http://catseyes.catsgo.com/

    希望團長或者是其他的能手們能幫我看看問題出在哪了 ^^ 非常感謝!!



  3. 駝獸 說:

    瑄:
    請留下你的網址, 要看看才能幫你解決問題..:)



  4. 說:

    可以請問嗎
    我試著照上面的教法 試圖在單篇文章的地方
    改成兩欄式的

    可是我做出來的東西 就是應該在右邊的整條連結彙整等
    都在網頁的最下方ㄝ..

    是我最後的 "3. 回到單篇彙整模版,把剛才從主索引模版複製來的部份貼到單篇模版適當的位置。這個「適當的位置」,一般來說,可能會是在最下頭,的上面。" 這個步驟錯了嗎

    還是我應該在容器前面 加上 left 或right的東西嗎?
    有人可以告訴我嗎 謝謝



  5. 凱洛 說:

    是阿
    團長是團長
    冷J是冷J
    話說回來我冷師江湖名號還真多
    冷J 駝獸 御前護法小冷子 冷伯特.....................
    一冷天下無難事阿



  6. jeph 說:

    其實回答問題的不是團長, 而是團長的駝獸, 請特別注意, 千萬要分清楚, 這樣才是尊重團長, 也是尊重駝獸.
    關於改三欄式的問題, 相信我, 這是大工程, 非得把你的樣式表給大卸八塊不能作到, 而且不小心還會作出IE看好好的,用Mozilla看卻支離破碎的版面.
    等我哪天比較有勇氣了再來寫如何改三欄式.



  7. EL 說:

    團長你好,你解釋的很清楚,我照著做也成功了,真是太感謝了。T_T
    我還有一個問題,如果要將index模版改成像憂鬱馬戲團一樣,是三欄式的,又要怎麼改呢?
    先謝謝你撥空回答喔~~



  8. jeph 說:

    感謝fay 提供的方法. 你的網誌做得很sexy..;)



  9. Fay 說:

    抱歉剛剛有漏文:
    <div id="Layer1" style="position:absolute; width:42%; height:95%; z-index:1; top: 1.5%; left: 20%;" class="entry"> 主文內容 </div>

    <div id="Layer3" style="position:absolute; width:18%; height:40%; z-index:2; left: 62%; top: 1.5%;" class="navbar"> 瀏覽列內容 </div>



  10. Fay 說:

    我使用的是BLOGSKINS上的模組,再修改過後的樣子。我也是弄了這個站以後才開始學會CSS的部份語法的。
    基本上,我每個頁面分為主文部份和右方的瀏覽列。
    這樣兩欄式的作法,我是採用將整個頁面分割的方式做成的。

    以下語法是把我的主文部份設定在Style裡設定的範圍內。


    主文內容

    然後,我把瀏覽列用另一個div圍起來,放在另一個範圍內。
    瀏覽列內容

    其中我用Class指定我想這個區塊內容顯示的樣式。

    你注意到了嗎?兩個區塊的最左和最上起始點不同,就會被放在不同的地方了.
    當然有其他的作法,不過我還不知道.

    小黛在妳想要的仙女棒一文中,有一個連結有教CSS的基本語法,我是先從那裡看起的。http://www.9w2u.com/htmlbook/css01.asp



  11. 凱洛 說:

    隨著成員越來越多
    師父的功力也越來越強
    真可怕


留言