Powered by Blogger.

Archive for June 2017

Weebly 攻略 - 使用 Lightbox 功能

本文大部份摘自於  <Webnots>

Lightbox 是一個讓圖片和影片 popup 的一個功能,如下圖所示。在 popup 的情況下,使用者仍然能在變暗的網頁上繼續瀏覽。只要輕輕一點變暗的區域, popup 功能就會解除。

lightbox feature on Weebly
Lightbox Image

在 Weebly 上使用 Lightbox 相當簡單。Weebly 的圖片功能上直接有 Lightbox 功能的選項,如下圖。

向右滑曳, 就可以開啟 lightbox 功能。


那到底該什麼時候使用  lightbox 呢?以下幾種情況供你思考。
1. 高畫素的大圖片有時候被迫縮小成小圖片。
2. 縮小後的圖片上文字看不清楚。
3. 相簿上的照片。


使用 lightbox feature 的幾個常識:
1. 因為 Weebly 是使用 fancybox.com 上的  jQuery fancybox script 來提供 lightbox 功能,你可以透過 fancybox 上提供的 tips 來客製化你想要的 lightbox feature。

2.  不過也因為是使用 jQuery,lightbox 可能會拖累網站 loading time 。另外,如果使用者的瀏覽器設定是停用 JavaScript 的話,所有 jQuery 的功能都會連帶被停用,這就包括使用 jQuery 的 lightbox。




Tag : , ,

Weebly 攻略 - 更換 favicon

本文大部分參考自 <Webnots>

Favicon 是每個網頁都應該具備的基本配備,它在 safari 是出現在 address bar 的最左邊 (如下圖左所示),在 Chrome 則是出現在 tab 的左邊 (如下圖右所示)。有 favicon 的網頁看起來更專業,而且也讓使用者更容易辨識網頁的品牌。

weebly's favicon on Safari
weebly's favicon on Chrome


不過 Weebly 的免費版並沒有給使用者選擇客製 favicon 的自由,而是必須使用 Weebly 的 logo 作為 favicon。當然,再一次的,本篇文章將要教你如何在 Weebly 免費版上 hack 出你自己的 favicon。


1. 首先,讓我們先製作你網頁專屬的 favicon。準備好你網站 logo 的圖檔 (jpg, png 都行),然後把圖片上傳到 http://www.favicon-generator.org (你也可以使用其他製作 favicon 的網站)。這些網站將會幫你做好 favicon 專用的 (16px * 16px)  ico 圖檔。將下載下來的 ico 檔案上傳到 Weebly 的 theme page (下圖 1, 圖 2, 圖 3)。

Weebly's HTML editing page
圖 1
進入 theme page 後,透過左下方的 assets 上傳你的 ico 圖檔。

Weebly's Assests upload page in Theme
圖 2
上傳後的 ico 圖檔可能就長得像這樣:

圖 3

2. 上傳後,我們接著要找到 Weebly 在網站上儲存這張 ico 圖片的位置。輸入以下的網址,並將網址末端換上你 ico 圖片的名字,就找得到你的 favicon 了。



http:// (Your Site Name).weebly.com/files/theme/(Image Name).ico

最後到你的 Settings >> SEO >> Header Code,把以下的 code 貼上去 (記得將下面 ico 圖檔的連結置換成你的連結)。





<!-- Override Weebly's Pre-installed Favicon -->
<link rel="shortcut icon" href="Your Favicon Link"/>



更新你的 Weebly 網站後,就大功告成啦!
Tag : , ,

如何在你的網站上加入影片背景

加入影片背景已經是 2017 年許多架站工具的基本功能了,這不僅僅是為了網站美觀,更重要的是影片能夠在短短的幾秒內傳達本來要花數十秒才能傳達的文字訊息。除此之外,影片更給使用者一種真實感,讓他們增加對你的品牌和你的商品的信任感。

Weebly in 3 Min 的首頁


在網站上嵌入影片有許多做法,包括大家長年熟悉的嵌入 Youtube embedded code 。但是相比會自動播放的影片背景,嵌入的 Youtube 影片需要使用者自行去點擊才會播放,這比較被動。而且嵌入的 Youtube 影片是無法用背景的方式呈現,除非你懂得如何更改程式碼。

直接嵌入的 Youtube 影片是不會自動播放的


當然這篇文章就是要教你如何透過幾個簡單的步驟更改程式碼,讓你的網路商店或是個人部落格也可以脫穎而出。不過在進入教學之前,讓我給各位介紹一下 Weebly 目前對影片背景的支援。 Weebly 有支援影片背景,但不幸的是這功能目前只提供給 Business Plan 用戶,而 Business Plan 用戶一個月的月費就超過 20 塊美金。如果你只是想要使用影片背景功能,那就只好 DIY 了。

首先進入 Weebly 後台程式修改。


進入到你想要修改的 html 頁面。這邊我選擇 landing.html ,也就是首頁。你也可以選擇其他頁面。


找到以下的程式碼

<div class="main-wrap">
  {{#sections}}
     <div class="container">
     {content}</div>
  {{/sections}}
</div>


在這程式碼的下方直接加上以下的 html code。你可以在 src=" 和 ? 之間更換 Youtube 影片連結。注意:Youtube 的影片連結是從 Youtube embed page 上的  code 擷取,而不是瀏覽器上的 search bar。



這樣就大功告成啦~!當然,修改影片背景有多種方法。以上的方法是為了操作簡單,將所有的程式碼都聚集在 HTML 上。如果你有信心將 CSS 分離出來,另外放置在 main-style.css 或
是 main.css 又或是 global.less 上的話,可以參考以下的 code。




如果你對自己的 JavaScript 有信心,也可以參考這篇部落格文章,利用 JavaScript 來設定影片背景的大小,自動播放,和靜音功能。雖然我個人認為利用 JavaScript 有點牛刀小試,不過還是提供以上這三種方法給各位看官。

後話:雖然在電腦網頁端上加入影片背景已經是個趨勢了,但影片背景目前沒有被行動瀏覽器所接受,因為影片不止耗手機上相對較小的處理器資源,更大幅增加行動上網的流量。 iPhone 和 Android 的行動瀏覽器在預設上都不支援網頁上的影片背景。所以在設計網站時,也要同時思考如何針對手機的限制做調整。
Tag : , ,

Weebly 攻略 - 去除 Weebly 擾人的 footer

前言:Weebly 進階版會使用到一些 Html 和 CSS 的基本技巧。如果你沒有這些網頁的基本背景也沒關係,照著這個文章一步一步做也能達陣。

本文大部份翻自於 <How to Remove Free Weebly Footer and Customize with Links>

想必各位使用過 Weebly 的人都知道,Weebly 免費版雖然方便 ,三分鐘內就能快速架站 (不了解如何三分鐘內架站的人,建議參考我的 Weebly in 3 Minutes 網站)。但也因為免費,網站上每個頁面都有 Weebly 的原生廣告,寫著 "Create a Free Website with Weebly" 或是 "Proudly Powered by Weebly"。這些廣告通常都置放在網站的最底下,以頁腳 (footer) 的形式存在。而你也只能升級你的 Weebly 網站到任何一個付費方案才能擺脫廣告。

Weebly 的頁腳 (footer) 廣告

好消息是,本篇文章將會教你如何擺脫這擾人的 Weebly 廣告。首先,進入到 Theme,然後進到左下角的 "編輯 HTML/CSS"。


接著你會看到這一排 HTML 的程式碼。


我們首先會先針對 landing.html,在跟著這篇文章操作完一次後,你可以如法炮製用一樣的方法在 no-header.html 還有其他 html 模板上。 在這個不是很長的 HTML 程式碼裡,你可以在底端找到負責 Footer 的程式碼。它應該長得像這樣


或是這樣

又或是這樣

但無論你所看到的 Footer 版本是那三樣中的任何一種,他們都是 Weebly 在免費版用戶裡置入他們原生廣告的手段。你只需要將下列第一行的程式碼 style="visibility:hidden" 加入你的 footer div 裡面,如下列第三行程式碼一樣,footer 就會消失了

但有時候這樣的做法會留下後遺症,在有些網頁上消失的 Weebly footer 會被難看的白色背景所取代。如果你想要徹底擺脫 footer 的話,可以在原本的 footer div 裡加上 style="display:none" ,像是這樣:

這樣 footer 就會完整地消失了 Hurray~!

題外話:另外如果你想要自己加上你想要的 footer,可以在 Weebly 本來的 footer 程式碼上面加上以下第一到第七行的程式碼

只要在另外稍微修改一下你要的類別,連結,和年份,就變成你網頁專屬的 footer 囉,如下圖所示~ 


p.s. 但切記不要直接刪除你的 Weebly footer code,之後如果使用付費版本還想要用 Weebly 原生的 footer 功能將會很麻煩

延伸閱讀 <如何使用 Partials 來製作 footer >




Tag : , ,

- Copyright © Hank Chan 的所思所想 - Skyblue - Powered by Blogger -