漂亮且醒目的文章段落外框(Box)設計

20240924

撰寫部落格除了擁有優質的內容是不夠的,如何將這些內容排版成更易於讀者閱讀同樣至關重要。良好的文章排版不僅能提升閱讀體驗,還能有效傳達作者的核心訊息,吸引並留住讀者。這次的排版教學提供的技巧,將幫助你創造出既美觀又易讀的排版樣式。

影片教學

傳統的文章段落外框

在部落格寫作中,許多作者為了讓重要段落更加醒目,經常使用段落引言功能(通常表現為兩個反向的逗號)來框住文字。然而,這種做法實際上並不符合網頁設計的最佳實踐。

段落引言的本意是用於引用他人的話語或其他來源的文字,而非強調自己的內容。濫用這個功能不僅可能混淆讀者,還可能影響搜尋引擎對網頁內容的理解。

雖然使用引言按鈕操作簡便,但這種方法存在以下問題:

  1. 語義不正確:違背了 SEO 的原本用途。
  2. 樣式遭限制:一個網站通常只能設定一種引言樣式。
  3. 靈活性不足:無法為不同類型的內容(如美食推薦、旅遊建議、優惠資訊)設計獨特的視覺效果。

為了解決這個問題,更好的方法是使用自定義的 CSS 樣式,這樣就可以針對上述三種不同類型的內容套用各自專屬的視覺效果了。

然而,對於不熟悉程式碼的部落客來說,每次都要切換到「程式碼」模式來套用 CSS ,反而會弄巧成拙。

金城事務提供的文章段落外框

如何有效突出重要內容同時保持排版美觀,一直是許多部落客關注的問題。金城事務所為提供了一個解決方案。

運用了 CSS 設計文章段落外框,並結合了簡單的程式設計,讓套用樣式變得輕而易舉。這個方法不僅美觀實用,更大大提升了寫作效率。

設計了三種不同用途的文章段落外框樣式,每種樣式都有獨特的視覺效果,能夠立即吸引讀者的注意力。在撰寫文章時,只需要對想要呈現特定效果的文字做出簡單的標記,就能自動套用對應的樣式。

  1. [優惠票券] 中間置入你想要展示的文字或段落 [/優惠票券]
  2. [其他美食推薦] 中間置入你想要展示的文字或段落 [/其他美食推薦]
  3. [其他景點推薦] 中間置入你想要展示的文字或段落 [/其他景點推薦]

優惠票券 中間置入你想要展示的文字或段落

其他美食推薦 中間置入你想要展示的文字或段落

其他景點推薦 中間置入你想要展示的文字或段落

小叮嚀:想瞭解更詳細的操作,建議觀看影片。

功能申請

如果你是金城事務所的客戶,想要使用這一套文章段落外框(Box)設計,請直接聯繫我們的線上客服系統,告知想安裝美美的文章外框,並告訴我們希望呈現的標題文字,與及外框的顏色,顏色要給我 #000000 這種代碼喔

延伸閱讀:NIPPON COLORS:日本傳統色票網站

金城老師觀點

金城事務所一直秉持著幫助部落客們用最簡單的方式完成最複雜的工作,成功地將複雜的 CSS 語法轉化為簡單直觀的操作,使得即使是程式基礎較弱的部落客也能輕鬆駕馭。這個設計帶來提高寫作效率排版的一致性寫文的靈活性提升閱讀體驗等多種效益。

參考資料

  1. 簡單的 BOX 樣本 – 附帶標題的外框
  2. 簡單的 BOX 樣本 – 附帶底色的外框