讓訪客能自行放大網頁文字，提升友善閱讀體驗

閱讀網路文章時，不免會遇到某些網頁的預設文字過小，不但看起來不舒服，也加重了眼睛的負擔。過去曾介紹過 Chrome 的外掛「讓 Chrome 只放大縮小文字(Zoom Text Only 套件)」，可以單獨調整文字的大小，讓我們閱讀文章時更舒服。

但並非每個訪客都會安裝這樣的套件，如果你是站長的話，想要打造友善的閱讀環境，最好能另外提供「放大文字」這樣的按鈕，讓訪客自行調整文字尺寸，就能照顧到銀髮族、視力不佳、或需要維護視力的族群。

本篇會提供一個「調整文字尺寸」的按鈕，以下先說明設計原理，想直接安裝可跳至「二、安裝程式碼」。

點此看範例網頁

(圖片出處: pexels.com)

一、按鈕的設計構想

1. 按鈕數量

這個功能有多種設計方式，例如：

• 三顆按鈕：一個放大，一個縮小，一個恢復原尺寸。
• 兩顆按鈕：一個放大，一個縮小。
• 一顆按鈕：循環切換

如果想安裝三個按鈕的功能，可參考這篇「Blogspot 文章文字 一鍵調整大小」。

製作這個功能時考量到 WFU BLOG 的版面設計，因為找不出適合多顆按鈕的擺設方式，最後為了節省空間，採取了一顆按鈕的設計方式。


2. 循環切換

由於只有一顆按鈕，不能讓文字無限放大，必須設定一個極限值，超過時回到原始大小，才能讓一顆按鈕做到所有的事，包含放大與縮小。


3. 儲存設定

最後是儲存設定值，讓讀者下次開啟網頁時，能夠讀取設定值，避免每次都要重新按按鈕。

舊瀏覽器只能使用 cookie 來儲存設定值，操作不方便；現在 HTML5 支援了新的儲存方式「localStorage」，操作上直覺又簡單，不過缺點就是舊瀏覽器不支援。

從很久以前 WFU 就決定放生 IE8 以下的訪客，可以讓網頁設計工作更簡化。反正 IE8 以下的市佔率只會越來越少，相信完全被消滅的一天很快就會到來。

二、安裝程式碼

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

安裝方式以 Blogger 為例，請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<!--調整文字大小-->
<script>
//<![CDATA[
$(function() {
var postBody = ".post-body", // 文章區塊
minSize = 16, // 最小文字 px 值
maxSize = 32, // 最大文字 px 值
addSize = 4, // 每次點擊按鈕增加的尺寸 px 值
size = parseInt(localStorage.postFontSize) || minSize;
$(postBody).css("font-size", (localStorage.postFontSize || minSize) + "px");
$("#enlarge_font_size").click(function() {
size += addSize;
size = size > maxSize ? minSize : size;
localStorage.postFontSize = size;
$(postBody).css("font-size", size + "px");
});
});
//]]>
</script>
<!-- Designed by WFU BLOG-->

<style>
/*調整文字大小*/
#enlarge_font_size {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
color: #777;
font-size: 16px;
text-align: center;
background: #ddd;
border: 1px solid #bebebb;
border-radius: 15%;
cursor: pointer;
}

#enlarge_font_size:active {
position: relative;
top: 1px
}

#enlarge_font_size:hover {
box-shadow: 0 0 10px #546893
}
</style>
第一行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

修改參數：

• postBody：紅色字串如果是 Blogger 官方範本就不用變更；如果要修改為別的位置，請將字串改為 "." + class 名稱、或是 "#" + id 名稱。
• minSize、maxSize、addSize 這三個參數，請按照綠字註解修改數字即可。
• 其他 style 標籤的內容，如果熟悉 CSS 可自行修改樣式。

三、擺放位置

接著在範本中，將以下「調整文字按鈕」的 HTML 碼放到任何你想擺放的位置：

<span id="enlarge_font_size" title="調整文章文字大小">A+</span>
然後儲存範本即可。

如果不清楚要放在哪裡的話，可參考「Blogger 範本﹍(3) 文章及留言區塊的程式碼」系列文。

想要先看效果的話，可前往範例網頁：

點此看範例網頁

更多實用工具：

• 本站使用的 Blogger hack 及工具整理