讓 RWD 表格能自動排序
![讓 RWD 表格能自動排序](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZdWkQfpVoHke-_pR7Nun7Fu_ih7_PoztdsQ2JKoEdLvGtOKPT4aFDd3mayjHKFwO-7GB6NR1fz9drf4QcVNxRlCR47Iu24yQ01fuYaOYgi43LoN3NXP9UBiq5lx5fB47I1DBXa53rHgRp/s1600/rwd-table-sort-scroll.jpg)
過去為網頁表格的處理寫了不少文章,例如「 自適應 RWD 表格 」、「 讓網頁表格自動排序 」。 後來發現,效果比較好的 RWD 表格,因為手機的表格形式跟網頁已經完全不一樣,那麼在行動版將無法做到自動排序。 有次無意間在手機看到 NBA 的統計數據表格,算是比較傳統的 ...
繼續閱讀全文一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理
![一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNdYL6niqRBF8bCn-MNzxZVMvekfkAILvIphlvcdZptFj6Za-Bie7D_znN5wL6jzyEyhLFWhwasgHMPudnTNbjZWQnatuymM6ZxXxSbaKXr3p3ukNv41EjZOPu_1RfXjG4UkAbGvjUwLRg/s1600/one-page-rwd-image-width-problem.jpg)
處理 RWD 網站時遇過許許多多案例,對 RWD 圖片或版面效果覺得跟心目中的 RWD 定義(或是想像)不太一樣。其實以 Blogger 一頁式範本來看,我還沒看過不是 RWD 的版型,那麼一頁式也可以當作 RWD 網站來看待。 會產生落差的原因,有可能是這個版型設計上的問題...
繼續閱讀全文自製美觀的 RWD 時間軸效果(timeline)﹍jQuery + Bootstrap 外掛
![自製美觀的 RWD 時間軸效果(timeline)﹍jQuery + Bootstrap 外掛](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN9EokHKO7dkj2dwSRir5fT3XC8Eb2vlodgX4QaBes9eA1TocmPmdeuAuSSv4QXbIOqY8ZWLBKyG0MBr09-ADxRDFBT0IhijnuwIp8ZdTSGgp72Oa-ucenW7E2Wf83lpgXuFoh8GmP5-pm/s1600/jquery-bootstrap-timeline-eeyellow.jpg)
雖然時間軸的效果看過不少網頁使用,不過倒是很少看到部落格站長放在文章內。這次接到的需求是,案主希望將單車行旅的圖文經歷,版面用時間軸效果串起來。 於是研究了相關的外掛,同時也要顧及手機的 RWD 效果,請見本篇的心得整理。 點此看範例網頁 (圖片出處: eeyello...
繼續閱讀全文輕鬆做出美觀的自適應 RWD 表格(Table)﹍jQuery 輕量外掛
![輕鬆做出美觀的自適應 RWD 表格(Table)﹍jQuery 輕量外掛](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLaGRk4mpvR0j2VjnPF58oK7dvRuDOiKPIfNBvGBcPRbQ9DDpQntwrVukRy_8xbW0-DDVfRepe9KMHIGKc-XB8MpCfP0LoDLG_RBVtVgouleJVaJKp29iMvMD8M_j_S4Sn9hQSDxtLWh3_/s1600/jquery-responsive-table.jpg)
最近的案子處理行動版的表格效果時,發現以前的「 Blogger 插入表格最佳流程 + 自適應寬度 」,這個方式若用在商業網站,將沒有任何質感可言,甚至可以用簡陋來形容。 於是找了一下自適應 RWD 表格有沒有比較美觀,而且又簡便的處理方式。有發現幾個功能強大的外掛,但操作稍嫌...
繼續閱讀全文台灣縣市鄉鎮郵遞區號 下拉選單外掛 TWzipcode 使用心得
![台灣縣市鄉鎮郵遞區號 下拉選單外掛 TWzipcode 使用心得](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqC5uQzi96DmGXe1pAULRomzY8z4DtblURrvePU4pEi7cd_-pz5L95PaLQJ57h9uUzYPAUaM6JoRQnGbztVqPdxtNdFEX4hGkyjODoY_mo7KwtC02tQ0YjmFe4Iv5N1grZeitb4IjZp032/s1600/taiwan-county-town-zip-address-twzipcode.jpg)
填寫會員資料的表單,大多需要輸入地址,不過自己製作「縣市」、「鄉鎮地區」的下拉選單其實很麻煩,而且最好也要提供郵遞區號,因為填表者自己不一定記得住。 本篇介紹的這個 jQuery 外掛 TWzipcode,可以完美地解決這些麻煩事,同時也會分享實作的心得。
繼續閱讀全文自適應 RWD 多層下拉選單實作﹍Bootstrap 外掛 SmartMenus
![自適應 RWD 多層下拉選單實作﹍Bootstrap 外掛 SmartMenus](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg4jVuOt7-Aqy3KJvs6tHJwibxqIfTnN0-gHAtv61eFjb0_qEWD7Q3SarCbQlZzTq_-6hc83RoNtChqoEHAufJaY6DxrqdJN7YfxfIr2bdxoI1cXF2Y4W_m8EzIexwx1dbpbIfPl60sA4x/s1600/multi-dropdown-nav-menu-bootstrap-smartmenus.jpg)
所有網站架設要處理的區塊中,導覽列的下拉選單是最麻煩的一部份,如果需要「多層下拉選單」的話,難度就比較高,可參考「 Blogger 多層下拉選單實作 」。 而行動裝置使用率大幅攀升後,導覽列非常需要有自適應 RWD 效果,手機上才能同步呈現下拉選單這麼複雜的功能。因此製作 R...
繼續閱讀全文自適應 RWD 圖片語法產生器﹍Picasa 圖床專用
![自適應 RWD 圖片語法產生器﹍Picasa 圖床專用](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCAGonnZh8lEnIHnpn_aQYEX3iyBH_YOR8YZVfDFJgUjeZmqNft17qi2r7nkpZc0X3G9fwdNKissfAOQEH0dBHFNSTwnL0tJQ5BADX_hV8team2rCCwCHMJ48QJ_u63R-_7KonejqWIx9_/s1600/rwd-image-generator-picasa.jpg)
之前「 Picasa 圖床的獨家應用:製作 RWD 自適應圖片 」詳細介紹了 IMG 標籤如何設定 srcset 屬性,讓網頁可根據各種螢幕寬度載入不同尺寸的圖片,手機、行動裝置就能縮短網頁載入時間。 同時全世界的圖床,只有 Picasa 可以做到,上傳一張圖片後,修改網址參...
繼續閱讀全文Picasa 圖床的獨家應用:製作 RWD 自適應圖片,讓手機自動載入小圖,加快網頁讀取速度
![Picasa 圖床的獨家應用:製作 RWD 自適應圖片,讓手機自動載入小圖,加快網頁讀取速度](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6T96g6ZB0_VZWSyvyo-cA3W8fq-SFREiYCHu4gXiIfWNDT48_5K8awqJlAKdSRbXql5xR6Sy5UHqA-LJXbbkNx0WdDDt68Ep0zBMQx2tKJdKaxlmXulodUg2rHhQYNsT6p5UPOzu80ha/s780/picasa-rwd-image-srcset.jpg)
過去曾在「 加快 Blogger 行動版圖片載入速度的密技 」告訴讀者,Blogger 使用的圖片只要從後台上傳,也就是使用 Picasa 圖床,行動版就會自動改為載入小尺寸的圖片。 因為有這樣的獨家功能,Picasa 只要上傳一張圖片,就會產生手機版尺寸的圖片,我一直認為 ...
繼續閱讀全文WFU BLOG 使用 RWD 範本改版紀錄(2017)﹍更友善的使用者體驗
![WFU BLOG 使用 RWD 範本改版紀錄(2017)﹍更友善的使用者體驗](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJoh0SHQ_rZlYllPpFKBO9ya7r6VfumcdG0yiijKpmGjrg3plv-nlaEs7ycwlQXxiNvC24kJweRXYa-BTIhQm65luUdvDzMOAoaBR9W2Rs6ekS-8Gh-9ECMJNGNV8aSOWDp-uxmG7wW-a0/s640/wfublog-2017.jpg)
最近一兩年協助架站多是以 RWD 為主,但自己的網站卻是一直使用 Blogger 官方「頂尖企業」模版,我想原因大概是這樣: 不喜歡直接用別人做好的現成範本,因為會有太多自己想改的地方。 但 RWD 是大工程,自己改要花很多時間。 本站是「Blogger 調校資料庫」,所...
繼續閱讀全文Adsense 回應式(RWD)廣告雖然版面美觀,可惜收益少很多
![Adsense 回應式(RWD)廣告雖然版面美觀,可惜收益少很多](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8g8lWDJorxxFma6vACJOWj_3CLNQQMIJgG24q7lIy1aSvhgFZn91ay2_dVTGxaxfkam1nLaG3XpTDpxqSCkNeepQRttBJddRhqvUOVl3Qae7umGTQ-PKXEaZWMzf36rhJ8Fyr7ty4oJZ/s780/adsense-rwd-revenue.jpg)
最近將網站改為 RWD 版型後,因為文章區塊在不同裝置的寬度都不一樣,無法再使用以前的廣告尺寸,因此藉機會把部分廣告單元改成自適應廣告。 使用回應式的廣告,並搭配 CSS 設定後,可以讓廣告完全跟區塊寬度吻合,版面看起來美觀多了。 而用了幾天後,查看 Adsense 報表...
繼續閱讀全文讓 RWD 網頁的文字(font-size)能自適應調整大小﹍極佳解決方案 vmin
![讓 RWD 網頁的文字(font-size)能自適應調整大小﹍極佳解決方案 vmin](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhn0Ou8TrHhecrUQa4_EH5uboviZ13b-joCs83cZdmXOU8NOrMpVwit9uUQUhW2Pg48y_nFxUgF8OfRcR0ZWmqF0HAmgpc0f-zrOH6a_uBQHl5s2yNNadMTS50C1o_zxtFlr91a4OA0J4v/s640/rwd-font-size-solution-vmin.jpg)
最近需要架設 RWD 一頁式網站,結果在「自適應文字大小」這件事卡關,為何會如此呢? 處理部落格型態的網站時,大部分直接套用現成的 RWD「 付費範本 」版型再來調整、修改。由於文字都是位於固定、切割好的板塊之內,調整字體大小的問題不大。 而一頁式網站,可以算是開放式空間...
繼續閱讀全文Blogger 新版 RWD 範本,對 SEO 有哪些加分之處?
![Blogger 新版 RWD 範本,對 SEO 有哪些加分之處?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizvBzDQaEFDVpNK6sMC_B-R8o95DKrrUt0Hm_hSnHeejpmQhfZevMv2MVOytzBZKmBxw4J-tb_4gsmJH1C8exI1ZDDih3e_MFg2dXw6CA1y00bUVPZx1XllyEqep-BEqsY0JJLYSrvucpq/s1600/blogger-official-rwd-template-seo-improvement.jpg)
前陣子介紹了「 Blogger 推出的全新自適應 RWD 官方範本 」,有讀者提問新版型 SEO 的相關問題,這表示 Blogger 對 SEO 做了哪些加強,也是大家關注的事情。 那麼本篇就來整理一下,這個 RWD 範本對 SEO 下了什麼功夫、有什麼特別之處。 (圖片...
繼續閱讀全文Blogger 推出全新自適應 RWD 官方範本及佈景主題,並支援行動裝置
![Blogger 推出全新自適應 RWD 官方範本及佈景主題,並支援行動裝置](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWjaTw_vsWHCWyGP8l0g4t_GMaWw1RUCD5nocr6tK9N5GnXgnDJp44LyNibmX7TCKxoejJa7a4jkQL8ABXo9Eg7p9bYSP5n79qF6Wi3J7wQDYkHgrjeGXrJnNi-Mt07EV5s6b2fthPQvbn/s640/blogger-official-rwd-template.jpg)
前幾天 Blogger 官方發佈了公告「 Share your unique style with new Blogger themes 」,從現在起後台可以套用的佈景主題,多了 4 個大分類,共 20 款新版型可選擇。 雖然款式很多,不過版面設計的邏輯都差不多,也可看成官方...
繼續閱讀全文Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀
![Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi2cZ_hOmA7TFKLclEL3SLxEurz6f_-Y4PqtYyrB4_FymUUfG6gI3O7a6V8-HRdhwk97MZ0VTeIjXt6isKjJ-AUKEXCEzqmA9OHUhXi0akvyb39mIQNZvW6P4LgNHq0R5-jOWo6ft7dogE/s640/adsense-rwd.jpg)
最近幫讀者處理行動版時,發現 Adsense 若改用「 自適應(RWD)廣告單元 」,效果會比想像中來得好。 使用原始固定尺寸的廣告時,在不同行動裝置的效果都不一樣, 小尺寸手機有可能超出頁面,而在大尺寸裝置或平板,則可能版面顯得空曠 。總之,有一好就沒兩好。 那麼本篇就...
繼續閱讀全文RWD 標頭(header)圖片實作 [CSS 技巧]
![RWD 標頭(header)圖片實作 [CSS 技巧]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizGA0ef-Bvs1kubJV_NCHFiX7P4vsJNRYgRfR2f98cyzmvlzjO-QnCG_-Np6GeQixG6aO40Q64TU52hK30yS27xKDQpaZzyh3J8J4KjEHIxKiXNomnuSpkh3e7S2Y7J3aU9nh5wFEoTc04/s640/rwd-full-width-header-image.jpg)
使用自適應網頁(RWD)時,標頭圖片的設計與擺放,需要一些巧思與技巧。既然希望網頁能自適應調整寬度,那麼標頭圖片自然在不同寬度之下,都不能讓訪客覺得突兀。 最近接到一個標頭圖片的需求,希望在 "不同寬度下都能填滿整個螢幕"。也許字面上不容易理解,因此用文章...
繼續閱讀全文Blogger 製作自適應網頁(RWD)﹍懶人法實作
![Blogger 製作自適應網頁(RWD)﹍懶人法實作](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgIRQzEZqO_u-7ZwiiwtOE9ixBFI-qS445gAcp6qghWjOiH79bD_XuZd6mFV-H8c3j5vLOiU77jAJhCHPk3ovXDlojK77rUGu0s9Q-ivkImcD5hpCF8Rcdyf0G1oJAYVMEezWtJlmqhpuV/s640/blogger-mobile-rwd-skill.jpg)
過去在「 Blogger 應該選擇自適應範本(RWD), 還是行動版範本? 」曾經歸納出的其中一個結論,對於 "有修改能力、能處理自適應範本" 的站長,Blogger 行動版方案可以選擇「自適應範本(RWD) + 自訂行動版」,這是行動版的最佳選擇。 然而...
繼續閱讀全文Blogger 應該選擇自適應範本(RWD), 還是行動版範本?
![Blogger 應該選擇自適應範本(RWD), 還是行動版範本?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLLVaakeE17KxFZvIAAEhMGXrSJWTBDDQvs8-TNEvmmIczK9IDn-p6JGeZEb4Dc5Tzm7Viy9gzAFZYAly3bw6CskL6zn-ExDL47x1TdVzMqq5iSNCAPV0SJ5Ob20OG078PAPvJBXOPCY8_/s1600/Blogger-Responsive-Web-Designing.jpg)
(Pic from: my-blogshop-tool.blogspot.com ) 在行動裝置瀏覽量不斷攀升的趨勢下,如何服務行動裝置的讀者,是 Blogger 站長們開始要考慮的課題。 Blogger 本身已經提供了行動版範本,不過似乎自適應範本(Responsive ...
繼續閱讀全文