主題

【教學】如何截出漂亮的YT訂閱里程碑 (含數字微調教學)

無胥 | 2022-06-03 20:57:17 | 巴幣 2252 | 人氣 1336

這篇文章希望可以幫助三種人:
1. 不知道里程碑圖要去哪裡截的人
2. 想把里程碑的背景縮小一些的人
3. 想要截整數但是不小心超過的人

恭喜我主推的Vtuber妮卡沃爾達成了2500訂閱~


首先直接回答第一個問題,這張圖片是一個數據追蹤網站自動生成的,
進入網站後上方直接搜尋想要的頻道,點下面這個小框框就會跳出里程碑圖。

其實妮卡已經2570訂閱了,但我還是把它變成整數,下面會教


里程碑圖的背景是以頻道頭像為素材進行及時生成的,
但用網頁版會因為網站UI的關係沒辦法截到乾淨的全圖。
(其實用手機網頁截圖就可以達到不錯的效果。)

那接下來就教大家怎麼調整背景大小吧!
這裡需要用到一些開發者工具的操作,但我會盡量一步一步寫清楚。
(我是使用Chrome瀏覽器示範,但Safari / Edge 都能做到一樣效果)

1. 按下 F12


這個畫面預設應該會出現在網頁右側,
如果不是的話,右邊紅框處三個垂直點的地方可以調整
確保面板分頁是在 Elements (元素),不過接下來的操作也會直接切過去

2. 接下來我們按下左邊紅框處方塊+箭頭的ICON


這個功能可以讓我們鎖定網頁上的元素 (區塊),
點下以後將滑鼠移到網頁上,開發工具就會反藍顯示指到的區塊,
現在我們將滑鼠移到星號這個位置附近點下,選到的區塊應該會類似附圖
這個時候,Elements (元素) 面板應該會反藍一行 <div class="index 開頭的文字,
但我們要的不是它,我們需要的是在它上面的 <figure class="index__
用滑鼠點下去以後應該會如下圖


3. 接下來,我們在底下 (或者右側)的 Styles (樣式) 面板中找到第一順位的

element.style {
}

用滑鼠點下應該會自動跳出可以輸入的指標
然後就把下面這段字直接 Ctrl+V 貼上:

top: -12%;
width: 600px;
height: 700px;

好了,圖片調整完成了。


根據每個人的螢幕解析度之類的原因,可能會有不一樣的呈現結果,
接下來只要修改上面那三個數字,調整到喜歡的大小跟位置就ok了
其中 top 指的是這個 元素的最上端 相對於 父元素高度 的位置
(因為此網頁結構的關係,要把圖片拉上來,top 值要使用負數)
而 Width 指的是元素寬度,Height 則是元素高度,
這三者皆可以用 % 或者 px (網頁尺寸的基本單位) 作為單位。

接下來就是最後一步:調整數字
此處會用到上面同樣的技巧,同樣要用方塊+箭頭的ICON來選取網頁元素
不過我們這一次要選的是需要調整的數字


這裡有時候可能會跳到別的元素去,
打勾的那個三角形可以 顯示 / 隱藏 元素內部的元素,
可以一行一行想辦法找到需要改的那個數字,然後直接點兩下
當面板中顯示反藍的時候,就可以直接修改了。
(改完數字記得按下Enter)

這樣就大功告成啦~

教學就到這邊,歡迎轉給其他有需要的朋友。
然後這裡還是要幫我主推打個宣傳:


創作回應

相關創作

更多創作