作者zonppp (冷涼卡好)
看板Japandrama
標題Re: [閒聊] 修改KKTV的字幕樣式/大小
時間Wed Nov 12 22:54:50 2025
因為轉到 line tv 看片所以又借原PO的經驗修改了一下
無法螢幕截圖手機拍差不多長這樣
https://i.meee.com.tw/nfEGaPB.jpg
使用 stylus 擴充套件匯入以下設定
有厲害的網友可繼續改
修正字幕太長會不置中的現像
-------------------------------------
@-moz-document url-prefix("
https://www.linetv.tw/drama/") {
/* TW:主字幕 JP:副字幕 */
/* 修改位置 副字幕 */
.vjs-text-track-cue-ja-JP-secondary {
position: absolute !important;
left: 50% !important;
right: auto !important;
bottom: 0 !important;
/* 調整位置 */
transform: translate(-50%, 45%) !important;
width: auto !important;
text-align: center !important;
}
/* 修改位置 主字幕 */
.vjs-text-track-cue-zh-TW-primary {
position: absolute !important;
left: 50% !important;
right: auto !important;
bottom: 0 !important;
/* 調整位置 */
transform: translate(-50%, -35%) !important;
width: auto !important;
text-align: center !important;
/* 主字幕 放大縮小 */
zoom: 1.1 !important;
}
/* 字幕特效 */
.vjs-text-track-cue-ja-JP-secondary div,
.vjs-text-track-cue-zh-TW-primary div {
/* 字形改變
font-family: Microsoft JhengHei UI !important; */
/* 字型顏色 */
color: #fff !important;
/* 字型透明度 */
opacity:.85 !important;
/* 不換行 */
white-space: nowrap !important;
/* 字型外框，? px 厚度 */
-webkit-text-stroke: 0.1px black !important;
/* 字型陰影 */
filter: drop-shadow(0 0 6px rgba(0,0,0,0.8))
drop-shadow(0 0 10px rgba(0,0,0,0.9)) !important;
}
}
-------------------------------------
※ 引述《narihira2000 (つよし)》之銘言：
: 各位板友大家好
: 最近開始用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://kktv.me/play/
: https://i.imgur.com/6kuVSre.jpg
: 5. 儲存後就完成啦!
: https://i.imgur.com/TxdfFbI.jpg
: 單一字幕也是支援的喔! 不過若是內嵌字幕就無法了XD
: https://i.imgur.com/2hpDcfb.jpg
: 當然也可以修改css的內容
: 像是字幕的外框顏色、大小、高低位置等等
: 或是字幕是否要一行顯示
: 詳細可以參考code內註解來進行調整
: 你甚至可以改成像這樣(?
: https://i.imgur.com/f0zvdT3.jpg
: 總之懂CSS的人應該可以變出更多花樣
: 就分享給板友們囉~
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 218.161.25.71 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Japandrama/M.1762959296.A.6B7.html
1F：→ batis: 之前網友分享的修改方式真的幫助很大 一直都有在用 來試試 11/13 00:13
3F：→ batis: 請問想要主字幕和副字幕 上下間距小一些 該調整哪個選項 11/13 00:47
4F：→ zonppp: bottom: 10px !important; 這一行 11/13 09:08
5F：推 dwdt: 太感謝了 回家試試 11/13 11:51
6F：推 batis: 感謝 字幕間距我會調了 想再請問 能單獨調整主字幕或副字幕 11/13 13:23
7F：→ batis: 的大小嗎，因為若更改LINE TV預設的字幕大小 它是主副字幕 11/13 13:25
8F：→ batis: 同時變大或變小 11/13 13:25
9F：→ zonppp: 因為 linetv 有一般模式 劇院模式 全螢幕 他的字型大小 11/13 15:35
10F：→ zonppp: 不同模式下大小都不一樣 直接指定大小會三個模式都一樣大 11/13 15:36
11F：→ zonppp: "css 除了用 font size 還有什麼方法讓字變大或縮小?" 11/13 15:38
12F：→ zonppp: 你用這個問題去問 chatgpt 它會給你幾個方法讓你試 11/13 15:39
13F：→ zonppp: 你加註新的設定 記得結尾加!important才能覆蓋原本的屬性 11/13 15:43
14F：推 batis: 謝謝 我在研究看看 11/13 23:30
15F：→ Federer5566: MOD上的KKTV，直接就可以雙字幕和調大小 11/14 13:58
16F：推 narihira2000: 感謝分享~ 6F想單獨調整一種語言的字幕大小的話可以 11/14 15:46
17F：→ narihira2000: 像原po腳本的bottom那區一樣把一種語言的字幕css額 11/14 15:46
18F：→ narihira2000: 外拆出來而非逗號分隔 就可以額外單獨定義囉 11/14 15:46
19F：推 batis: 謝謝narihira大分享 原po稍早有站內信另一個方便調整的樣式 11/14 15:50
20F：→ batis: 試用後覺得很棒 看他後續會不會再貼上來更新分享 11/14 15:51
※ 編輯: zonppp (218.161.25.71 臺灣), 11/14/2025 19:46:17
21F：推 hoho8: 推推 幫助很大 11/14 20:21