Re: [閒聊] 修改KKTV的字幕樣式/大小
看板: Japandrama
作者: zonppp (冷涼卡好)
標題: 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;
}
}
-------------------------------------
:
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 (臺灣) ※ 文章網址 ※