ಠ_ಠ 偷偷說
2 years ago @Edit 2 years ago
空噗語法的FAQ
語法噗在此
latest #9
ಠ_ಠ
2 years ago @Edit 2 years ago
由於每個人的需求不一,語法變化眾多
這裡不會逐一用Plurk Paste說明,請自行理解,或是請高人協助
ಠ_ಠ
2 years ago
Q. 套用後無法生效,或排版、顏色等出現異常
A. 舊有語法跟空噗語法衝突,可以檢查是否已經用了「.empty」的相關語法,先刪除再套用
ಠ_ಠ
2 years ago @Edit 2 years ago
Q. 頭像不是48px,頭像位置看起來很奇怪
A. 利用background-position進行調整,以小表符為例:
.plurk_box > .response_box .list .empty::before {
background-position: left 20px center;
}
.plurk_box > .response_box .list .empty::after{
background-position: right 20px center;
}
便會得出以下結果
https://images.plurk.com/6OpoiOnxUtTfx0CdYceY4p.png
立即下載
ಠ_ಠ
2 years ago @Edit 2 years ago
以官方肉骨獸大圖為例,可以直接用background-size縮小:
.plurk_box > .response_box .list .empty::before {
background-size: 10%
}
也可以直接寫「background-size: 48px;」
https://images.plurk.com/2vlNreYCX3KiOugDK6wU9k.png

想保留原有大小,就直接調整height改變對話框高度,視情況也需要調整padding讓文字不會疊到圖片上。
以下便調整了上方對話框變成原版大肉骨獸:
height: 100px;
padding-left: 160px;
https://images.plurk.com/2mmr0K8TuUuX3NLFTAPMzr.png
ಠ_ಠ
2 years ago @Edit 2 years ago
Q. 滑過去或點擊時,想用圖片作為滑鼠游標
A. 在語法裡把cursor的部份改為:
cursor: url(圖片網址), auto;

Q. 除了滑過圖片,也希望滑到空噗時可以自訂滑鼠游標
A. 沒有辦法只針對空噗更換滑鼠游標,要換就是所有噗(空噗及有回應的噗)都一起換。
ಠ_ಠ
2 years ago @Edit 2 years ago
Q. 對話框句子太長,想換成幾行來顯示
A. 把對話框高度的height改成auto,它就會自動隨著文字長短改變高度。
如果想統一高度,便手動調整height。

如果想為句子手動換行,必須利用半形空白來換行(所以英文句子無法手動換行)
首先把word-spacing改為「100vw」
對話的部份,以半形空白作為斷句符號,例如「第一句 第二句 第三句」
https://images.plurk.com/4u9nwcjJfpumSn1ASuugxV.png
ಠ_ಠ
2 years ago @Edit 2 years ago
Q. 可以弄成隨機句子嗎?
A. 噗主沒有好的辦法,證明了掰噗等各種機器人是最強大的……
有需要的請自行尋找高手指導。

噗主勉強想到的辦法是利用空噗的位置弄出不同句子的效果,但是太硬要了所以不會提供語法,僅供有意者參考。
https://images.plurk.com/5ukKpm3RRWFhNFU1ycjiu4.gif
ಠ_ಠ
2 years ago @Edit 2 years ago
Q. 一格對話框可以放兩張(或更多)圖嗎?
A. 可以,background部份善用逗號就可以了,可能要改變padding,避免文字疊到圖片上。
以下是第一格對話框放兩張圖:
.plurk_box > .response_box .list .empty::before{
padding-left: 60px;
padding-right: 60px;
content: "這個噗居然沒有人留言……";
background-image: url(圖1網址), url('圖2網址');
background-position-x: left, right;
}
https://images.plurk.com/5UlktIaGFH9NxYKD97GPjX.png
ಠ_ಠ
2 years ago
懂得自行調整的話,亦可以弄成這樣:
兩個名畫表符放右邊,拉線表符當上下框線
https://images.plurk.com/1wVUrbj8zhXYHTeez5kcQa.png
back to top