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

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

There is an English version.

I created an Archive of Our Own site skin with more readability. Feel free to copy, paste and modify it for your own use.

動作保証はありません

初心者が書いたコードなので、間違いや不備が含まれている可能性が高いです。

お教えいただけますと訂正できるので大変助かります。

知的財産権以外の日本語連絡フォーム

CSS コード

テストしたブラウザ

  • Desktop Chrome
  • iPhone 5s Safari

「ここをタップしてコピー」をタップかクリックすると、クリップボードに次のコードがコピーされます。

#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;
}

CSSコードを適用させる方法

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

実際にどう見えるか

改変したい方向けの内容説明

改変元のsite skin

Show Skin | Archive of Our Own
An Archive of Our Own, a project of the Organization for Transformative Works

背景色をカラーコード #deb887のBurlywood に変える

モバイル用は次のコード

#outer {  
   background: #deb887;  
 }

パソコン用は次のコード

body {
   background: #deb887;
 }

字が大きくされているとき用の、 Title, Author, Summary, Notes をモバイル画面にフィットさせる調整

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

物語の幅を800pxに設定する

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

字を150%大きくし、 その結果はみ出した要素を折り返す

参考
overflow-wrap - CSS: Cascading Style Sheets | MDN
The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to preve...
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;
}

Dashboardの要素を横長に表示する

参考
Show Skin | Archive of Our Own
An Archive of Our Own, a project of the Organization for Transformative Works
#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;
}

再配布について

この記事のURLを再配布が行われるウェブページに表示していただければ、CSS コードは再配布可です。

変更履歴

2019年12月1日: 公開

2019年12月7日:「CSS コード」と「字を150%大きくし、 その結果はみ出した要素を折り返す」にCSSコードを加筆。

この記事は役に立ちましたか?
はいいいえ
サクサクやりたい
タイトルとURLをコピーしました