.. _obsolete-admin-css: ======================================= Django 管理インタフェースのカスタマイズ ======================================= :revision-up-to: 11321 (1.1) .. warning:: このドキュメントが書かれた後に admin の設計は変更されました。そのため、 ここに書かれている内容はもはやあてはまりません。 Django の admin をカ スタマイズするための API は別途開発されているので、このドキュメントは もはやメンテナンスされていません。 Django が動的に生成する admin インタフェースは、コードを書かずに使える完全 な機能を備えた admin を提供しています。 admin は動的管理サイト構築の単なる 足掛かりではなく、実運用の環境でそのまま使えるだけの機能を備えています。 admin ページの根底にある形式は Django で構築されていますが、 admin のスタイ ルシートや画像を編集すればルック & フィールをカスタマイズできます。 このドキュメントでは、 Django の admin の CSS で使われている主要なスタイル とクラスについてざっと紹介します。 モジュール ========== admin 上ではコンテンツをグループ化する基本の構成要素として ``.module`` クラ スを使っています。 ``.module`` は ``div`` や ``fieldset`` に適用されます。 ``.module`` はコンテンツのグループをボックス内にラップし。その中身に一定の スタイルを適用します。例えば、 ``div.module`` 内の ``h2`` タグは、グループ 全体のヘッダになるよう、 ``div`` の上に配置されます。 .. image:: _images/module.png :alt: Example use of module class on admin homepage カラムタイプ ============ .. note:: 管理ページは (ダッシュボード部分を除いて) 全て可変幅 (fluid-width) になっ ており、以前の Django にあった固定幅のクラスは全て除去されています。 admin ページのベーステンプレートには、ページのカラム構造を決めるブロックが あります。このブロックにはページのコンテンツ領域 (``div#content``) のクラス を定義し、コンテンツ領域の幅がわかるようにします。指定できるカラムタイプは 3 種類あります。 colM 全てのページのデフォルトのカラムの設定です。 "M" は "main" を表します。 全てのコンテンツは一つのメインカラム (``div#content-main``) に入るもの と仮定しています。 colMS 一つのメインカラムと、その右側にサイドバーを持つようなページのカラム設 定です。 "S" は "sidebar" を表します。メインのコンテンツは ``div#content-main`` に入り、サイドバーのコンテンツは ``div#content-related`` に入るものと仮定しています。メインの admin ペー ジで使われています。 colSM 上と同じですが、サイドバーは左側に出ます。ソース中でどちらのカラムが先 にでてくるかは関係ありません。 例えば、以下のようなコードをテンプレートに張り付ければ、右側のサイドバーを 2 カラムのページにできるでしょう: .. code-block:: html+django {% block coltype %}colMS{% endblock %} テキストのスタイル ================== フォントサイズ -------------- スタイルシートには、ほとんどの HTML 要素 (ヘッダ、リストなど) に対して コンテキストに応じてベースフォントサイズを指定しています。テキストを 特定のサイズに強制する 3 つのクラスがあります。 small 11px tiny 10px mini 9px (控え目に使ってください) フォントスタイルと字揃え ------------------------ テキストのスタイルもいくつかあります。 .quiet フォント色をライトグレーにします。説明文の傍注意などに便利です。協調の 度合を変えるには ``.small`` や ``.tiny`` と組み合わせて下さい。 .help フォーム要素の機能を説明するインラインヘルプテキストのブロック用に作ら れたクラスです。テキストを小さいグレーで表示し、 ``.form-row`` 要素 (後述の「フォームのスタイル」参照) 内の ``p`` エレメントで使うと、フォー ムフィールドと並ぶようにオフセットを決めます。ヘルプテキストには ``small quiet`` ではなくこのクラスを使ってください。他のエレメントで も使えますが、できるだけ ``p`` に使うようにしてください。 .align-left テキストを左揃えにします。インラインエレメントの入ったブロックエレメン トでしか使えません。 .align-right こんなの気にしませんよね？ .nowrap テキストとインラインオブジェクトがラップされないようにします。 テーブルヘッダなどを一行に収めたい場合に便利です。 float 指定とクリア ------------------ float-left 左よせの float です。 float-right 右よせの float です。 clear float 指定を全てクリアします。 オブジェクトツール ================== フォームやチェンジリストのページには、オブジェクトに直接適用される操作への リンクがあります。これらのリンクはチェンジリストの上にある「ツールバー」行 の右側に表示されます。 ツールは ``object-tools`` クラスの ``ul`` でラップ されています。ツールには二つのカスタムのタイプがあり、ツール内で ``a`` タグ に指定して使うようになっています。 ``.addlink`` と ``.viewsitelink`` です。 チェンジリストページではこのようになります: .. code-block:: html+django .. image:: _images/objecttools_01.png :alt: Object tools on a changelist page フォームページでは以下のようになっています: .. code-block:: html+django .. image:: _images/objecttools_02.png :alt: Object tools on a form page フォームのスタイル ================== フィールドセット ---------------- admin のフォームは ``fieldset`` エレメントでグループごとに分けられています。 各フィールドセットには ``.module`` クラスがなくてはなりません。また、 各フィールドセットの先頭には ``h2`` タグによるヘッダがなくてはなりません (ただし、フォームの最初のグループや、フィールドグループに論理的なラベル を必要としない場合は除きます)。 また、各フィールドセットに ``.module`` 以外の追加のクラスを指定して、フィー ルドグループ全体が適当なフォーマットになるようにしてもかまいません。 .aligned ラベルと input エレメントを同じ行に横並びに配置します。 .wide ``.aligned`` と組み合わせて、ラベルの使えるスペースを広くします。 フォーム行 ---------- (``fieldset`` 内の) フォームの各行は ``form-row`` クラスの ``div`` で囲わね ばなりません。行内に収めるフィールドが必須のフィールドの場合、 ``div.form-row`` には ``required`` クラスを追加せねばなりません。 .. image:: _images/formrow.png :alt: Example use of form-row class ラベル ------ チェックボックスとラジオボタンを除き、フォームのラベルは常にフィールドの前 にきます。チェックボックスやラジオボックスの場合には ``input`` タグが先にき ます。 ``label`` タグ以降の説明文やヘルプテキストは、 ``.help`` クラスの ``p`` タグに入ります。