Archive of Our Own ^beta

はじめに

このチュートリアルでは、Archive of Our Own – AO3（みんなのアーカイブ）で使用できる作品スキンを作成する方法について、ひとつずつ順を追って解説していきます。このチュートリアルを最後まで読めば、自分オリジナルの作品スキンを作成する方法や、CSSを使ってカスタムスタイルを指定する方法、自分が投稿した作品を選んで作品スキンを適用する方法がわかります。

このチュートリアルは以下のことを前提として書かれています：

• AO3に作品を投稿できる知識があること。もしまだAO3に作品を投稿したことがなければ、まず投稿と編集についてのFAQや、投稿についての手順を解説した作品投稿のチュートリアルを確認することをおすすめします。
• CSSに関する基礎的な知識があること。CSSがどんなものか知りたい方は、W3Schools CSS TutorialにCSSの基礎を学べる無料コースがありますのでそちらをご覧ください。
• デフォルトスキン（Archive 2.0）でサイトにアクセスしていること。カスタムスキンをご利用の場合、サイトのレイアウトがチュートリアルでの説明と違うものになってしまうことがあります。これは仕様ですので、ご理解いただければ幸いです。

作品スキンがどういうものなのかよくわからないという方や、自分で作るのではなく既存のスキンのスタイルを作品に適用したい方は、スキンとアーカイブインターフェイスについてのFAQを参照してください。

Create New Skin （新規スキン作成）フォームへ移動する

はじめに、Skins（スキン）ページにアクセスしましょう：

1. AO3にログインし、「Hi, （ユーザーID）!」にカーソルを合わせて表示されるメニューから「My Dashboard」（私のダッシュボード）を選ぶか、もしくはプロフィール画像から自分のダッシュボードにアクセスします。
2. ページのサイドバーに表示されるメニューから "Skins" を選んでください。モバイルデバイスでは、メニューはページの上部に表示されます。

これで、My Site Skins（あなたのサイトスキン）ページに移動できます。このページにはカスタムしたサイトスキンのリストや、カスタムした作品スキンおよび公式スキンにアクセスするためのボタンが表示されます。サイトスキンと作品スキンの違いについては、スキンとはなんですかを参照してください。

今回は新しい作品スキンを作成するので、"My Work Skins"（私の作品スキン）ボタンを押し、"Create Work Skin"（作品スキンの作成）から新規スキンの作成フォームに移動してください。

新規作品スキンの作成

カスタムCSSを使用した新規スキンの作成にあたって、入力が必要な項目はType （種類）、Title （タイトル）CSSの3つだけです。他の項目の入力は必須ではありませんが、このチュートリアルではすべての項目について解説します。

どの項目も、作成、登録後にこのページに戻って編集することができます（詳細については作品スキンの編集を参照してください）。

Type（種類　※必須項目）

Skins（スキン）ページから "Create Work Skin"（スキンを作成） ボタンを選んで移動した場合、デフォルトでは "Work Skin"（作品スキン）が選択されているはずです。

Title（タイトル　※必須項目）

他のスキンと区別がつくように、自分のスキンにわかりやすいタイトルを付けてください。スキンのタイトルは重複しない独自のものでなければいけません。ですので、タイトルにはユーザー名を入れることをおすすめしています（例："Homestuck Skin (username)"）。

Description（説明）

ここには、あなたのスキンが持つ機能やテーマについての説明文を記入します。スキンの説明文の書き方については、Public Site Skins（公式サイトスキン）またはPublic Work Skins（公式作品スキン）のページが参考になるでしょう。

Upload a preview（プレビューのアップロード）

この項目には、CSSのデザインがどう表示されるかを撮影したスクリーンショットをアップロードすることができます。プレビューは作品スキンを作成して使用しはじめてから、あとでアップロードすることも可能です。

Apply to make public（公式スキンとして申請する）

この機能は現在廃止されており、将来的には削除予定です。現時点ではカスタムスキンを公式スキンにすることはもうできなくなっているため、この項目にチェックを入れてもスキンの公開状態が変化することはありません。

CSS

Create New Skinの最後の項目は、カスタマイズしたCSSを入力する欄になっています。以降のセクションでは、あなたの作品のデザインを決定するCSSをどのように入力していくか、その方法について説明していきます。

ページ上部に "Use Wizard" (ウィザードを使う)というボタンがあることに気づかれたかもしれません。このボタンからは簡単にスキンを作成できる Site Skin Wizard（サイトスキンウィザード）のページに移動できますが、このウィザードを使って作成できるのはサイトスキンのみで、作品スキンは作れません。（詳しくはスキンウィザードとはなんですか？をご覧ください）

ですがご心配なく―このチュートリアルに従えば、あなたもすぐに、ウィザードなしで簡単にスキンを作成できるようになります！

CSSを使用する

セキュリティ上の理由から、AO3がサポートできるCSSのプロパティと値の種類は限定されています。入力したCSSにサポートされていないコードが含まれていた場合、変更を保存するとその後自動的に削除されるようになっています。

CSS入力欄の上にある青いクエスチョンマーク ?0を選ぶと、サポートされているCSSプロパティのリストを確認することができます。フォントや色指定、URLやその他についての情報を知りたい方は、カスタムスキンで使えるプロパティと値をご覧ください。

カスタムCSSの入力

このセクションではCSSを入力し、あなたの作品をどんなデザインにするか決めていきます。自分で好きなようにCSSを入力してみても、以下の入力例に従ってみてもかまいません。

例えば、以下のようなHTMLがあるとします。

  
<p>ビリーへ</p>
<p>これはあなた宛の手紙です。読んであなたが <strong>すごく</strong>驚くといいな。.</p>
<p>敬具,</p>
<p>アデレード</p>

どんな作品スキンも適用されていない場合、このテキストはAO3の作品用デフォルトスタイルで表示されます。

このテキストを下の画像のような手書き風の見た目にしたい場合、CSSでカスタムスタイルを作成する必要があります。

はじめに、このテキストのまわりに黒い罫線を追加して、フォントの種類を変更し、フォントサイズを大きくします。作品スキン用CSSの入力欄に、以下のような内容を入力してください：

  
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
Font-family: "Yu Mincho", serif;
}

次に、署名（アデレード）の部分に特別なスタイルを適用するためにCSSを追加します。署名の部分のフォントサイズをさらに大きくし、色を赤に変更するために、以下のようなCSSコードを入力してください：

  
#workskin .signature {
font-size: 1.2em;
color: red;
}

最後に、強調されているテキスト（「すごく」の部分）に下線を追加するためのCSSを追加します：

  
#workskin strong {
border-bottom: 3px double;
}

これで、CSSの入力欄には3種類のスタイルが入力されているはずです：

  
#workskin .letter {
border: 1px solid;
padding: 15px;
font-size: 1.1em;
Font-family: "Yu Mincho", serif;
}
#workskin .signature {
font-size: 1.2em;
color: red;
}
#workskin em {
border-bottom: 3px double;
}

W3Schools CSS Referenceでは、作品スキンで使うことができるその他のCSSプロパティが便利なリストにまとまっています。こちらもあわせてご覧ください。

スタイルの例を見てみたい場合は、 公式作品スキン のページをチェックすることをおすすめします。

注意：CSSセレクタ（.letter や .signature、 em要素など）をIDセレクタ #workskin 以下へ入れ子（ネスト）にしないと、自分のスタイルを適用することはできません。スタイルは適用されると、選んだ作品の作品ページに表示される作品情報および "↑ Top"（トップ）ボタンの上に表示される内容だけに反映されます。ですが、もし #workskin 以下にCSSを入れ子にするのを忘れてしまったとしても、コードの保存後にAO3側が自動で入れ子になるように処理を行います。

新しい作品スキンの保存

入力したCSSのコードを見直してこれでいいと思ったら、 "Submit" （保存）ボタンを選択して新しい作品スキンを保存しましょう。スキンのスタイルは、手動でスキンをそれぞれの作品に追加するまでは反映されません。（これについては作品スキンの適用で詳しく説明します。

"Submit"（保存）ボタンを押すと、サポートされていないコードはAO3側によって自動的に削除され、すべてのセレクタがIDセレクタ #workskin 以下に入れ子になるよう処理が行われます。

作品スキンの編集

新しい作品スキンを保存するとすぐに、コードの見直しや "Edit"（編集）ボタンからのコードの変更を行うことができます。

作品スキンの適用

さあ、オリジナルの作品スキンができましたーこれでもう、AO3にある自分のどの作品にもスキンを適用することができます。ただし、以下の点に注意してください：

• 1つの作品に適用できる作品スキンは1つだけです。
• 1つのスキンは複数の作品に適用できます。
• スキンを削除した場合、そのスキンを適用していた作品のスタイルはすべてデフォルトに戻ります。
• 誰かと共同で作品を執筆した場合、共同執筆者（たち）もあなたの作品スキンを共同で制作した作品に適用できます。

新しいスキンを適用したい作品を決めたら、その作品の Edit Work（作品編集）ページにアクセスしてください。もっと詳しい説明がほしい場合は、作品を編集する方法 をご覧ください。

作品編集ページの Associations （関連事項）欄にある "Select Work Skin" （作品スキンの選択）のプルダウンメニューから、オリジナル作品スキンのタイトルを選択します。

作品スキン内のCSSセレクタがすでに自分の作品のHTML（<p>、<em>タグなど）に対応している場合、次のセクションを読むのは飛ばして作品の保存とプレビューまで進んでしまってもかまいません。例えば、作品に含まれる文中のイタリック体すべてに二重の下線を引きたい場合は、以下のようなCSSを作品スキンのコードに追加すれば、<em>タグをつけたテキストすべてに二重の下線が加わります：

  
#workskin em {
border-bottom: 3px double;
}

CSSセレクタを作品のHTMLで使用する

もし記述したCSSセレクタがまだ自分の作品のHTMLに対応していないなら、作品のHTMLに<div>や<span>タグ、クラスやidを追加しましょう。作品のHTMLタグは、Edit Work（作品編集）ページにある Work Text（作品テキスト）セクションから編集できます。このとき、かならず "HTML" ボタンを選択するようにしてください。

先ほどのカスタムCSSの入力で自分のCSSを入力済みなら、この先の指示に従って対応するCSSセレクタを作品のHTMLに加えてください。そうでない場合は、先ほどのHTML入力例を用いて説明していきます。

この入力例には、以下のようにタグ付けされたテキストが含まれています：

  
<p>ビリーへ</p>
<p>これはあなた宛の手紙です。読んであなたが <strong>すごく</strong>驚くといいな。</p>
<p>敬具</p>
<p>アデレード</p>

作品スキンに含まれるこの3つのスタイルを適用するには、記述したCSSコードのセレクタに対応するHTML要素および属性を作品のテキスト内に挿入する必要があります：

1. 作品スキンのCSSで指定したスタイルを文字に適用するために、クラス名を.letterに指定した<div>タグの中に作品テキスト全体を入れます。
2. スタイルを署名部分に適用するために、最後のパラグラフのタグにクラス名.signatureを追加します。
3. すでにCSS内でstrongタグに対応する<strong>セレクタは定義してあるので、二重の下線を適用するためにコードを追加する必要はありません。

新たにタグ付けが終わった後のHTMLテキストは、以下のように表示されるはずです：

  
<div class="letter">
<p>ビリーへ</p>
<p>これはあなた宛の手紙です。読んであなたが <strong>すごく</strong> 驚くといいな。</p>
<p>敬具</p>
<p class="signature">アデレード</p>
</div>

作品の保存とプレビュー

新しいスタイルがどのように見えるかは "Preview"（プレビュー）ボタンからチェックすることができます。作品をプレビューなしで保存したい場合は、"Post Without Preview"（プレビューせずに保存）を選択してください。

お疲れ様でした。これで、あなたの作品がよりおしゃれに表示されるようになりました！

CSSの入力と CSSセレクタを作品のHTMLで使用するでの入力例を使ってチュートリアルをおこなった場合、作品のテキストは手書き風の見た目になるはずです。

作品スキンを同時に複数の作品へ適用したい場合、複数の作品を一括編集する方法を参照してください。一括編集を行っても、自分の作品スキンで指定したCSSセレクタに対応するHTMLがタグ付けされていない作品には、ひとつひとつ個別にCSSセレクタを挿入する必要があるため、その点にはお気を付けください。

作品の投稿と編集に関する詳細については、 投稿と編集 FAQをご覧ください。また、作品を投稿する詳しい手順については、作品投稿のチュートリアルで確認することができます。

FAQを見ても問題が解決しなかった場合

サイトスキンや公開スキンなども含めたスキンについてもっと知りたい方は、スキンとアーカイブインターフェイス FAQを参照してください。Archive of Our Own – AO3（みんなのアーカイブ）に関する、ここに書かれている以外のよくある質問については、AO3 FAQをご覧ください。サービス利用規約に関する質問・回答については利用規約FAQをご覧ください。また、既知の問題もあわせてご確認ください。これらのページを見ても問題が解決しなかった場合は、ユーザーサポートまでお問い合わせください。