broken image
broken image
broken image
  • 主頁
  • 文章分類 
    • 所有博客分類
    • 噗浪
  • 商品 
    • 所有商品分類
    • 噗版訂製
    • 噗版下載
    • 桌布下載
  • 商店
  • 部落格
  • …  
    • 主頁
    • 文章分類 
      • 所有博客分類
      • 噗浪
    • 商品 
      • 所有商品分類
      • 噗版訂製
      • 噗版下載
      • 桌布下載
    • 商店
    • 部落格
  • 0
broken image
broken image
broken image
  • 主頁
  • 文章分類 
    • 所有博客分類
    • 噗浪
  • 商品 
    • 所有商品分類
    • 噗版訂製
    • 噗版下載
    • 桌布下載
  • 商店
  • 部落格
  • …  
    • 主頁
    • 文章分類 
      • 所有博客分類
      • 噗浪
    • 商品 
      • 所有商品分類
      • 噗版訂製
      • 噗版下載
      • 桌布下載
    • 商店
    • 部落格
  • 0
broken image

噗浪基本語法

畫面背景、時間軸、主控台三個部分

· 噗浪

組成噗浪使用者介面的主要三個元素叫做「畫面背景」、「時間軸」、「主控台」,這三個部分是使用者能夠發揮想像力和創意自行編寫組成的不同模式。頁首則是固定的目前無法用自訂佈景改變。

如下圖,橘色框是頁首和頁尾,綠色框是畫面背景,紅色框是時間軸,藍色框是主控台。

broken image

如果只是想將各區塊改成自己喜歡的顏色,或是換成想使用的背景圖,而不僅是選用噗浪預設的組合,可以試著簡單地用自訂語法做到。

在「自訂佈景風格」的欄位裡編寫填入欲使用的語法,按儲存並更新就可以看見效果了。

像是將整體背景換成純白色,可以寫入如下的語法:

body {background: #FFF !important;}

這行語法裡面,body代表畫面背景項目名稱,{}裡面就是該項目的CSS內容,background: 指的是背景,#FFF是白色的顏色代碼,!important; 則是加強指定引用這個優先設定,藉以覆蓋原本噗浪預設使用的語法。

放上這行語法並儲存更新後,整體畫面背景就會呈顯白色:

broken image

如果將顏色代碼換成純黑色,黑色的色碼為#000,將語法中的#FFF換成#000,就會變成黑色為背景底色:

broken image

要明亮背景或暗色背景,就可透過自訂語法來做決定。

如果要改時間軸或是主控台的底色,只要將畫面背景的項目名稱 body 換成表示時間軸的div.timeline-holder,或表示主控台的div.segment-content,就可以看見不同呈現效果了。

那如果想放背景圖片呢?整體畫面背景放入自訂圖片網址的語法可以這麼寫:

body {background: url(https://i.imgur.com/GaH3sC1.png) repeat !important;}

url就是網址的意思,把要使用的圖片連結貼入()中即可呈現。目前放的為範例背景圖的網址,代換成實際想使用的圖片直接連結網址即可。範例背景圖語法儲存更新後會呈現如下:

broken image

這樣又是不一樣的感覺。

透過組合畫面背景body、時間軸div.timeline-holder及主控台div.segment-content三個部分不同的語法元素,可以創造出自己獨一無二的噗版模樣,只改變三部分的背景顏色或圖片就可發揮各種好玩的組件模式。把三個部份的背景語法一起寫出來,放上色碼或圖片玩玩看吧!

body {background: url(https://i.imgur.com/GaH3sC1.png) repeat !important;}

div.timeline-holder {background: #000 !important;}

div.segment-content {background: #FFF !important;}

這樣的一段語法,儲存更新後會呈現如下:

broken image

簡單即能打造出自己看得順眼用得順心的噗版樣式,換背景圖片或顏色就能改變使用噗浪的心情。

提供一個網頁圖片色碼查詢的小工具:https://www.degraeve.com/color-palette/

看見配色不錯的圖片,想使用圖片裡面的顏色來配置自己的噗版,可以參考。

訂閱
上一篇
下一篇
更改噗浪字型
 返回網站
Cookie的使用
我們使用cookie來改善瀏覽體驗、保證安全性和資料收集。一旦點擊接受,就表示你接受這些用於廣告和分析的cookie。你可以隨時更改你的cookie設定。 了解更多
全部接受
設定
全部拒絕
Cookie 設定
必要的Cookies
這些cookies支援安全性、網路管理和可訪問性等核心功能。這些cookies無法關閉。
分析性Cookies
這些cookies幫助我們更了解訪客與我們網站的互動情況,並幫助我們發現錯誤。
偏好的Cookies
這些cookies允許網站記住你的選擇,以提升功能性與個人化。
儲存