2015年5月31日

讓 Line 按鈕只在手機+行動裝置顯示

line-button-mobile-device如果網站有安裝過 Line 按鈕的話,應該會發現只有行動裝置(手機+平板)有作用,而網頁版的 Line 按鈕按下後,只會連結到官網。

前陣子有讀者反應,"能否讓 Line 按鈕只在手機及平板出現,網頁版不要出現?"。的確,如果能這麼做的話是最好,以下就來看看這件事如何進行。

2015年5月24日

[教學] 讓新版 Google 表單(試算表)能自動寄信﹍(2) 安裝程式碼

google-spreadsheet-auto-send-email以下接續「第一篇」的步驟。

2015年5月23日

[教學] 讓新版 Google 表單(試算表)能自動寄信﹍(1) 製作表單格式

google-form-auto-send-email之前舊版的「讓 Google 試算表能自動寄信」,由於近期 Google Drive 雲端硬碟陸續強制升級為新版,如果是新的使用者,已經無法依照原本的流程安裝,因為官方已經取消了舊版試算表的「指令碼庫」功能,無法從後台安裝 FormEmailer 這個自動回信外掛。

其實自動回信的程式碼不難,官方已經提供了 API 可以套用,因此乾脆自己寫個簡便短小的工具,有需要的讀者可以照流程進行,一共分為兩篇,第一篇為製作表單檔案,第二篇為安裝後台自動執行的寄信程式。

為何舊版的流程只有一篇,而這個輕便的程式反而需要更多篇幅呢?主要是因為舊版雲端硬碟的 "表單" 與 "試算表" 儲存在同一個檔案,操作比較簡單;而新版雲端硬碟必須 "表單" 製作一個檔案、"試算表" 另外一個檔案,只好分成兩篇說明了。

2016.5.19 補充:由於 Google 表單操作介面有更新,因此本篇部分圖片也修改為新介面的畫面。

(圖片出處: pexels.com)

2015年5月21日

RWD 標頭(header)圖片實作 [CSS 技巧]

rwd-full-width-header-image使用自適應網頁(RWD)時,標頭圖片的設計與擺放,需要一些巧思與技巧。既然希望網頁能自適應調整寬度,那麼標頭圖片自然在不同寬度之下,都不能讓訪客覺得突兀。

最近接到一個標頭圖片的需求,希望在 "不同寬度下都能填滿整個螢幕"。也許字面上不容易理解,因此用文章開頭的示意圖來說明:
  1. 紅框範圍的寬度,代表螢幕(滿幅)寬度。
  2. 有的版型會設定 "內襯值" (padding),在標頭區塊、文章區塊之外留白,使版面不會讓人喘不過氣來 → 這個 "內襯值" 就是紅框與橘框之間的距離
  3. 橘框的範圍就是標頭區塊。

本篇的任務,就是讓橘框的標頭圖案,在各種螢幕寬度之下,都能成為紅框的寬度,也就是 100% 填滿螢幕,但文章區塊仍保持不變。先提醒一下,理解內容需要一些 CSS 基本知識。

2015年5月18日

Blogger 各種圖片異常狀況處理﹍模糊+消失+超出版面

blogger-image-blurryBlogger 圖片異常的各種提問,算是非常頻繁出現的,常見狀況大致有:

1. PICASA 上傳後的圖片看起來有點失真,但 Flickr 的就不會?
2. 手機上的圖片好像比較模糊?
3. 我的 Blogger 圖片怎麼消失了?
4. 有的圖片比較大,超出文章區塊怎麼辦?

於是花了點功夫,整理所有常見的圖片相關問題,如此將來遇上,只要引用這篇的連結就好。

2015年5月14日

讓標題過長的文字自動省略﹍單行 CSS 技巧

text-over-ellipsis在設計版面的時候,控制區塊的寬度與高度是重要的技巧,因為文字數量或圖片尺寸非我們所能控制。當內容太多、超出了區塊的範圍,如果不熟悉 CSS 語法,沒有做適當的參數設定,輕則視覺效果變差,重則版面整個爆掉!

圖片超出區塊的調整,將會另闢一個主題。本篇先說明如何使用 CSS 語法 text-overflow: ellipsis,讓單行文字不超出指定範圍,而多行文字有機會也會另外說明。

+Ala Go 在「讓 Blogger 自動顯示系列文章」留言 #17 詢問

由於我主要的文章,標題都很長。截圖:http://i.imgur.com/H6qvl8D.png。想請問,是否能讓~做為「關鍵字」的「字串」,不重複的在「系列文章」中顯示出來?

很明顯的,這個案例就是文章標題的文字太長,當超過一行時視覺效果不佳,版面看起來稍嫌擁擠、且冗長。如果我們能用 CSS 將標題區塊限定為只顯示一行的高度,那麼這個問題就能有效改善。

2015年5月11日

Blogger 製作自適應網頁(RWD)﹍懶人法實作

blogger-mobile-rwd-skill過去在「Blogger 應該選擇自適應範本(RWD), 還是行動版範本?」曾經歸納出的其中一個結論,對於 "有修改能力、能處理自適應範本" 的站長,Blogger 行動版方案可以選擇「自適應範本(RWD) + 自訂行動版」,這是行動版的最佳選擇。

然而,RWD 範本不是那麼好製作,要修改現成的 RWD 範本也需要一定的功力,因此 WFU 思考的是,Blogger 平台下實現 RWD 有沒有比較簡單的方法?

其實官方提供的判斷式語法,就能實現類似 RWD 的效果。只不過判斷式也非萬靈丹,有少數場景無法使用。本篇將分享一則實例,如何在無法使用 Blogger 語法時,製作出 RWD 頁面。

2015年5月8日

[Google Drive 外連產生器 V2] 一秒鐘輕鬆複製連結, 支援新舊版雲端硬碟

google-drive-direct-link-generator-v22016.9.30 公告:由於「Google Drive 檔案外連功能於 2016 年 9 月關閉」,網頁要檔案外連的話,建議採用 Dropbox,並使用這個「Dropbox 外連產生器」。


前幾天讀者回報「Google Drive 外連產生器 V1」在新版雲端硬碟失效,試了一下果然如此,距離上一個版本不過短短半年而已。

2015年5月6日

讓 iOS 設備(iPhone iPad)鋰電池能正確充電、降低循環次數的技巧

ios-battery-charge-optimize這個主題其實有些爭議,某些觀點認為鋰電池是消耗品,沒什麼好保養的,說不定電池還沒壞,就準備換新的行動裝置了。在這樣的前提之下,的確電池能用多久不是需要關心的事,不過事實上,如果好好對待電池的話,還是能帶給我們不少便利。

相信很多人會遇到,電池充飽後很快又沒電,也就是電量消耗得很快,其實這就是電池循環次數很多,電池容量越來越低的狀況。當沒有好好保養電池的時候,在電池生命的中、後期,你就得經歷這樣的情形很長一段時間。而為了常常得充電這個動作,勢必得減少很多使用時間。

這一篇的概念延續「讓 Android 設備鋰電池能正確充電、延長壽命的 App」,同樣的概念套用在蘋果行動裝置也是可行,以下就來看看 iOS 設備我們可以做到哪些事,來延長鋰電池的壽命。

(圖片出處: itunes.apple.com)

2015年5月3日

Blogger 自訂行動版範本實作﹍(3) 工具+圖片+字體

blogger-mobile-customize-template-3完成 Blogger 自訂行動版「標頭+導覽列+廣告」、「文章+側邊欄+頁尾」的所有版面區塊後,現在要完成最後的收尾工作。

根據「優化網站效能該注意哪些事?」,加快網頁載入速度需要從 "圖片" 與 "Javascript" 優先下手,本篇會談到這些優化的過程。