ThemeProfessionalCSS
提供: GeeklogJpWiki
［３］管理方法 > 管理者が導入直後に運用環境を設定する > サイトのテーマを設定 > 新推奨テーマ「ProfessionalCSS」
目次 |
新推奨テーマ「ProfessionalCSS」
- 作者 Phize
- ダウンロード Geeklog Japanese
これからのテーマの標準になります。カスタマイズはこのテーマをダウンロードして行ってください。
概要
テーマ「ProfessionalCSS」はオープンソースCMSであるGeeklog(Geeklog Japanese)の新推奨テーマです。 Geeklogの標準テーマである「Professional」のデザインを元に、table要素によるレイアウトを排除し、HTML 4.01 TransitionalとCSS 2で一から全てを書き直しました。
JavaScriptが有効な場合は、Geeklogのカラム数の構成によってbody要素のclass属性が書き換えられます。 これにより、同一のテンプレートファイルのみでCSSによるマルチカラムレイアウトを実現できるようになります。 JavaScriptが無効な場合は、body要素のclass属性は常に一定であるため、常に3カラムレイアウトとなります。
新しいテーマを制作する際のベーステーマとしてもご利用いただけます。 なお、システムとの整合性を保つため、マークアップ、命名規則等はGeeklog側に合わせている部分があります。
custom.sample.cssをサンプル提供しています。これは，ProfessionalCSSでテーマprofessionalのように表示するためのスタイルを一旦すべてクリアするためのものです。
あたらしくProfessionalCSSをベースにしてスタイルを作成する場合，custom.cssに定義しますが，custom.css先頭に，custom.sample.cssの内容を記述した上で利用してください。
インストール方法
「ProfessionalCSS」テーマのlayoutフォルダをGeeklogの公開ディレクトリにコピーします。
layout -- コピー --> layout ProfessionalCSS
ファイル・ディレクトリ構成
1.00以降
+layout ------------------ Geeklogテーマディレクトリ +ProfessionalCSS -------- 「ProfessionalCSS」テーマディレクトリ +admin +article +calendar +comment +forum +navbar +preferences ---------- テンプレートファイル・ディレクトリ +profiles +search +stats +submit +trackback +users +css ------------------ CSSディレクトリ | | ディレクトリ構造はテンプレートファイルのディレクトリと対応しています。 | | | +plugin ------------- プラグイン用CSSディレクトリ | | プラグイン用のCSSファイルが入っています。 | +forum.css --------- 掲示板プラグイン用CSSファイル | Geeklog Japaneseパッケージのものを修正して使用しています。 | +images --------------- 画像ディレクトリ | | | +css ---------------- CSSファイル用画像ディレクトリ | CSSで使用する画像ファイルが入っています。 | +javascript ----------- JavaScriptディレクトリ | | | +fix_html.js -------- Geeklogのカラム数に応じてbody要素のclass属性を書き換えます。 | +README --------------- 「ProfessionalCSS」テーマのドキュメント(このファイル) | +style.css ------------ CSSファイルのインポート用CSSファイル | +custom.css ----------- カスタマイズ用CSSファイル | +custom.sample.css ---- カスタマイズ用CSSファイル(サンプル)
バージョン履歴
「ProfessionalCSS」テーマのバージョン履歴は同梱の「README」ファイルをご覧下さい。 バージョン履歴には、各バージョンで更新・追加・削除の対象となったディレクトリ・ファイルを丸括弧内に記載しています。 ディレクトリ・ファイル名の前には、更新・追加・削除したことを表すために下記の記号を付けています。
* 更新 + 追加 - 削除
テンプレートファイル
「ProfessionalCSS」に同梱されているテンプレートファイル(拡張子「.thtml」)についての説明です。
コメント
テンプレート(.thtml)ファイルには下記のコメントを挿入しています。
・テンプレートファイル名 全てのテンプレートファイルの先頭と末尾にテンプレートファイル名を挿入しています。
<!-- ディレクトリ名/ファイル名.thtml { -->～<!-- } ディレクトリ名/ファイル名.thtml -->
特定のバージョンの為に記述されている箇所には、下記の形式でコメントを挿入しています。
・Geeklog Japanese
<!-- Geeklog Japanese -->
または、
<!-- Geeklog Japanese { -->～<!-- } Geeklog Japanese -->
・Ver.x.x.xより大きい
<!-- Geeklog GT x.x.x -->
または、
<!-- Geeklog GT x.x.x { -->～<!-- } Geeklog GT x.x.x -->
・Ver.x.x.x以上
<!-- Geeklog GTE x.x.x -->
または、
<!-- Geeklog GTE x.x.x { -->～<!-- } Geeklog GTE x.x.x -->
・Ver.x.x.x
<!-- Geeklog x.x.x -->
または、
<!-- Geeklog x.x.x { -->～<!-- } Geeklog x.x.x -->
・Ver.x.x.x以下
<!-- Geeklog LTE x.x.x -->
または、
<!-- Geeklog LTE x.x.x { -->～<!-- } Geeklog LTE x.x.x -->
・Ver.x.x.xより小さい
<!-- Geeklog LT x.x.x -->
または、
<!-- Geeklog LT x.x.x { -->～<!-- } Geeklog LT x.x.x --></nowiki>
CSS
「ProfessionalCSS」に同梱されているCSSファイル(拡張子「.css)についての説明です。
CSSファイル構成・カスケード順序
+style.css -------------------------- header.thtml内のlink要素によって読み込まれます。
+css/debug.css -------------------- デバッグ用スタイル(1.00以降には同梱されていません)
id, class属性値とボックスボーダーを表示します。
標準ではコメントアウトされているので読み込まれません。
+css/default.css ------------------ デフォルトスタイル
W3CによるCSS 2.1 仕様書 Appendix Dの推奨デフォルトスタイルで上書きします(一部を除く)。
URI: http://www.w3.org/TR/2004/CR-CSS21-20040225/sample.html
+css/common.css ------------------- 共通スタイル
サイト全体のスタイルです。
+css/layout.css ------------------- 基本レイアウトスタイル
+css/block.css -------------------- ブロックスタイル
+css/option.css ------------------- オプションメニュースタイル
+css/form.css --------------------- フォームスタイル
+css/story.css -------------------- 記事スタイル
+css/article/article.css ---------- 個別記事ページスタイル
+css/comment/comment.css ---------- コメントスタイル
+css/navbar/navbar.css ------------ ナビゲーションスタイル
+css/preferences/preferences.css -- 設定ページスタイル
+css/profiles/profiles.css -------- メール送信ページスタイル
+css/search/search.css ------------ 検索ページスタイル
+css/stats/stats.css -------------- アクセス情報ページスタイル
+css/submit/submit.css ------------ 投稿ページスタイル
+css/trackback/trackback.css ------ トラックバックスタイル
+css/users/users.css -------------- アカウント情報ページスタイル
管理者ページスタイルシート
+css/admin.css -------------------- インポート用スタイルシート(管理者ページ)
+css/admin/common.css ----------- 共通スタイル(管理者ページ)
+css/admin/block.css ------------ ブロックエディタスタイル(管理者ページ)
+css/admin/group.css ------------ グループエディタスタイル(管理者ページ)
+css/admin/lists.css ------------ リストスタイル(管理者ページ)
+css/admin/mail.css ------------- グループメールページスタイル(管理者ページ)
+css/admin/moderation.css ------- 管理画面スタイル(管理者ページ)
+css/admin/plugins.css ---------- プラグインページスタイル(管理者ページ)
+css/admin/story.css ------------ 記事エディタスタイル(管理者ページ)
+css/admin/syndication.css ------ RSS配信エディタスタイル(管理者ページ)
+css/admin/topic.css ------------ 話題エディタスタイル(管理者ページ)
+css/admin/trackback.css -------- トラックバックページスタイル(管理者ページ)
+css/admin/user.css ------------- ユーザエディタスタイル(管理者ページ)
プラグインスタイルシート
+css/plugin.css ------------------- インポート用スタイルシート(プラグイン)
+css/plugin/sitecalendar.css ---- サイトカレンダスタイル(プラグイン)
+css/plugin/forum.css ----------- フォーラムスタイル(プラグイン)
カスタムテーマスタイルシート
+custom.css ----------------------- カスタムテーマスタイルシート
1.00以降 サンプルとして、custom.sample.cssを同梱しています。
0.99.3以前 標準ではコメントアウトされているので読み込まれません。サンプルとして_custom.cssを同梱しています。
プロパティ記述順序
一部の例外を除き、CSSのプロパティは下記の順序で記述されています。
*display *visibility *overflow *list-style *position *float *clear *top right bottom left *width *height *margin *padding *border *background color image repeat position attachement *color *font style variant weight size line-height family *text-decoration *text-align *vertical-align *white-space *other text *quotes *content
カスタマイズ
ProfessionalCSSテーマでは、表現に関する制御をCSSで行っているため、テンプレートファイルに手を加えることなく、簡単にテーマをカスタマイズすることができます。 基本的なレイアウト・デザインは、下記のCSSファイル内で定義されたスタイルを変更するだけでカスタマイズが行えるようになっています。
- css ------------- CSSディレクトリ
- common.css ---- 共通スタイル
- layout.css ---- 基本レイアウトスタイル
- block.css ----- ブロックスタイル
- option.css ---- オプションメニュースタイル
- form.css ------ フォームスタイル
- story.css ----- 記事スタイル
カスタマイズ方法
ProfessionalCSSテーマをベースにしたカスタマイズを行うには、上記や「CSS: CSSファイル構成・カスケード順序」のCSSファイルを直接、編集するほかに、別途、専用のCSSファイルを用意してカスタマイズする方法があります。 特に理由がない場合には、ProfessionalCSSテーマのバージョンアップにも対応できるように、専用のCSSファイル(custom.css)を利用する方法をおすすめいたします。
専用のCSSファイル(custom.css)を利用したカスタマイズ
この方法は、カスタマイズ部分を専用のCSSファイル(custom.css)に分離するため、ProfessionalCSSテーマに変更があった場合でも柔軟に対応できるとともに、カスタマイズしたテーマの保守・管理性も高まります。 CSSの特徴であるカスケードを活かしたカスタマイズ方法です。
custom.sample.cssの内容を最初に記述した上で，あらたにスタイルを追加してご利用ください。
1.00以降
- 各CSSファイルからカスタマイズする箇所をcustom.css内にコピー&ペーストします。
- セレクタのみを残し、宣言(プロパティと値)を削除したあと、上書きしたいスタイルを記述していきます。
サンプルとして、custom.sample.cssを同梱しています。 既存のcustom.cssを削除して、ファイル名をcustom.sample.cssからcustom.cssへ変更すれば、そのままカスタマイズのベースとして利用できます。
なお、custom.cssから呼ばれる画像はimages/css/ではなく、images/custom/に置くことをおすすめします。
CSSファイルの置き換えによるカスタマイズ
基本レイアウトや各箇所のデザインを大幅に変更する場合には、「ProfessionalCSS」テーマの構成はそのままに、一からCSSファイルを制作した方が良い場合があります。 新たにCSSファイルを作成する際には、同様のCSSファイルの記述に倣って作成することをおすすめします。 この方法は、あらかじめカスタマイズ後のイメージがはっきりしている場合におすすめです。
TIPS
どのファイルを変更すれば良いか調べるには
テンプレートファイルに関連するCSSファイルを知りたい場合
- CSSファイル内の冒頭にあるコメントの「適用先」をご覧下さい。
- スタイルの適用先となるテンプレート(.thtml)ファイルを記述しています。
ブラウザ等に表示されたページからカスタマイズ箇所を知りたい場合
- ブラウザから「ソースを表示」に該当するメニューを選択してください。
- あるいは、対象となる範囲をドラッグで選択した後、「選択範囲のソースを表示」に該当するメニューを選択してください。
- 表示されたソース内に、使用されているテンプレート(.thtml)ファイル名がコメントとして挿入されています。
変更したスタイルが反映されないときは
正しい手順でカスタマイズを行ったにも関わらず、変更したスタイルが反映されないときはCSSの特殊性(specificity )を疑ってみてください。 CSSではセレクタの記述方法によって、その規則の優先順位が決定されます(Cascading Style Sheets, level 2 CSS2 Specification - 6.4.3 Calculating a selector's specificity: [1])。 「ProfessionalCSS」テーマのCSSでは、セレクタに要素タイプ名やID名、クラス名をできるだけ省略せずに記述しているため、概してそれぞれの特殊性が高くなっています。 変更した部分のセレクタが、元となるCSSファイル内の規則の特殊性よりも低くなっていないか確認してください。 また、推奨はしませんが、全ての宣言の後に「!important」キーワードを指定すると優先順位が高くなります。
