« 歡迎Jessypub | 主頁面 | 台灣2003 癸未部落格隨便獎 »

配置文繞圖



'; } ?>

如果你想把你的網誌插圖作成文繞圖的效果，這裡有幾種方法給你參考。

一、
你可以直接在安插圖片時加入align=right (或left)的控制碼。如<img src="http://圖的網址" align=left > 。結果是：

憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團


你應該注意到了，文字是緊貼著圖，不太好看。改善方法小黛有提到，加入vspace="5" hspace="10"這類的控制碼。如<img src="http://圖的網址" align=left vspace="5" hspace="10"> 。結果是：

憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團

二、
上面的方法你可能會覺得很麻煩。另一種方法是從樣式表動手。進入MT管理系統的stylesheet模版，加入以下控制碼：

.content img{
border: 1px solid black;
margin-right: 10px;
margin-bottom: 5px;
float: left;
}

（以上適用於馬戲團的模版，如果你用的是MT預設模版，請把「.content」改成「.blogbody」）
其中的「border: 1px solid black; 」 是給圖加上細黑框線，如果你不喜歡框線，可以把這行拿掉。
若你比較喜歡圖在右邊，可以把「float: left;」改成「float: right;」。
如此一來，你放圖時，不必加align、vspace、hspace等控制碼，就可以作出漂亮的文繞圖效果。

三、
不過如此安排樣式表，你馬上會碰到一個問題：如果圖太大，文繞圖不太好看。或者是說，有時候你要圖靠左、有時候靠右、有時候置中不作文繞圖，那該怎麼辦呢？你可以把下碼加入stylesheet：

.content img{
border: 1px solid black;
margin-bottom: 5px;
}
.content img.left{
border: 1px solid black;
margin-right: 10px;
margin-bottom: 5px;
float: left;
}
.content img.right{
border: 1px solid black;
margin-left: 10px;
margin-bottom: 5px;
float: right;
}
.content img.center {
border: 1px solid black;
text-align: center;
border: none;
display: block;
margin: 0px auto;
clear: both;
}

（以上適用於馬戲團的模版，如果你用的MT預設模版，請把「.content」改成「.blogbody」）
然後在放圖的時候，指定它的格式。

置左文繞圖： <img class=left src="http://圖的網址">

憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團


置右文繞圖： <img class=right src="http://圖的網址">

憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團


置中不作文繞圖：<img class=center src="http://圖的網址">


憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團憂鬱馬戲團

del.icio.us HEMiDEMi MyShare


'; } ?>

歷史上的今天

共 20 則迴響


  1. tacchang 說:

    突然想到這一招在3.2裡面依然有效嗎?


    2007年02月26日 09:48

  2. Matthew 說:

    Dear 駝獸，
    Good morning!
    It works!!!!!!!!!!!!!!!!
    非常謝謝。
    另一問：
    如何調整照片大小呢？
    Have a nice day.

    Matthew


    2005年08月08日 07:16

  3. 駝獸 說:

    Ｍatthew:
    有兩個問題：
    １．你的圖檔網址不正確,所以圖出不來

    ２．要作文繞圖，應該要這樣放：

    <img src="http://圖檔位址" align="left">文字文字文字文字

    但你打成：

    文字文字文字
    <img src="http://圖檔位址" align="left">


    2005年08月07日 13:55

  4. Matthew 說:

    Dear 駝獸，
    1. 謝謝回覆。
    2. 我的名字正確拼音是是Matthew. 我愛英文，略知ㄧ些其中訣竅。
    3. 以下資訊足夠嗎? 謝謝費心了。

    http://blog.xuite.net/yeh.matthew/mom/3681400

    媽媽的鄰居 2005-08-06 04:47

    平均分數：0顆星 投票人數：0 人 未分類文章
    10

    我要評分：



    嗨！早安

    耶和華所賜的福、使人富足、並不加上憂慮。

    這位老人家：

    1.面部表情好喜樂，有天使般的笑容。一點都不像生病的樣子。

    2.兩手交叉拖著頭，好像是老闆 ─ 有權、有錢、又有勢、無憂又無慮。

    3.左手操縱著小收音機，右手拿著喚人小盒子﹝護士特製，大小如軟片盒，內裝一元零錢數枚。搖起來蠻响的。﹞

    4.可自己進食、喝水。喜歡吃肉鬆配飯。

    但是：

    他老人家必須住院。因為無法脫離呼吸器自由活動。

    然而：仍然喜樂，愛使喚護士小姐





    2005年08月07日 13:30

  5. 駝獸 說:

    Mathew:
    我要看到你失敗的結果才有辦法判斷。


    2005年08月07日 12:51

  6. Matthew 說:

    Dear 駝獸，
    不好意思請問：為何我的文繞圖失敗呢？對不起，我有點老，又有點笨。
    謝謝抽空回覆。


    2005年08月07日 08:04

  7. 駝獸 說:

    Gisèle:
    若要把圖置中, 可以在圖的前後加<center>...</center>標籤。
    至於計數器, 你可以登入site meter->Manager->HTML Code->Meter Style->選擇顯示數字。這樣就好了。


    2005年04月10日 13:26

  8. Gisèle 說:

    不好意思，我又忘記請教您一個問題，我的counter要如何才能顯示參觀人數的數字呢？再次謝謝您！


    2005年04月05日 16:04

  9. Gisèle 說:

    Dear駝獸，
    不好意思，我的網站遜遜的，所以都不好意思告訴別人...
    那麼就麻煩您幫我看一下，目前我首頁發表的文章和之前請教您有關sidebar的問題很像：我的side bar最下方陸續會放一些連結或友站的logo，但是她們都不會排排站好，也就是目前只會一直往下排，我要如何讓她們可能左右排排站好，維持和左右上下有一樣的間隔距離呢？又，如果將來想要獨立讓一個標籤在中間又要如何設定語法呢？謝謝陀獸！


    2005年04月05日 16:02

  10. 駝獸 說:

    Gisèle:
    能不能看看你的網頁模樣, 比較可以知道問題在哪


    2005年03月24日 19:02

  11. Gisèle 說:

    不好意思，憂鬱馬戲團的大大，我忘了說明我的圖片，是指在sidebar的友站標籤或聯播標籤不知該如何讓她們乖乖排排站，謝謝！


    2005年03月23日 22:05

  12. Gisèle 說:

    不好意思，請問如果要同時放很多張圖片，要如何設定語法，才能將圖左右排排站好，與四周都有相同的間隔空隙，不會圖片都「黏」在一塊呢？謝謝大家！


    2005年03月23日 21:51

  13. tradewind 說:

    這個方法真棒！省去插入圖片時要設定一堆屬性的麻煩。

    發問：如果是表格的話，有沒有類似的作法啊？

    因為寫表格的時候也需要設定很多屬性，像是：width、border、cellpadding、cellspacing 等等，瑣瑣碎碎的，所以我試著用樣式表來代替這些設定；前三樣辦到了，可是我想不到方法來達到 cellspacing 的效果 (試過用 margin，似乎不行)，不知道有沒有什麼好方法呢？


    2005年01月03日 15:10

  14. jeph 說:

    原來是我打錯啦,真是誤人子弟...XD
    感謝EL 指正.


    2004年05月02日 07:11

  15. Cindy 說:

    謝謝jeph, 更大力謝謝EL, 還跑去找文章看碼...
    原來又是我笨笨打錯字... ^^;;
    謝謝大家~~~


    2004年05月02日 02:37

  16. EL 說:

    我知道是哪裡錯了。

    應該是align="left" 而不是aling=left


    2004年05月01日 18:58

  17. jeph 說:

    理論上,按照文中的方法做就可做到文與圖切齊, 你可能是某個地方做錯了囉.


    2004年05月01日 14:21

  18. Cindy 說:

    我在內文依樣劃壺蘆, 可是文字會出現在圖片最右下方, 沒有辦法讓文字和圖片齊頭. 請問除了用table解決, 還有其他方法嗎? 我看有些人沒用table, 也能讓文字和圖片齊頭. 謝謝回答囉~! ^^/


    2004年05月01日 11:46

  19. jeph 說:

    這種情形通常是你的圖片比文章的本文還長. 所以,如果你的本文文字不多的話, 最好不要用文繞圖, 因為下一篇的文字也繞上來了.


    2004年03月26日 01:47

  20. Eliza 說:

    為什麼我加入文繞圖之後,版面就亂掉了呢?
    下一篇的文字會上來"打架"
    還請釋疑


    2004年03月25日 17:16

留言