調整網頁字體大小的按鈕
這一篇是寫如何運用 jQuery, 製作一個讓讀者可以自行調整字級尺寸的控制鍵. 每次都想著不再寫這類日誌, 就讓真正的專家分享一般部落客都看不懂的教學. 在這裡訪客都感受不到感性浪漫的氣氛. 越來越像嚴肅的老頭...
所以這一篇日誌被定位為音樂日記, 並非部落格教學. (很堅持的任性決定!)
昨天忽然聽到一首老歌, 想起那個感性的年代. 所以...
必須按下音樂連結才能打開下方的教學 !! (結果這一篇又是充滿老頭味...)
音樂日誌 ➤ Click here
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改壞. 還是算了! ...
