CSSエディタ

CSSエディタモジュールは、Omeka Sの管理インターフェースからCSSを記述することを可能にします。

管理ダッシュボードのモジュールセクションで有効化された後、CSSエディタはサイトごとに使用されます。

CSSの使い方が初めての場合、以下の無料リソースが学習を開始するのにお勧めです：

CSS編集のためのOmeka Sページコンポーネントを学ぶ最も簡単な方法は、選んだテーマを見ているときにブラウザの「検証」ツールを使用することです。

CSSエディタインターフェースの使用方法

CSSエディタがアクティブであれば、各サイトのコンテキストメニューにCSSエディタへのリンクが表示されます。

CSSエディタナビゲーションアイテムが強調表示されたOmeka Sサイトのコンテキストメニューのスクリーンショット。

最初の大きなテキストエリアは、個々のスタイルを記述する場所です。これはスタイルシートファイルと同様に使用します。これにより、選択したOmeka Sサイトのすべてのパブリックページのhead内に以下のような行を読み込みます：

<link href="/yoursiteslug/css-editor" media="screen" rel="stylesheet" type="text/css">

この行は、Omekaのデフォルトや選択したテーマから来るスタイルシートの後に表示されます。したがって、ここにあるエントリは、!importantとしてマークされていない限り、それらのファイルに設定された他のスタイルを上書きするべきです。また、メインアクセントカラーやバナーの高さといったテーマ設定からのカスタムCSSなど、この行の下にヘッダーでロードされる他のカスタムCSSがあるかもしれません。これらは、あなたのカスタムCSSに優先して適用される可能性があります。

CSSエディタモジュールインターフェースのスクリーンショット。

CSSエディタを使用すると、URLを入力することで外部スタイルシートを含むことも可能です。外部スタイルシートURLを入力する数に制限はありません。各テキスト入力は単一のURLを受け取り、追加の入力は「別のスタイルシートを追加」ボタンをクリックすることで作成できます。

外部スタイルシートを削除するには、テキスト入力をクリアするか、複数のスタイルシートフィールドがある場合はゴミ箱アイコンをクリックします。

外部スタイルシートフィールドにフォーカスし、削除ボタン（ゴミ箱アイコン）が強調表示されたCSSエディタモジュールインターフェースのスクリーンショット。

チュートリアル：Googleウェブフォントを使用する

カスタムフォントを使用することで、Omeka Sサイトをより特徴的にすることができます。Googleは無料のウェブフォントライブラリを提供しています。このチュートリアルでは、「デフォルト」テーマを使用しているOmeka Sサイトに、CSSエディタインターフェースを通じてウェブフォントを適用する方法を示します。

参考までに、"Default"テーマは、「Open Sans」フォントを使用して以下のように見え始めます。

「デフォルト」テーマのOmeka Sサイトのスクリーンショット。全てのテキストが「Open Sans」を使用しています。

このチュートリアルでは、「Open Sans」を「Lato」フォントファミリーに上書きします。

Googleフォントにアクセスし、「Lato」フォントファミリーを探して、それを選択するためにオレンジ色の「+」ボタンをクリックしてください。
右下に「1ファミリーが選択されました」とラベル付けされたバーが表示されます。このバーをクリックしてください。
バーを開くと、サイトでLatoを使用するために必要な情報が記載されたパネルが表示されます。「このフォントを埋め込む」という最初のセクションには、必要な外部スタイルシートURLがあります。href属性にあるURLを選択してください、下の画像のように。
このURLをCSSエディタの「外部スタイルシート」入力の1つにコピーしてください。
Googleフォントパネルに戻ると、2番目のセクションである「CSSで指定する」があります。font-familyのルールをコピーしてください。
このチュートリアルでは、Latoをサイトのデフォルトフォントとして設定しています。これを実現するために、CSSエディタの大きな「CSS」テキストエリアで、コピーしたルールを使ってbody要素のフォントファミリーを設定してください。
右上隅にある「保存」ボタンをクリックしてください。「デフォルト」テーマの見た目はこれになります。