fbpx
WordPress 黑色星期五活動

WordPress 排版教學:如何在文章建立文字圍繞圖片 (文繞圖) 的效果?

文繞圖 (英文名稱:Wrap text around a picture in Word) 是傳統文書工具很常見的排版方式之一,在書籍報刊也是標準的制式,這篇我們簡單示範在「區塊編輯器」和「傳統編輯器」實作文繞圖的操作,新手一學就會上手。這可以讓你的文章排版變得更多樣化,也是出版印刷界必修課。但在 HTML 的設定裡,並沒有像設計或文書軟體般有很多變化可以選擇,但足夠應付有餘。

區塊編輯器模式:文字圍繞圖片

圖片「左方」+ 文字段落「右方」效果

聲夢傳奇|第8集|姚焯菲 Chantel《戀愛預告 》歌詞:愛神也有苦惱 問他可知道,看看我的心 似是醉了櫻桃 人如醉了櫻桃,愛情常向窗邊低訴 恨他不知道,但願今夕在情人夢裡 寫下癡心記號,窗外天空每朵白雲 滿寫醉人曲譜,夜空星星向月兒說 甜蜜是這戀愛預告,愛情常向窗邊低訴 恨他不知道,但願今夕在情人夢裡 寫下癡心記號,窗外天空每朵白雲 滿寫醉人曲譜,夜空星星向月兒說 甜蜜是這戀愛預告,窗外天空每朵白雲 滿寫醉人曲譜,夜空星星向月兒說 甜蜜是這戀愛預告。聲夢傳奇|第8集|姚焯菲 Chantel《戀愛預告 》愛神也有苦惱 問他可知道,看看我的心 似是醉了櫻桃 人如醉了櫻桃,愛情常向窗邊低訴 恨他不知道,但願今夕在情人夢裡 寫下癡心記號,窗外天空每朵白雲 滿寫醉人曲譜,夜空星星向月兒說 甜蜜是這戀愛預告,愛情常向窗邊低訴 恨他不知道,但願今夕在情人夢裡 寫下癡心記號,窗外天空每朵白雲 滿寫醉人曲譜,夜空星星向月兒說 甜蜜是這戀愛預告,窗外天空每朵白雲 滿寫醉人曲譜,夜空星星向月兒說 甜蜜是這戀愛預告。

文字段落「左方」+ 圖片「右方」效果

聲夢傳奇|第5集|姚焯菲 Chantel《逃生門 》歌詞:大門被你緊緊鎖上那一下,情緒像快將崩潰失去知覺吧,旁人的祝福或慰問比咒語可怕,提起他都叫你陰影 惡化任你自閉得不敢肯光,擋住了落霞,求生那意欲都忘記了嗎,流眼淚被同情想威脅你伴侶歸家,誰人聽見也多麼的笑話逃生出口的一線光,流光了眼淚便能看,囚犯靠你親手釋放,度過了春風秋雨便無事幹,假設再絕望分手已成定案,甜蜜與感動很難忘 怎遺忘,逃離他溫馨的眼光 別再看 別再望大門外有東西使你更牽掛,除了伴侶都應該擁有工作吧,紅茶的馥郁麵包的香氣滿足嗎,尋開心方法太多種 對吧為紀念太多犧牲太久哀悼那落霞,誰詩化眼淚竟能夠種花,微笑就是門匙打開那困住你關卡,來臨派對要高聲講笑話逃生出口的一線光,流光了眼淚便能看,囚犯靠你親手釋放,度過了春風秋雨便無事幹,假設再絕望分手已成定案,甜蜜與感動很難忘,

材料準備?我們需要使用「圖片」和「段落」區塊

WordPress 排版教學:文章如何建立文字圍繞圖片 (文繞圖) 的效果?

文字圍繞圖片只需要使用 WordPress 內建的基礎區塊就能達成,並不需要額外安裝任何其他的「區塊外掛」和「頁面編輯器」,你可以在區塊的搜尋框輸入「圖片 Image」或「段落 Paragraph」即可找到這次教學適用的區塊功能。

【01】圖片區塊 Image Block

圖片 (Image) 的來源有 3 種,你可以上載自己電腦裡的圖片,也可以在網站裡選取已有的圖片,最後一種是透過「外部的圖片連結」來達成。

【02】段落區塊 Paragraph Block

段落 (Paragraph) 是文章最重要的組成部分,也是預設的區塊格式,你可以任何輸入文章內容,按「Enter 回車鍵」可以斷行,當中可以選擇一些基礎的格式化,例如對齊模式、粗體和超連結等等。

如何調整圖片區塊的大小?

透過區塊編輯器新增圖片後,每當您點擊「圖片」元素,在圖片右邊個下方會出現能夠讓你調整圖片大小的控制點,你可以拉動控制點往左或右方移動,來控制理想的大小和感覺。在文章編輯介面的右方也有針對圖片區塊的調整,你可以取得更仔細和完整的參數調整。

文字圍繞圖片的出現條件?

WordPress 排版教學:文章如何建立文字圍繞圖片 (文繞圖) 的效果?

【01】新增一張圖片在上方

預設情況圖片 (Image) 會自動填補整個區域,除非你的圖片尺寸太少,如果要達成文字圍繞圖片的效果,圖片必定不能滿版,我們可以手動調整圖片的寬度至 50% 左右,留出空白的空間讓之後的文字段落來填滿。

【02】新增段落在內文區域

段落 (Paragraph) 的部分要注意,字數不能太小,平均 300 至 500 以上會取得較佳的表理,太短的話可能讓人感覺到很空洞。當上方的圖片調整了圖片的「向左對齊」或「向右對齊」,段落就會自動往上填充。

文字圍繞圖片的關鍵是「對齊方式」

WordPress 排版教學:文章如何建立文字圍繞圖片 (文繞圖) 的效果?

【01】圖片對齊選項

圖片對齊選項預設是「置中對齊」和填滿版面,這個設定「無法觸發文字圍繞圖片」的排版效果。

【02】圖片「靠左對齊」模式

選取後可以得到圖片「左方」+ 文字段落「右方」效果,你可以設定完後,再慢慢調整圖片的寬度,文字段落會自動填滿空出的空間。

【03】圖片「靠右對齊」模式

是靠左對齊效果的相反,端看站長的要求,你可以反覆使用靠左和靠右,最少讀者不會看得太沉悶。

傳統編輯器模式:文字圍繞圖片

WordPress 排版教學:文章如何建立文字圍繞圖片 (文繞圖) 的效果?

傳統編輯器相對來說功能就相對貧乏,但由於文繞圖是非常簡單的排版功能,和區塊編輯器的出現圖片相同,前題是圖片和文字的並列和比例,加上圖片需要使用「向左對齊」或「向右對齊」,圖片的大少不能滿版,推薦圖片寬度設為 50% 左右。

傳統編輯器:新增圖片和段落

WordPress 排版教學:文章如何建立文字圍繞圖片 (文繞圖) 的效果?

【01】新增圖片媒體

傳統編輯器的所有圖片都需要透過這個按扭來插入多媒體資料,點選任意一張圖片內容即可

【02】圖片在上方

由於圖片和文字在相同的區域,這不同於「區塊編輯器」的區塊理念。插入圖片後,請減少圖片的寬度,觸發圖繞文的效果。

【03】文章段落在下方

如果上方選取了合適的靠左對齊效果,文章段落會自動補上去填充空白的部分。

傳統編輯器:設定圖片「向左對齊」或「向右對齊」

WordPress 排版教學:文章如何建立文字圍繞圖片 (文繞圖) 的效果?

【02】圖片「靠左對齊」模式

選取後可以得到圖片「左方」+ 文字段落「右方」效果,你可以設定完後,再慢慢調整圖片的寬度,文字段落會自動填滿空出的空間。

【03】圖片「靠右對齊」模式

是靠左對齊效果的相反,端看站長的要求,你可以反覆使用靠左和靠右,最少讀者不會看得太沉悶。

傳統編輯器:文字圍繞圖片設定成功!

WordPress 排版教學:文章如何建立文字圍繞圖片 (文繞圖) 的效果?

承接文章開首所說,這是非常基礎的技巧,也是相對傳統的使用方式。由於現代的設計允許更多花樣和自由奔放的排版方式,慢慢地不少新手不知道有這種設計排版的技巧,傳統不一定代表不好和不專業,透過簡簡單單的排版和豐富的文章內容,一樣可以讓你變成出色的部落格主。

常見問題 FAQ

區塊編輯器支援文字圍繞圖片功能?

可以,操作非常簡單,相比傳統編輯器來說,可以調整的參數和設計更豐富。前題是圖片和文字的並列和比例,加上圖片需要使用「向左對齊」或「向右對齊」,圖片的大少不能滿版,推薦圖片寬度設為 50% 左右。

傳統編輯器支援文字圍繞圖片功能?

可以,傳統編輯器相對來說功能就相對貧乏,但由於文繞圖是非常簡單的排版功能,和區塊編輯器的出現圖片相同,前題是圖片和文字的並列和比例,加上圖片需要使用「向左對齊」或「向右對齊」,圖片的大少不能滿版,推薦圖片寬度設為 50% 左右。

參考資料和引用文獻:

學員人數:5,500+ 人(持續增加之中)

中文語系的 WordPress - Facebook 社團列表

發表您的留言

加入我們的 Facebook 學習社團免費的教學資源、交流和解決問題!

是否覺得孤軍作戰和學習很無趣味?
何不加入學習社團和其他
熱愛網站設計的朋友交流?
分享您建站的喜與樂
學習最新的知識和技術