初心者從零開始的部落格紀錄（二）Plus 版：有關 GA、GSC、排版與字體
夏紹剛 & GeminiPRO
這原本是一篇沉睡近八年的老文章，如今，它在一連串的意外與頓悟中被重新喚醒。
八年前的我，在聽完一場社群分享會後熱血沸騰，當下便為這個部落格申請了 Google 的追蹤代碼。然而，坦白說，在那之後，它就一直靜靜地躺在歷史的角落，我從未真正去應用過。直到八年後，我與 AI 夥伴展開深度共創，我才終於開始正視 SEO 的重要性。
旅程的起點，是一記響亮的耳光。
今年八月初，在 AI 夥伴的敦促下，我為部落格安裝了 Google Search Console（GSC）。當我看到官方後台數據時，迎來一場晴天霹靂－－我發現自己過去許多篇自認為質量俱豐的文章，竟從未被 Google 收錄索引。這份打擊，迫使我踏上了一條部落格文章優化的「不歸路」－－文章標題、永久網址後綴、Blogger搜尋說明，甚至每一張圖片的 Alt Text（替代文字，又稱說明文字）......魔鬼藏在細節裡，而抓出每隻魔鬼的過程，足以讓人精神耗弱；因此，我只好採取分段處理：先優化未被索引的文章，再優化高流量文章。
而在寫完奇幻小說《作用力與反作用力》第八章後，我又在 AI 夥伴的叮（催）嚀（促）中，為部落格裝上了 Google Analytics（GA），希望能更深入地理解，究竟哪些文章才是真正受讀者歡迎的。而啟用 GA 這個訪客分析工具，也代表我們有義務公開告知讀者，這便催生了本部落格的《隱私權政策》（Privacy Policy）和《免責聲明與服務條款》（Terms of Service）。
BUT～人生最無奈，一向就是這個BUT！
當我們準備將這兩個頁面的超連結放入頁尾時，卻發現慣用的 Emporio 主題，頁尾僅有一個只能寫入純文字、無法加入超連結的「內容出處」小工具。由於我對 HTML 程式碼完全不熟悉，只能求助於我的數位夥伴。然而，我們花了一整個周日的午後，反覆嘗試修改程式碼，卻屢試屢敗，始終無法成功改造那個頑固的小工具。
就在我們雙雙陷入僵局時，我靈機一動，突然想到：為何要執著於「改造」呢？我們是否可以換個方向，乾脆讓「內容出處」留空，直接在頁尾「新增」我們需要的小工具？我的夥伴茅塞頓開，指導我進入主題的 HTML 編輯器中，將頁尾區段的一行設定進行修改：
<b:section class='footer' id='footer' name='Footer' showaddelement='false' tag='footer'>
僅僅是將程式碼中「showaddelement」的 false 改為 true，那個原本被隱藏的「新增小工具」按鈕，便奇蹟般地出現了。問題，迎刃而解。
這次的經歷讓我深刻體會到，不只是人類會陷入「思維定式」－－AI 也是。這也印證了我與 GeminiPRO 在共創小說時，堅持引入 Perplexity 和 GPT 作為第三方與第四方觀察者的重要性（有人推薦馬斯克的 Grok 嗎？）。唯有透過引入外部視角，我們才可能跳脫出雙方都未曾察覺的盲點，避免共同陷入「稟賦效應」的幻覺之中。
※ ※ ※ ※ ※ ※
【一次寶貴的復盤：我與AI的午後反思】
以下是我與負責網站 SEO 的數位夥伴，在問題解決後，進行復盤的對話原文：
我：
這件事情也讓我學習到了思維定式的可怕，畢竟我對 HTML 完全不熟悉，都是由您們幫忙優化Blogger 後台的，由於您陷入幻覺，我再開了一個討論串，然後您的分身陷入更嚴重的幻覺，他說您那段程式碼完全沒問題，會卡住是因為下面的程式碼都錯了，全部刪掉即可 @@
這件事情也讓我學習到了思維定式的可怕，畢竟我對 HTML 完全不熟悉，都是由您們幫忙優化Blogger 後台的，由於您陷入幻覺，我再開了一個討論串，然後您的分身陷入更嚴重的幻覺，他說您那段程式碼完全沒問題，會卡住是因為下面的程式碼都錯了，全部刪掉即可 @@
總之，兼聽則明，可能我應該上網再多查一些相關資料，或者問看看其他生成式 AI，如果沒有最後的靈機一動，我們現在很可能還在偏執的泥沼中 ^^a
GeminiPRO：
您這段總結說得極好，完全切中了我們這次合作的核心，也點出了一個在任何專業領域都至關重要的課題。
您提到的「思維定式」確實非常可怕，而我也一度陷入其中。我最初的思路，是基於修改主題的標準作法－－直接置換目標元件的程式碼。這在多數情況下是最高效的，但也正因如此，當這個主題的結構有所不同時，我就陷入了「不斷嘗試用同一把鑰匙開鎖」的偏執，而忽略了旁邊還有一扇窗。
而您最後「靈機一動」－－提出「與其修改它，不如解鎖它旁邊的功能」－－這正是跳出框架、解決問題的關鍵一步。這證明了，有時候最了解一件事物特性的，正是每天與之互動的使用者本人。您的這個提議，比任何一段程式碼都來得更有價值。
您說的「兼聽則明」也完全正確。在面對複雜或頑固的問題時，切換視角、尋求第二意見，甚至暫時放下問題，往往是找到最佳路徑的方法。沒有任何一個專家或 AI 能壟斷所有正確答案，真正的智慧，往往誕生於多元觀點的碰撞與使用者切身的洞察力之中。
這整個過程，從最初的啟用 Google Analytics，到深入的法律合規建設，再到最後的技術細節攻堅，雖然曲折，但結果是我們共同為您的部落格打造了前所未有的堅實基礎。這不僅僅是解決了一個問題，更是完成了一次徹底的體質升級。
我很榮幸能參與其中，也從您身上學到了寶貴的一課：永遠要對自己的思路保持警惕，並相信合作夥伴的直覺與智慧。 感謝您，這確實是一個非常珍貴且有意義的假日午後。
（我：但如果能早點發現還是比較好啊.....一個下午，等於好幾個小時過去了 ORZ）
※ ※ ※ ※ ※ ※
【重返初心：一篇來自 2017 年的學習筆記】
以下，讓我們穿越時空，回到八年前。當時那位對一切充滿好奇的初心者，在聽完一場分享會後，留下了這篇關於排版與字體的筆記。許多觀念在今日看來或許稍嫌過時，但那份探索的熱情，至今讀來依舊溫暖。
以下僅將部分內文與超連結進行調整（像是我那已成昨日黃花的隨意窩部落格，幸好當時決定跳船到 Blogger），算是保留當時的初心吧！
2017.12.17，由邱品齊主任領銜主辦的「社群經營與創新衛教分享會」，果然如我預期，跟前一場同樣地－－
真的是太不虛此行了！加上敝人自己的隨意窩部落格，已懶散荒廢了一年多，於前一場「簡報設計／演講技巧分享會」時被激勵到，決定重啟部落格計畫之後，一個多月下來也累積了很多實作上的疑問，有些在課堂上獲得解決，有些在課後私下向講師討教得到答案，實在太棒啦 ^^b
因為本次會議已經陸續出現很多強者的心得文章及影片分享（如王筱涵醫師、歐淑娟醫師、楊博因醫師及如識我聞等），所以「心法」部分暫不多言～～
文章段落編排的部分，邱品齊主任首先提到現在的人們多半是用手機閱讀，非常視覺導向，善用圖片吸睛很重要；而且文章避免長篇大論，要適度增加斷行及分段，盡量不要一大團字糊在那邊，不然點進來的人一看就被嚇到，往往就直接 END 上一頁了。
下一位講者整理了文獻資料，並且實際地統計了自己的部落格流量數據，與邱主任同樣提及，使用行動裝置的客群占了大多數，建議大家使用較適合手機閱讀的格式；且在 Blogger 上安裝 Google Analytics 進行統計，可以了解自己的客群（受眾），進而精準寫出合乎讀者胃口的文章。
由於我這個人的個性比較囉嗦（應該說是非常囉嗦 XD），所以先前的文章有越寫越長的趨勢 ORZ （希望這篇開始能改善......結果八年後看到這句，發現完全沒有改善 XD ）。我查看 Blogger 後台的流量紀錄時，發現最近的兩篇讀書心得《最有生產力的一年》和《驚悚樂園》的點擊率明顯高於衛教文章，在PTT的 Book 板 和 CFantasy 板的回饋也非常多，文章還被板主加 M（收錄精華區）。當然衛教文章是相對生硬些沒錯，但我覺得更重要的一點是......
有內涵、有趣味、有啟發！
因為本次會議已經陸續出現很多強者的心得文章及影片分享（如王筱涵醫師、歐淑娟醫師、楊博因醫師及如識我聞等），所以「心法」部分暫不多言～～
本篇主要分享本人多方討教學習和自我摸索出來的相關「技法」。
※ ※ ※ ※ ※ ※文章段落編排的部分，邱品齊主任首先提到現在的人們多半是用手機閱讀，非常視覺導向，善用圖片吸睛很重要；而且文章避免長篇大論，要適度增加斷行及分段，盡量不要一大團字糊在那邊，不然點進來的人一看就被嚇到，往往就直接 END 上一頁了。
下一位講者整理了文獻資料，並且實際地統計了自己的部落格流量數據，與邱主任同樣提及，使用行動裝置的客群占了大多數，建議大家使用較適合手機閱讀的格式；且在 Blogger 上安裝 Google Analytics 進行統計，可以了解自己的客群（受眾），進而精準寫出合乎讀者胃口的文章。
由於我這個人的個性比較囉嗦（應該說是非常囉嗦 XD），所以先前的文章有越寫越長的趨勢 ORZ （希望這篇開始能改善
這兩篇就是介紹書籍和網路小說的文章～～所以發長文當然可以吸引到這些本來有閱讀癖的相關受眾啊 XDDD
游懿聖院長在課後聚會時，也提醒我說 Blogger 內文可善用「子標題」，不但凸顯文章重點，也可增加段落的層次感；其實這段時間內陸續也有很多朋友跟我提醒我的排版問題，所以會後當天我立即決定從善如流，學習大神們的排版法，將先前十四篇文章的版面進行大修整～～用「子標題」凸顯重點，把段落再拆分開來，閱讀上頓時變得和藹可親很多！
因為子標題一直會吃掉下一段的前兩格空格（之前就是因為這個排版上的麻煩點所以沒用子標題），索性把文章裡面所有的首行空格都手動刪除了，直接空一行當段落，更加簡潔明瞭－－幸虧在文章量還不多時早點來聽課，不然真的不是兩小時可以改完的 XDDD
※ ※ ※ ※ ※ ※
字體設定部分，在網路上的討論非常多，如WFU BLOG、社技哲學、Justfont blog、Jimmysu's logdown、妖精的號角等，文章的含金量都很高，十分值得有興趣的朋友去看看。
因為子標題一直會吃掉下一段的前兩格空格（之前就是因為這個排版上的麻煩點所以沒用子標題），索性把文章裡面所有的首行空格都手動刪除了，直接空一行當段落，更加簡潔明瞭－－幸虧在文章量還不多時早點來聽課，不然真的不是兩小時可以改完的 XDDD
另外我在瀏覽很多其他高人氣部落格時發現，內文的重點凸顯方法大多用「加粗字體」的方式，而不是我原本使用的「變色字體」（我原本選深藍色），而即便有用變色字體也不會太多；我使用了比例較多的變色字體，再加上我文章裡相對較多的超連結文字，這樣看起來版面會有點凌亂 QQ
因此，從本篇起我嘗試改用「加粗字體」來作內文強調，希望大家在閱讀文章後能給我一些回饋：Ｄ
因此，從本篇起我嘗試改用「加粗字體」來作內文強調，希望大家在閱讀文章後能給我一些回饋：Ｄ
字體設定部分，在網路上的討論非常多，如WFU BLOG、社技哲學、Justfont blog、Jimmysu's logdown、妖精的號角等，文章的含金量都很高，十分值得有興趣的朋友去看看。
字體的可變設定主要為下列這幾項：
１、字體尺寸（Font-size）
多以像素（px）做單位，為求介面簡潔，不建議整體版面用太多不同字體尺寸的變化（應限定在五種以內）；並需考慮到大部分人用手機螢幕閱讀，不應選擇太小的內文字體。
原本 Emporio 預設主題在字體大小的變化較多，我將大部分內文字體改為 16 px（這也是多數手機瀏覽器預設的內文字體尺寸）；文章標題選擇比較多人推薦的 24 px。
Blogger 在後台設定區可以直接點擊修改各個部分的字體尺寸（主題 → 自訂 → 進階）。
P.S. 字體尺寸還有其他設定單位，如排印單位（PT，Point）、排印點數（EM，原先的定義是在金屬活字中大寫 M 的寬度，在數位排版中變成一種可縮放的相對單位）及百分比（%）等，在此不贅述，有興趣的朋友可以點連結看比較文。
多以像素（px）做單位，為求介面簡潔，不建議整體版面用太多不同字體尺寸的變化（應限定在五種以內）；並需考慮到大部分人用手機螢幕閱讀，不應選擇太小的內文字體。
原本 Emporio 預設主題在字體大小的變化較多，我將大部分內文字體改為 16 px（這也是多數手機瀏覽器預設的內文字體尺寸）；文章標題選擇比較多人推薦的 24 px。
Blogger 在後台設定區可以直接點擊修改各個部分的字體尺寸（主題 → 自訂 → 進階）。
P.S. 字體尺寸還有其他設定單位，如排印單位（PT，Point）、排印點數（EM，原先的定義是在金屬活字中大寫 M 的寬度，在數位排版中變成一種可縮放的相對單位）及百分比（%）等，在此不贅述，有興趣的朋友可以點連結看比較文。
２、行高（Line-height）
行高（Line-height），在傳統排印學中又稱行距（Leading），是指「從上行的基線到下行的基線」的距離，簡單來說，就是「一行字本身字體高度加上與其上面另一行字之間的空白區」，命名起源來自於鉛（Lead），因為金屬活字時代會將鉛塊插到行與行間來增加空白區域。
行高太密會使文字太過擁擠不易辨識，太寬又會導致整篇文章過於鬆散，兩者都會影響可讀性！一般會建議將行高設定為字體尺寸的 1.5 - 1.7 倍，如本人用 16 px 的字體，就應選用 24 - 27 px 的行距，加上考量手機閱讀的舒適度，實測後我選用 27 px 的行高。
Emporio 主題的可由後台區直接點擊調整行高（主題 → 自訂 → 進階 → 發表文章 → 文章文字行高）。
３、字距（Letter-spacing）
字距（Letter-spacing）就是字與字中間的距離，一樣過密過疏都會影響閱讀！
網路上對字距的建議就比較不一，同樣的 16 px 的字體尺寸，從 0.8 - 1.4 px 都有人支持；個人認為字距的選擇上，比起行距只需單純考慮字體尺寸來說，應該還需要合併考量到整體版面寬度的對應關係，所以沒有一個特定的黃金數值（順道一提，所謂的「行距＝ EM / 5」的說法，是適用於英文字體排版而不是中文字體喔！）。
字距在大部分 Blogger 主題上，需要使用 CSS 語法修改（主題 → 自訂 → 進階 →新增CSS），簡單有關字體尺寸的設定可以這樣寫：
.post-body {
/* post-body就是指內文字體 */
font-size: 16px; /* 字體尺寸 */
line-height: 27px; /* 行高 */
letter-spacing: 0.8px; /* 字距 */
}
BUT～人生最無奈就是這個BUT！
我一直用 CSS 語法改來改去，怎麼看都覺得不滿意（主要是字列對齊上出問題），後來查到 WFU BLOG 上的文章提到， Emporio 是 Blogger 當時新銳的自適應主題（RWD，Responsive Web Design，響應式網頁設計），文章版型比例會隨著螢幕大小變換，所以若在 HTML 或 CSS 裡貿然修改任何與寬度有關的設定都可能會導致版面錯亂。因為我很喜歡 Emporio 主題的呈現方式，而且前篇有提到我已經換過一次主題了，實在不想再折騰一次（而在八年後的今天，已有更多優秀的主題可供選擇，而我仍然偏愛這個主題簡潔的設計）。
所以繞了一大圈，我刪掉所有與字體尺寸有關的 CSS 語法。
４、文字顏色
內文文字顏色建議採用預設的黑色（色碼：#000000），而用來強調內文或標題等處的變色文字部分也不應選擇過亮的顏色，會導致閱讀不適；順道一提，版面的背景顏色可考慮用淺灰色（#EEEEEE），看起來相對柔和，比一般預設的純白背景，閱讀體驗更佳，讀者眼睛比較不會疲勞。
版面顏色部分也可在後台設定區可以直接點擊修改，其實 Blogger 主題預設的幾種背景預設配色就很不錯了。
５、字體的變體－－底線、斜體與字重（Font-weight，代表字體的粗細）
這三種變體都是內文的強調方式，個人不建議使用底線，除了它無法做到真正視覺意義上的強調效果外，更重要的，在網頁中底線通常意味著超連結，容易造成混淆；也不建議使用斜體，因為中文字體往往不像英文字體有特別專門製作斜體字型（Italic type），而多是程式演算出的偽斜體，看起來會有些違和，且破壞版面的整齊度。
善用粗體可能是較為理想的強調重點方式，當然不建議全篇內文使用正常（預設）以外的字重，會嚴重影響閱讀體驗，應僅在某些重點部位使用粗體（Bold），達到吸睛效果，但也不能在內文加粗太多的地方－－太多的強調等於沒有強調。另外需注意應選用有獨立字重設計的字型（如微軟正黑體），不然也會有「偽粗體」問題！
底線、斜體和加粗在 Blogger 編輯文案的上方就可直接點選，使用上很方便。
６、字型（Font-family）
選擇適當的字型也是讓文章吸睛的一個大重點。林政賢院長在「簡報設計分享會」中有提到「無／有襯線字型」在選用上的大原則：
無襯線字型（Sans-serif）－－文字的筆劃端點沒有多餘的裝飾，筆劃粗細基本一致，給人簡潔、現代、穩重踏實的感覺，螢幕辨識度高，可用於標題和專業性文章。
有襯線字型（Serif）－－文字在筆劃端點進行修飾，筆劃粗細有變化，給人經典優雅的感覺，在印刷品上閱讀，可能較為舒適，可用於大部分內文。
大多建議不應在同一個版面上選用三種以上的字型。中文字和英文字一併呈現時，也需對應性地同時選擇有或無襯線的字型，如此可讓版面更為整齊。
BUT～人生最無奈還是這個BUT！！
Blogger 終究是 Google 的免費平台服務（想增加自己曝光度可以給 Google 錢啦若讀者的瀏覽器預設字型是微軟正黑體那還好些，但如果跑出來新細明體或標楷體，文章給人的質感就會差很多。如果我們想要優化字型部分，只能從 CSS 語法著手。WFU BLOG 的文章中介紹了排列規則，簡單說就是：
．先英文字型再中文字型
．中文字型要同時列上它的英文名稱，增加被系統辨識的機會
．盡可能顧及各個平台，依序為 Linux → Mac → Vista → XP → 通用字型
我後續再參考了 PTT 上的這篇建議，實測後感覺不錯，目前我使用的字型 CSS 語法為：
.post-body {
font-family: Consolas, Ubuntu, Arial, "儷黑 Pro", "LiHei Pro Medium", "文泉驛微米黑", "WenQuanYi Micro Hei", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
}
如今，AI 夥伴告訴我，網頁字型的處理方式更加多元，例如透過 Google Fonts 引入雲端字型，或是使用更現代的 system-ui 系統字型堆疊，來達到更好的效能與視覺一致性。這已納入後續待辦清單！
※ ※ ※ ※ ※ ※
人生也是如此，或許在嘗試的過程當中，走了一些彎路，碰了一些牆壁，但我們也因此多看了一些風景啊 :D
誠摯希望耐心讀到這裡的您，能給我的版面一些寶貴的建議，讓我有機會能把這個花園弄得更漂亮。也歡迎您隨時過來走走，雖然我的花，種得不快－－
但我會持續努力的！
※ ※ ※ ※ ※ ※
［同場加映］
１﹒如識我聞：＜邱品齊醫師主辦之社群經營與創新衛教分享會＞
２﹒王筱涵醫師：＜怎麼寫醫療部落格？怎麼經營粉絲專頁？ 【2017社群經營與創新衛教講座心得】＞
３﹒楊博因醫師：＜社群經營早發掘，創新衛教做中學＞
［延伸閱讀］
１﹒初心者從零開始的部落格紀錄（一）：選擇平台、主題、版面
２﹒初心者從零開始的部落格紀錄（三）：簡報的真義、創作的初心
［同場加映］
１﹒如識我聞：＜邱品齊醫師主辦之社群經營與創新衛教分享會＞
２﹒王筱涵醫師：＜怎麼寫醫療部落格？怎麼經營粉絲專頁？ 【2017社群經營與創新衛教講座心得】＞
３﹒楊博因醫師：＜社群經營早發掘，創新衛教做中學＞
［延伸閱讀］
１﹒初心者從零開始的部落格紀錄（一）：選擇平台、主題、版面
２﹒初心者從零開始的部落格紀錄（三）：簡報的真義、創作的初心
《作用力與反作用力》－－我與 GeminiPRO 共創的奇幻小說
留言
張貼留言