[閒聊] 修改KKTV的字幕樣式/大小

作者: narihira2000 (老羊)   2020-09-15 22:53:14
各位板友大家好
最近開始用KKTV來看日劇
但是發現他們字幕的位置一定會在時間軸的上面
而且又不能調整字幕大小(其實可以透過ctrl+滾輪來調整,但也不方便)
再加上我看日劇時習慣把日文字幕開起來
雙字幕直接快把畫面占掉一半
https://i.imgur.com/80shVIX.jpg
於是興起想修改字幕樣式的念頭
==========================以上廢話==========================
以下開始教學
簡單來說就是透過stylus來調整字幕的css
1. 首先去擴充商店安裝stylus擴充元件(chrome、firefox、edge皆有)
2. 點開stylus並點選"管理已安裝樣式"後編寫一個新樣式
https://i.imgur.com/5yYTO9H.jpg
https://i.imgur.com/bLRGU5F.jpg
3. 貼上以下網址的內容
https://bit.ly/2ZDwohD
4. 在底部"適用於"的地方進行設定,讓它只在kktv內運作
選項為 含以下前綴的網址 https://www.kktv.me/play/
https://i.imgur.com/5uoVpZA.png
5. 儲存後就完成啦!
https://i.imgur.com/TxdfFbI.jpg
單一字幕也是支援的喔! 不過若是內嵌字幕就無法了XD
https://i.imgur.com/2hpDcfb.jpg
當然也可以修改css的內容
像是字幕的外框顏色、大小、高低位置等等
或是字幕是否要一行顯示
詳細可以參考code內註解來進行調整
你甚至可以改成像這樣(?
https://i.imgur.com/f0zvdT3.jpg
總之懂CSS的人應該可以變出更多花樣
就分享給板友們囉~
作者: RyomaTaco (龍馬)   2020-09-15 22:57:00
推一個
作者: bibichiu (白泡泡的比)   2020-09-15 22:59:00
推,用MIU404教學很可以XDDD
作者: iamtharos (pourquoi)   2020-09-15 23:01:00
順眼很多,推一個
作者: zakke (湛藍幻想曲)   2020-09-15 23:44:00
真的那雙字幕好佔畫面!謝謝教學,推miu404!
作者: umi0207 (umi)   2020-09-15 23:45:00
好厲害!推
作者: mymayday5   2020-09-16 00:18:00
感謝教學!!!開雙字幕的時候真的覺得很佔畫面空間明天來試試看~ 然後MIU404一定要推一下!
作者: ww1215 (溜溜)   2020-09-16 01:08:00
作者: rabbitball19 (兔子球)   2020-09-16 02:29:00
有改有推,順便二刷MIU404
作者: y35246357468 (小銀)   2020-09-16 02:31:00
最後一張圖怎麼那麼熟悉啊歪歪XDD
作者: joanjen (喬安)   2020-09-16 05:05:00
感謝教學!推推
作者: edward8401 (LIAN)   2020-09-16 08:15:00
最後一張XD
作者: dearwhen (阿西默)   2020-09-16 09:24:00
我這人很簡單,有MIU404我就推wwwww
作者: venki   2020-09-16 11:59:00
推教學 好實用~
作者: poterr   2020-09-16 13:01:00
推教學。謝謝
作者: xuanct4297   2020-09-16 15:46:00
實用!有MIU404當然要推
作者: blue2324   2020-09-16 19:52:00
謝謝教學!看了這篇才知道可以雙字幕一起顯示XD
作者: kazunariken (SHINee MINHO)   2020-09-16 21:01:00
感謝教學!之前因為雙字幕太佔空間,就不開雙字幕了
作者: lanesep (Lane)   2020-09-19 00:44:00
推,謝謝教學!!教學畫面選得真好(拇指)
作者: TAMACAT (愛東奔西跑‧精靈貓)   2020-09-19 01:44:00
推教學! 推推 MIU404
作者: shallvam (シャシャ)   2020-09-20 02:50:00
推!之前也是被這個困擾到,結果就沒開雙字幕
作者: yesh1019 (只是來看熱鬧的)   2020-09-21 21:03:00
感謝分享,很好用。
作者: EarthSea (ぞえ)   2020-09-22 19:23:00
實用推 謝謝分享!

Links booklink

Contact Us: admin [ a t ] ucptt.com