Work Text:
哈囉,我(ElectricAlice)做了一個新的極簡版型。
潮汐是我為自己製作的一款版型。因為我需要絕對的空白才能感到某種程度的滿足,怎麼說呢,對我來說要素越少越好,否則就會感到煩躁。
但同時潮汐又有點優雅,而且比默認的Ao3版型更現代風,所以可能也有其他人會喜歡它!因此,我決定公佈這個版型。另外也有一個深色版本,因為我知道有些人喜歡黑暗模式。(之類的吧,但我絕對不是那種模式的愛好者,它讓我豆頁很痛)
Ao3給了我絕對的控制權,讓我得以完全實現它在我心目中的樣子。另外,我在嘗試製作「讀寫障礙友善版型」時明白了很多東西,所以我可以大幅改善之前嘗試的極簡版型。
一些潮汐版型的特色:
你會發現大多特色其實是因為「我就喜歡」才這樣做的。就像我前面說的一樣,這是為我自己製作的100%放飛自我版型,但我認為有些人可能也會喜歡它。
我會試著做一個小說明書(之後有空的話)來改一些東西,這樣你就可以根據自己的喜好來自定義版型,但這需要一點時間,因為我需要整理代碼,並按照我在「讀寫障礙友善版型」上所做的那樣來註釋它。
- 所有東西都是盡我所能做到最乾淨的。我把東一個西一個妨礙視線的東西都刪掉了。
- 限制佈局的寬度。這是我在做「讀寫障礙友善版型」時學到的東西:較小的寬度對閱讀有很大的幫助。
- 我把超標緻的漸變色放在每個地方。沒有特別的原因,「我就喜歡」。
- 我試玩了很多關於如何顯示tags的方法,使它們與鏈接和網站的其他部分不同。希望它們能比默認版型的文字牆更容易看懂!
- 我縮小了標題,因為我希望它乾淨。
- 說實話,我的版本甚至沒有搜尋欄(因為我發現AO3的特定搜尋難用到離譜的地步,搜尋作品功能或搜尋tags選單都比這好多了,但總覺得我不能真的就像這樣發布它。 (我在這篇文章的底部有說明該如何刪除搜尋欄)
- 我把作品的統計改成了圖示。對,我就是只想減少冗長的統計。
預覽:
如何設置版型:
好的,這比你習慣的「設置版型」教程要複雜一點,因為它分別有手機版型和一個iPad/平板版型(但iPad版型也可以選擇不要啦)。然而我想讓手機上的閱讀也有最好的體驗,所以這是最簡單的方法。
因此,你將分別創建3個不同的版型,並通過parent選項將它們連接起來。我會說明每一個步驟的!
不用擔心如果搞砸該怎麼辦。你可以隨時恢復默認的AO3版型,只要到網頁底部點擊「Customize - Choose Skin」就好囉。
主要版型:
- 確定你有登入你的Ao3
- 到my dashboard然後點擊Skins(在右側選單)
- 點擊create new skin,對就是第二個選項
- 確認種類是Site Skin
- 為你的版型取個標題。記住這些標題必須是全Ao3獨一無二的,例如:你可以取「YourUserName-minimal」
- 這是主要版型,包含所有顏色跟東東
- 全選然後複製此處的代碼:
淺色模式
深色模式 - 回到Ao3的create new skin介面,在CSS欄位貼上剛剛複製的代碼
- 點擊SUBMIT
- 接下一步
iPad/平板修正版型:
如果你沒有要在平板上使用的話可以跳過。如果跳過這步驟,其實也能在iPad上運作。這只是使閱讀體驗更好一點而已。
- 回到my dashboard然後點擊Skins(在右側選單)
- 點擊create new skin
- 確認種類是Site Skin
- 為你的版型取個標題,確定你有標示說這是iPad/平板修正!
- 然後這些標題必須是全Ao3獨一無二的,例如:你可以取「YourUserName-ipad-fix」
千萬要記得! - 全選然後複製此處的代碼(不管深淺模式都是一樣的)
- 回到Ao3的create new skin介面,在CSS欄位貼上剛剛複製的代碼
- 點擊Advanced的Show
- 有看到Media和很多選項嗎?向下滾動列表,直到你找到only screen and (max-width: 62em),應該在倒數幾個,然後選中它
- 點擊SUBMIT
- 接下一步
手機修正:
終於到最後一個步驟了!這在選單和其他東東上做了很多修正,以便在手機上顯示正確分頁。
- 回到my dashboard然後點擊Skins(在右側選單)
- 點擊create new skin。沒錯第三次!
- 確認種類是Site Skin
- 為你的版型取個標題,確定你有標示說這是手機修正!
- 然後這些標題必須是全Ao3獨一無二的,例如:你可以取「YourUserName-mobile-fix」
千萬要記得! - 全選然後複製此處的代碼(不管深淺模式都是一樣的)
- 回到Ao3的create new skin介面,在CSS欄位貼上剛剛複製的代碼
- 點擊Advanced的Show
- 有看到Media和很多選項嗎?向下滾動列表,直到你找到only screen and (max-width: 42em),應該在倒數幾個,然後選中它
- 接下來是最重要的步驟:你需要把這個版型跟剛剛那兩個連結起來!
- 在Advanced某一個部分,你會看到Parent Skins。點擊Add parent skin,它應該會添加一個叫Parent #1的欄位,你可以在下面那欄輸入東西。
- 輸入你之前在主要版型使用的名稱,例如「YourUserName-minimal」並選中它。
- 現在再次點擊Add parent skin,並添加第二個版型!
- 輸入你之前在iPad/平板修正使用的名稱,例如「YourUserName--ipad-fix」,並選中它。
- 點擊SUBMIT
- 然後你就可以用了。
在手機上檢查看看它是否看起來安好!文章標題應該會是正確的格式,如下圖:
而非這種樣子:
如果它看起來是這種樣子,那代表手機修正出了什麼問題,請檢查下列事項:
- 你有確實按照我前面說的步驟為手機修正設置第二個版型
- 你沒有不小心把手機修正和主要版型的兩個不同代碼放錯地方!它們是兩個不同的代碼,你可能會把它們弄搞混。它們是兩個不同的代碼,你可能會把它們搞混! (我自己也幹過很多次)(我知道這很混亂!對不起!)
- 在Media Advanced選項中,手機修正有設置為only screen and (max-width: 42em),且iPad/平板修正有設置為only screen and (max-width: 62em)。
- 主要版型(和iPad/平板版型)有設置為手機修正的parent。它們需要版型與版型的連結!
- 你使用的是手機修正版型,而不是主要版型
如何刪掉標頭列的搜尋欄:
- 回到my dashboard然後點擊Skins(在右側選單)
- 找到你的主要版型,然後點擊edit
- 在CSS最後添加這組代碼:
#header .search { display: none !important; } - 然後Update
