調整網頁字體大小的按鈕

上篇提到在部落格如何修改字型, 在Blogger可以同時使用不同的中文、英文字型.

這一篇是寫如何運用 jQuery, 製作一個讓讀者可以自行調整字級尺寸的控制鍵.  每次都想著不再寫這類日誌, 就讓真正的專家分享一般部落客都看不懂的教學. 在這裡訪客都感受不到感性浪漫的氣氛. 越來越像嚴肅的老頭...

所以這一篇日誌被定位為音樂日記, 並非部落格教學. (很堅持的任性決定!)
昨天忽然聽到一首老歌, 想起那個感性的年代.  所以...
必須按下音樂連結才能打開下方的教學 !! (結果這一篇又是充滿老頭味...)

音樂日誌 ➤ Click here

當我們將部落格的字型、字體大小都設定好了後, 可以貼心地考慮訪客立場.
看看不同的部落格, 你可以發現每個網頁字體尺寸設定都不同. 符合大部分的讀者閱讀習慣, 通常沒有什麼問題. 但是其中甚至有差異很大的.
例如報導類或轉載新聞, 由於長篇的內容, 會將字體縮減尺寸.
也有可能視力不是很好的訪客, 需要較大而清晰的字體.

Step 1. 如採用字體標示(如 A A A)或 + - 符號作為控制鈕; 較不明顯而失去效用.
所以這裡使用小圖形當作控制鈕. 請先準備幾張小圖形以表示字體尺寸.
可以複製我的圖形. 也可直接使用我的圖片網址. (除非空間被移除了)

Step 2. 另外將一個 js 檔案連同幾張小圖形上傳到網路空間, 並記下網址.
* js 下載 ➤     * 網路空間參考 ➤

Step 3. 打開Blogger範本 ➤ 編輯Html ➤ 展開小範本模組.
在 </head> 的上方插入以下CSS語法

<style>
.dreamstyle a{
outline:none;
}
.dreamstyle a img{
border-width:0;
}
.dreamstyle a.selectedcontrol img{
border-bottom:4px solid #FF0000;
 }
 </style>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <script type="text/javascript" src="resize.js"></script>

 <script>
 var refontsize=new dreamtalker({
 fontcontrol: "controlfont",
 targets: ["body"],
 levels: 3,
 persist: "session",
 animate: 200
 })
 </script>

* #FF0000是控制鍵下方的條狀指示線, 可修改成適當的顏色.
* 如果原本就有使用 jQuery 各版本的程式碼, 以下這一段可刪除. (無需重複)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
* resize.js 換成上傳後的 js 網址. (檔名自訂)

Step 4. 在顯示控制按鈕的位置插入語法：
在 <!-- posts --><div class='blog-posts hfeed'> 的下方.
或是 <div class='post-header'> 的下方. (依CSS自行調整位置)

 <div class='dreamstyle' id='controlfont' align="right">
 字級選定 : <a href='#fontsize-1'><img src='A'/></a> <a href='#fontsize0'><img src='B'/></a> <a href='#fontsize1'><img src='C'/></a> <a href='#fontsize2'><img src='D'/></a></div>

* 提示字" 字級選定 "可自訂.
* ABCD分別為控制鈕的圖示網址. A是小的, B是原有尺寸, C是大, D是更大.
我設定倍數時沒有差異太多, 微調的效果應該足夠.
按鈕依照對應位置可以修改增減. 這樣很簡單地完成了. 樣式如下：

字級選定 :

還有另一種滑桿式的jQuery文字縮放控制器, 我覺得有點複雜, 像我這麼粗心的人很容易把Blogger的CSS改壞.  還是算了! ...

---

Author Summary

Subject : 調整網頁字體大小的按鈕
Author : Unknown - Dream Talker Updated at: 2:32 AM
Votes : 100% - 5.0 - based on 2015
藉由jQuery控制網頁上的字體大小,讓閱讀者可以自由選擇適合觀看的字體尺寸.

Unknown

5 Stars - Reviews