WordPress如何設定底圖背景?

雖然以白色為主體的網站十分簡單時尚,但如果站長覺得外觀太過簡單,就可以設置WordPress背景圖片!設置背景圖像或是對其自定義需要的顏色,網站的氣氛就會立刻發生改變。本篇將介紹網站在電腦版(PC)時的效果,有興趣的站長可以參考看看~

 

網站背景設定方法

由於並非每一個版型都適合設定背景,因此有些主題只能設定底色,或是不提供設定喔!

我的主題能不能設定背景?

於網站後台>>外觀,如果有提供「背景」,即可點選移動至設定畫面。

 

如何設置背景顏色?

點選「選取色彩」後,除了操作調色盤,站長也可以直接輸入需要的色碼,顏色可以參考這篇:免費線上選色工具

 

如何設置背景圖片?

與背景顏色位置相同,選擇「選取圖片」後會進入設定畫面。

於預設集設定圖片展示方式

  • 默認值:垂直和水平顯示重複的圖像
  • 填滿畫面:將圖片根據屏幕尺寸進行調整
  • 符合畫面:圖像延展至全屏顯示
  • 重複:適用於小圖案,可將圖案重複展示
  • 自定義:可進行自訂選項

自訂選項說明

  • 圖片位置:設定圖片對齊畫面方式
  • 圖片尺寸:圖片展示尺寸
  • 重複背景圖片:適用於小圖案,可將圖案重複展示
  • 隨頁面捲動:打勾此選項,當畫面往下移動時,圖片會同時往下移動,使背景保持在相同位置

 

使用重複圖案的好處

使用重複的圖案,可以減少訪客需要載入的資源,有時候一張紋理甚至不會超過 30KB!

可以只用一張小圖,就完成畫面的填充~

 

佈局對底圖選擇的影響

因主題的佈局不同,不一定適合所有的背景圖片素材,常見的布局方式有:

全寬佈局

全寬度佈局只適合極為素面的底圖或設定顏色,因為會影響讀者瀏覽,如果圖案紋路明顯…

換成些微皺褶的底圖,可以發現這類紋路不明顯或只設定底色會相對容易閱讀

 

盒裝佈局

盒裝佈局適合多數調整方式,因為主內容區塊為一體,並與底色分開,例如使用重複的圖案!

或鮮豔的底圖

 

卡片佈局

卡片佈局不適合細密與鮮豔的圖案,這會讓畫面變得很有壓迫感又雜亂!

選擇比較不明顯的圖案

 

設定網站背景該注意什麼?

留意圖檔的大小

如果要使用一張大圖(通常是照片),需要留意圖檔大小,如果你的圖檔有10MB,讀者的就必須下載 10MB的資料量

 

總結和注意事項

為了達到無縫效果,需要使用紋理可以銜接的圖片,可以搜尋:シームレスなテクスチャ、Seamless pattern

這些背景材料站點,包含許多非常實用的材料。使用材料時,請務必檢查版權和許可。在多數情況下,可以自由使用,但是存在一些需要留意的地方,例如:「可商業利用」與「在商業用途上,必須將作者標記放在某個位置」需要仔細分別。

※  toptal 
pattern8
backgroundlabs
フリーテクスチャ素材館
dinpattern
pattern
bg-patterns
※ 日本的藝術社群  pixiv綜合001點紋理2免費378免費379點63免費材料30自由紋理09咖啡館

 

 

 

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top