Archive of Our Ownのsite skinを適用させる方法

2021年7月18日全面改訂。

There is an English version.

How to apply an Archive of Our Own site skin

https://frostygrass.net/how-to-apply-an-archive-of-our-own-site-skin-en/

2019.12.02

事前に用意する物

Archive of Our Ownのアカウント

CSSコード

この説明で使われているCSSコードは

#outer {
  background: #deb887;
}

body {
  background: #deb887;
}

div.preface {
  max-width: 600px;
  margin: auto;
}

div#workskin {
  max-width: 800px;
}

body {
  font-size: 150%;
}

#footer {
  overflow-wrap: break-word;
}

p.kudos {
  overflow-wrap: break-word;
}

.blurb h4 a:link,
.blurb h4 img {
  overflow-wrap: break-word;
}

div.preface .associations {
  overflow-wrap: break-word;
}

.comment h4.byline {
  overflow-wrap: break-word;
}

a.tag {
  overflow-wrap: break-word;
}

#outer #dashboard,
#main.dashboard {
  float: none;
  width: auto;
  max-width: 100%;
  margin: 1%;
  padding: 0;
  clear: both;
}

#dashboard ul.navigation {
  float: left;
  margin: 3.5%;
}

#dashboard .landmark {
  clear: none;
  float: left;
}

Archive of Our Own を読みやすくするsite skin を作りました。コピペ編集してお使いください。

https://frostygrass.net/i-created-an-archive-of-our-own-site-skin-with-more-readability-feel-free-to-copy-paste-and-modify-it-for-your-own-use-ja/

2019.12.01

site skinの適用方法

STEP 1: 画面右上のLog Inという文字をタップする。

STEP 2: 上の欄にUser nameもしくはメールアドレス、下の欄にパスワードを入力し、枠内右下のLog Inボタンをタップする。

STEP 3: Hi, [User name]と書かれた左横にあるロゴをタップする。

STEP 4: Skinsという文字をタップする。

STEP 5: Create Site Skinと書いてあるボタンをタップする。

STEP 6: Title*という文字の下の欄に、他のArchive of Our Ownユーザーが保存したsite skinのタイトルと重複しない文字列を入力する。

Free Password Generator | Create Strong Passwords | Bitwarden

Easy and secure password generator that's completely free and safe to use. Generate strong passwords for every online account with the strong Bitwarden password...

https://bitwarden.com/password-generator/

STEP 7: CSSという文字の下の欄に、適用させたいCSSコードを入力する。

STEP 8: Submitと書いてあるボタンをタップする。

STEP 9: 画面が切り替わったら、下にスクロールして、Useと書いてあるボタンをタップする。

STEP 10: 画面が切り替わって、"Your preferences were successfully updated."と表示されたら完了。

以上