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

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

A+
閱讀網路文章時,不免會遇到某些網頁的預設文字過小,不但看起來不舒服,也加重了眼睛的負擔。過去曾介紹過 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) 文章及留言區塊的程式碼」系列文。

想要先看效果的話,可前往範例網頁:



更多實用工具:

2 則留言:

  1. 謝謝你介紹了"localStorage"這個參數, 日後多一個工具可以使用.
    and 多謝你, 再次連結介紹了我的網誌. 🙂

    回覆刪除
    回覆
    1. 不客氣~~這功能很久以前就有計畫要進行,晚寫也有晚寫的好處,可以使用新的網頁技術 XD

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP