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 text, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text fro...
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コードを加筆。
この記事は役に立ちましたか?
はいいいえ
同じカテゴリーの記事