調整網頁字體大小的按鈕

8   Comments

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

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

音樂日誌 ➤ Dreamtalker playerClick 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 : - Dream Talker Updated at: 2:32 AM
Votes : 100% - 5.0 - based on 2015
藉由jQuery控制網頁上的字體大小,讓閱讀者可以自由選擇適合觀看的字體尺寸.
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見,歡迎參與留言。
◆ Disqus匿名留言,信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言,可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵,留言須使用『@Mark X』在訊息中,以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. 字體尺寸標準設定是多少比較好?
    我看重灌狂人的網站字就很大,有些部落格字卻很小,要怎麼看.

    ReplyDelete
  2. To @Monie :
    Wow! 這個問題要回答還真是花時間...
    一般來說, 指定12px~14px是一般能接受的, 還是要看你的CSS對字體的相對值(em).
    通常瀏覽器的默認值是16px的字體大小, 為了配合網頁看起來的舒適度, 通常會用em來調整. (例如有的瀏覽器就不太能精確分辨px該多大)
    部落格是以個人為主體, 也不必太計較字體大小. 加上這一篇的字級控制工具, 就解決了啊!

    你可以去注意看看, 使用桌上型螢幕的人設定網頁的字就比較小; 因為他覺得字體已經夠大了.
    反之, 使用小筆電寫部落格的人, 字體會設定大一點.
    如果你的部落格用em去設定字體尺寸, 會依照解析度顯示, 而大部分的解析度都差不多. 所以設定好了, 在大小螢幕之間的字會自動縮放.

    不來恩是經營網站的老手. 當然有他的考量點.
    內容是網路分享及資源, 會考慮不讓訪客看得很辛苦.
    或是配合站內的廣告, 廣告字通常比較驚悚,大字. 相比之下, 原有主要的內容字體那麼小能看嗎?
    字大一點, 滾條就一定得繼續往下拉往下看. 才能顯示更多的廣告啊!
    再不然內容長一點的, 可以加長版多幾頁, 還可以增加點擊率. (哪像我能盡量簡短就簡短; 能少打幾個字就少打...)
    還有許多技巧, 由我來說太失禮了.

    不過我覺得重灌狂人的字體好像有比以前的小.
    只要內容豐富, 字體便不是重點了.

    ReplyDelete
  3. To @Mark X :雖然還是不怎麼懂,但謝謝囉.

    ReplyDelete
  4. To @Monie :
    Blogger的CSS架構通常是使用em調整. 所以不用太擔心.
    只要你的螢幕解析度是一般的 1024x768, 在設定字體大小時, 依照目測適合的尺寸就對了!
    有時候在範本裡的尺寸設定是16px, 經過em控制後可能看起來變成14px的大小.
    所以, 以你的螢幕顯示,目測喜歡的尺寸即可.

    ReplyDelete
  5. Anonymous7:04 PM

    google sites空間只有100M,有其他推薦的免費空間嗎? thxs!

    ReplyDelete
    Replies
    1. 想放更多檔案, 又可以外連使用的, 可以參考使用Dropbox.
      我的Dropbox轉介碼

      Delete
  6. 洛可可3:21 AM

    我的jquery版本是*1.7.1,需要改成*1.6.4嗎? 桑Q

    ReplyDelete
    Replies
    1. you are welcome.
      不用更改, 目前最新版本: jQuery 1.8.2 仍適用.

      Delete