水銀流域

0%

AO3阅读样式设置　Skins分享

发表于

也许给朋友看

AO3还有皮肤呢？

有。内容是CSS。

AO3的Skins（即皮肤）分为两种：

  • Site Skins
    修改你自己看到的文章、搜索结果等样式，别人不知道你看到的是什么样。
  • Work Skins
    设置你的文章本身的模样，向所有人展示。
    同时，任何人都可以根据自己的喜好，通过文章最上方的【Hide/Show Creator’s Style】按钮将它关闭或再次开启。

更详细的方式可以看官方的说明和举例等。


以下是自己的Skins内容，以及效果展示。

博主没有学过CSS，都是用什么查什么，所以写法可能很邋遢。
主要用于备份吧。


Site Skin

改变自己看到的界面。

效果展示&对比：
（使用后外观←→使用前默认外观）
注意：展示文章内容在开头有一个换行。

PC文章界面：
文章 PC　默认文章 PC

PC列表界面：
列表 PC　默认列表 PC

移动端文章界面：
文章 Mobile　默认文章 Mobile

移动端列表界面：
列表 Mobile　默认列表 Mobile


Site Skin 内容：

（前半应该是参考过一个分割tag的public site skin，但不记得是哪个了）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
a:link,
a:visited,
a:hover {
text-decoration: none;
border-bottom: 1px #999 dotted;
}

li.work {
margin-bottom: 2.5em;
}

h4.heading {
font-size: 125%;
line-height: 1.5em;
}

h4.heading a:link,
h4.heading a:visited,
h4 heading a:hover {
color: #900;
border-bottom: 1px #900 solid;
}

h5 a.tag {
background: #EEE;
}

ul.commas li.warnings:after,
ul.commas li.relationships:after,
ul.commas li.characters:after {
content: none;
}

ul.commas li.freeforms:not(:last-child)::after {
content: ", ";
}

ul.tags li.warnings,
ul.tags li.relationships,
ul.tags li.characters,
ul.tags li.freeforms {
float: left !important;
margin: 0.2em 0.3em;
}

ul.tags li.freeforms {
font-size: 95%;
}

li.warnings + li.relationships,
li.relationships + li.characters,
li.characters + li.freeforms,
li.warnings + li.characters,
li.warnings + li.freeforms,
li.relationships + li.freeforms {
clear: left;
}

ul.tags li.warnings:first-child:before {
content: "Warnings: ";
color: #936;
font-weight: bold;
}

li.warnings + li.relationships:before {
content: "Relationships: ";
color: #936;
font-weight: bold;
}

li.warnings + li.characters:before,
li.relationships + li.characters:before {
content: "Characters: ";
color: #936;
font-weight: bold;
}

li.warnings + li.freeforms:before,
li.relationships + li.freeforms:before,
li.characters + li.freeforms:before {
content: "Freeform: ";
color: #936;
font-weight: bold;
}

li.relationships a.tag {
background: #FEE;
}

li.characters a.tag {
background: #EEF;
}

blockquote.summary {
border-top: 2px #CCC dashed;
padding-top: 1.25em;
line-height: 1.25em;
font-size: 1.04em;
}

div.preface,
group {
width: auto;
max-width: 40em;
margin: 30px auto 0;
}

div#chapters {
width: auto;
max-width: 40em;
font-size: 1.1em;
margin: 0 auto;
}

div#chapters p {
margin: 1.4em auto;
line-height: 1.65em;
}

h2.title {
margin: 1.5em auto 0.5em;
}

h3.byline {
margin: 0.75em auto 1.5em;
}

.summary,
.notes {
font-size: 1.04em;
}

.summary h3,
.notes h3 {
margin: 1.75em auto 0.5em;
}

div#chapters .summary,
div#chapters .notes {
font-size: 0.945em;
}


Work Skin

设置自己文章的样式。

效果展示&对比：
（使用后外观←→使用前默认外观）
注意：展示文章内容在开头有一个换行。

PC：
PC　默认 PC

移动端：
Mobile　默认 Mobile


Work Skin内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
#workskin body {
  font-family: 'Hiragino Sans GB', Verdana, Helvetica, sans-serif;
}

#workskin .notes a:link,
#workskin .summary a:link,
#workskin .notes a:visited,
#workskin .summary a:visited {
  color: #CCAA00;
  text-decoration: none;
}

#workskin a:hover {
  color: #990000;
  text-decoration: none;
}

#workskin div.preface,
#workskin group {
  width: auto;
  max-width: 40em;
  margin: 30px auto 0;
}

#workskin h2.title {
  margin: 1.5em auto 0.5em;
}

#workskin h3.byline {
  margin: 0.75em auto 1.5em;
}

#workskin .byline a {
  color: #999999;
}

#workskin h3.heading {
  border-bottom: none;
  color: #333333;
}

#workskin .summary {
  color: #666666;
  font-size: 1.05em;
  margin: 2em 0;
}

#workskin .summary h3 {
  margin: 1.75em auto 0.5em;
}

#workskin .notes {
  color: #666666;
  font-size: 1.05em;
  margin: 2em 0;
}

#workskin .notes h3 {
  margin: 1.75em auto 0.5em;
}

#workskin div#chapters {
  width: auto;
  max-width: 40em;
  font-size: 1.12em;
  margin: 2em auto 4em;
}

#workskin div#chapters p {
  margin: 1.4em auto;
  line-height: 1.65em;
}

#workskin div#chapters .summary {
  font-size: 0.94em;
  margin-left: 1.25em;
}

#workskin div#chapters .summary h3 {
  font-size: 1.1em;
  color: #666666;
}

#workskin div#chapters .notes {
  font-size: 0.94em;
  margin-left: 1.25em;
}

#workskin div#chapters .notes h3 {
  font-size: 1.1em;
  color: #666666;
}

#workskin h3.title {
  margin: 1em auto 3em;
}

#workskin .preface + [role="article"] {
  border-top: 1px solid #CCCCCC;
}

#workskin .chapter .preface {
  border-top: none;
}

#workskin #chapters + .afterword {
  border-top: 1px solid #CCCCCC;
}

#workskin [role="article"] + .preface {
  border-top: 1px solid #CCCCCC;
}

#workskin summary {
  cursor: pointer;
}

#workskin .chapternotes {
  font-size: 0.94em;
  color: #666666;
}

#workskin .latin {
  margin: 0 0.15em 0 0.1em;
}

#workskin .thin {
  letter-spacing: -0.15em;
  font-family: 'MS Gothic','Yu Gothic';
}

#workskin .grey {
  color: #808080;
}

#workskin .white {
  color: #EFEFEF;
}

注意：所有开头的 #workskin 都是AO3自动添加的，如果你将它们删去后再贴入AO3保存，AO3依旧会自动补全。这是为了便于任何人随时开启/关闭作者的Skin显示。