PTT影音娛樂區 / Japandrama (日劇)

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

看板Japandrama (日劇)作者 (冷涼卡好)時間1月前 (2025/11/12 22:54), 1月前編輯推噓7(7推 0噓 14→)
留言21則, 6人參與, 1月前最新討論串4/4 (看更多)
因為轉到 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://www.ptt.cc/bbs/Japandrama/M.1762959296.A.6B7.html
→
11/13 00:13, 1月前 , 1F
之前網友分享的修改方式真的幫助很大 一直都有在用 來試試
11/13 00:13, 1F
推
11/13 00:46, 1月前 , 2F
11/13 00:46, 2F
→
11/13 00:47, 1月前 , 3F
請問想要主字幕和副字幕 上下間距小一些 該調整哪個選項
11/13 00:47, 3F
→
11/13 09:08, 1月前 , 4F
bottom: 10px !important; 這一行
11/13 09:08, 4F
推
11/13 11:51, 1月前 , 5F
太感謝了 回家試試
11/13 11:51, 5F
推
11/13 13:23, 1月前 , 6F
感謝 字幕間距我會調了 想再請問 能單獨調整主字幕或副字幕
11/13 13:23, 6F
→
11/13 13:25, 1月前 , 7F
的大小嗎，因為若更改LINE TV預設的字幕大小 它是主副字幕
11/13 13:25, 7F
→
11/13 13:25, 1月前 , 8F
同時變大或變小
11/13 13:25, 8F
→
11/13 15:35, 1月前 , 9F
因為 linetv 有一般模式 劇院模式 全螢幕 他的字型大小
11/13 15:35, 9F
→
11/13 15:36, 1月前 , 10F
不同模式下大小都不一樣 直接指定大小會三個模式都一樣大
11/13 15:36, 10F
→
11/13 15:38, 1月前 , 11F
"css 除了用 font size 還有什麼方法讓字變大或縮小?"
11/13 15:38, 11F
→
11/13 15:39, 1月前 , 12F
你用這個問題去問 chatgpt 它會給你幾個方法讓你試
11/13 15:39, 12F
→
11/13 15:43, 1月前 , 13F
你加註新的設定 記得結尾加!important才能覆蓋原本的屬性
11/13 15:43, 13F
推
11/13 23:30, 1月前 , 14F
謝謝 我在研究看看
11/13 23:30, 14F
→
11/14 13:58, 1月前 , 15F
MOD上的KKTV，直接就可以雙字幕和調大小
11/14 13:58, 15F
推
11/14 15:46, 1月前 , 16F
感謝分享~ 6F想單獨調整一種語言的字幕大小的話可以
11/14 15:46, 16F
→
11/14 15:46, 1月前 , 17F
像原po腳本的bottom那區一樣把一種語言的字幕css額
11/14 15:46, 17F
→
11/14 15:46, 1月前 , 18F
外拆出來而非逗號分隔 就可以額外單獨定義囉
11/14 15:46, 18F
推
11/14 15:50, 1月前 , 19F
謝謝narihira大分享 原po稍早有站內信另一個方便調整的樣式
11/14 15:50, 19F
→
11/14 15:51, 1月前 , 20F
試用後覺得很棒 看他後續會不會再貼上來更新分享
11/14 15:51, 20F
※ 編輯: zonppp (218.161.25.71 臺灣), 11/14/2025 19:46:17
推
11/14 20:21, 1月前 , 21F
推推 幫助很大
11/14 20:21, 21F
‣ 更多 zonppp 的文章
文章代碼(AID): #1f59_0Qt (Japandrama)
Japandrama 近期熱門文章
更多 近期熱門文章 >>
PTT影音娛樂區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 zonppp 的文章
文章代碼(AID): #1f59_0Qt (Japandrama)