Actions

Work Header

潮汐:一個平滑乾淨的Ao3版型

Work Text:

哈囉,我做了一個新的極簡版型。

潮汐是我為自己製作的一款版型。因為我需要絕對的空白才能感到某種程度的滿足,怎麼說呢,對我來說要素越少越好,否則就會感到煩躁。
但同時潮汐又有點優雅,而且比默認的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