ＰＬＥＳＫカスタムスキンの作成とインストール > スキンを作成する

カスタマイズ可能な属性

カスタマイズ可能なユーザーインターフェースのすべての要素は CSSファイル内の該当するセレクタとして述べられています。 このセクションではユーザーインターフェースのエリアごとのセレクタと要素が、 CSS内でのセレクタの簡単な例とともにリストアップされています。

全般

インターフェースのすべてのエリアに共通する属性はgeneral.cssファイルにおいて定義されています。 

表 2.1. 全般的な属性

インターフェース要素 セレクタ CSSコード例
共通の背景、フォント body, td, th 
body {
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  color: #000000;
  background-color: #f6f6f6; 
}

td, th  {
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}
フォーム要素 input, select, textarea 
input, select, textarea { 
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; 
  font-size: 11px; 
}
リンク a 
a:link, 
a:visited,
a:hover {
   color: #0240a3;
}

要素についても、それらの属性をお好みで再定義することができます。

トップエリア

  1. ロゴタイプイメージ
  2. 背景
  3. フレーム分割ライン
  4. トップレフトイメージ

表 2.2. トップエリアの属性

番号 セレクタ CSSコード例
1. ユーザーインターフェースを通じて設定することができます。デフォルトのイメージはスキン(images/def_plesk_logo.gif) に含まれています。 
-
2, 3. body 
body {
  background-color: #ffffff;
  background-image: url(../../images/top_bg.jpg);
  background-repeat: repeat-x;
  background-position: left bottom;
}
4. .body 
.body {
  background-image: url(../../images/top_body_bg.jpg);
  background-repeat: no-repeat;
  background-position: top right;
}

左サイドのナビゲーションエリア

  1. 背景
  2. ナビゲーションセクションヘッダー背景
  3. ナビゲーションセクションヘッダー
  4. 展開/縮小ナビゲーションセクション
  5. ナビゲーションセクションエリア
  6. ナビゲーションアイテム
  7. 選択したナビゲーションアイテム
  8. ログインしているユーザー情報
  9. コンテキストヘルプ
  10. 'powered by'ロゴタイプイメージ

表 2.3. 左サイドナビゲーションエリアの属性

番号 セレクタ CSSコード例
1. body 
body {
  background-color: #6e89dd;
}
2.

.navOpened

.navClosed

 
.navOpened,.navClosed {
  background-color: #ffffff;
}
3.

.navOpened .navTitle .titleText

.navClosed .navTitle .titleText

 
.navOpened .navTitle .titleText, 
.navClosed .navTitle .titleText {
  color: #215dc6;
}
3.

Mouse over

.navOpened .navTitleOver .titleText

.navClosed .navTitleOver .titleText

 
.navOpened .navTitleOver .titleText,
.navClosed .navTitleOver .titleText {
  color: #428eff;
}
4. .navTitle .titleHandle 
.navTitle .titleHandle {
  background-color: #215dc6;
}
4.

Mouse over

.navTitleOver .titleHandle

 
.navTitleOver .titleHandle {
  background-color: #428eff;
}
5. .tree 
.tree {
  background-color: #d6dff7;
}
6. .name 
.name a:link,
.name a:visited,
.name a:active {
  color: #215dc6;
}

.name a:hover {
  color: #428eff;
}
7. .nodeActive .name 
.nodeActive .name {
  background-color: #3878bf;
 }
 
.nodeActive .name a:link,
.nodeActive .name a:hover,
.nodeActive .name a:visited,
.nodeActive .name a:active {
  color: white;
}
8. #userInfo 
#userInfo {
  color: #555555;
}
9. #contexthelp 
#contexthelp {
  color: #555555;
  border-top: 1px solid #A7B8EB;
}
10. body 
body {
  background-image: url(../../images/powered_by.gif);
  background-position: left bottom;
  background-repeat: no-repeat;
}

メインエリア

メインエリアは2つのエリアから構成されています：

  1. スクリーンタイトル - 現在表示されているスクリーンのタイトル
  2. スクリーンコンテンツ - 現在利用(閲覧)可能なオペレーションのセット、入力フィールド、リストなど

以下はメインエリアを構成するサブエリアとその要素の説明です。

スクリーンタイトル

  1. パスバー
  2. タイトル
  3. '上へ'リンク

表 2.4. スクリーンタイトルの属性

番号 セレクタ CSSコード例
1. .pathbar 
.pathbar {
  background: #ffffff;
  color: #444444;
}

.pathbar a:link,
.pathbar a:visited,
.pathbar a:hover {
  color: #444444;
}
2. .screenTitle 
.screenTitle {
  background: #ffffff;
  border-bottom: 1px solid #cccccc;
}

.screenTitle td {
  font-size: 18px;
  font-family: "Franklin Gothic Medium", Verdana, Arial, sans-serif;
  color: #000000;
}
3.

.uplevel .commonButton span

アイコンはbuttons.cssの#bid-up-levelを使用して変更することができます。

 
.uplevel .commonButton span {
  text-decoration: underline;
}

in buttons.css:

#bid-up-level span {
  background-image: url(../../images/btn_uplevel_bg.gif);
}

一般的なスクリーンコンテ ンツ

  1. スクリーンコンテンツ背景
  2. グループユーザーインターフェース要素のフィールドセット
  3. フィールドセットのタイトル

表 2.5. 一般的なスクリーンコンテンツの属性

番号 セレクタ CSSコード例
1. body 
body {
  background: #F9F8F8;
}
2. fieldset 
fieldset {
}

Presently not available, using default value.
3. legend 
legend {
  color: #0046D5;
}

ツール

現在のスクリーンのオペレーションのセット：

  1. ツール
  2. ツール(利用不能)
  3. セパレータ

表 2.6. ツールの属性

番号 セレクタ CSSコード例
1.

.toolsArea .commonButton

アイコンはbuttons.cssのid(例 #bid-report)を通じてカスタマイズされます。 

.toolsArea .commonButton {
  text-decoration: underline;
}

in buttons.css:

#bid-report {
  background-image: url(../../images/btn_report_bg.gif);
}
2.

.toolsArea span.commonButton

アイコンはbuttons.cssのid(例 #bid-report)を通じてカスタマイズされます。 

.toolsArea span.commonButton {
  color: #999999;
  text-decoration: none;
}

in buttons.css:

#bid-register-disabled {
  background-image: url(../../images/btn_register-disabled_bg.gif);
}
1. hr 
hr {
  color: #cccccc;
  background-color: #cccccc;
  height: 1px;
}

リスト

リストのオブジェクト：

  1. リストのオペレーション
  2. テーブルのヘッダー
  3. テーブルのヘッダー(リストをソートするために選択されたパラメータ)
  4. テーブルの行

表 2.7. リストの属性

番号 セレクタ CSSコード例
1.

.buttons .commonButton span

アイコンはbuttons.cssのid(例 #bid-report)を通じてカスタマイズされます。 

.buttons .commonButton span {
  text-decoration: underline;
}

in buttons.css:

#bid-show-all span {
  background-image: url(../../images/btn_show-all_bg.gif);
}
2. th 
th {
  text-align: left;
  background: #D6DFF7;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

th a:link, 
th a:visited {
  color: #000000;
  text-decoration: none;
}

th a:hover {
  text-decoration: underline;
}
3. .sort 
.sort {
  background-color: #ABBEEF; 
}
4.

.oddrowbg - 奇数の行に適用

.evenrowbg - 偶数の行に適用

 
.evenrowbg {
  background-color: #F0F0F0; 
}       
.oddrowbg {
  background-color: #ffffff;
}

ダイアログフォーム

  1. パラメータ名
  2. '必須'インジケータ
  3. 脚注
  4. ボタン

表 2.8. ダイアログフォームのパラメータ

番号 セレクタ CSSコード例
1. .name 
.name {
  font-weight: bold;
  color: #555555;
}
2. .required 
.required {
  color: #cc0000;
}
3. .footnote 
.footnote {
  color: #666666;
}
4.

.commonButton

.buttons .commonButton span

アイコンはbuttons.cssのid(例 #bid-report)を通じてカスタマイズされます。 

.commonButton button {
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #000000;
  background-color: transparent;
  background-image: url(../../images/btn_bg.gif);
  border: 0 solid white;
  background-repeat: no-repeat;
}

in buttons.css:

#bid-ok button {
  background-image: url(../../images/btn_ok_bg.gif);
  padding-left: 8px;
}

タブ

特定のシステムオブジェクトの属性をタブを用いてグループ分けすることができます。

  1. タブアイテム
  2. アクティブなタブ
  3. 最後のタブ
  4. タブパネル

タブの属性はtabs.cssファイルにおいて定義されています。

表2.9. タブの一般的な属性

番号 セレクタ CSSコード例
1. タブアイテム #tabs a, #tabs li 
#tabs a {
display: block;
background:url("../../icons/tabs/right.gif") no-repeat right top;
padding:5px 9px 4px 4px;
vertical-align: baseline;
text-decoration: none;
color: #000000;
}

#tabs li {
float:left;
background:url("../../icons/tabs/left.gif") no-repeat left top;
margin:0;
padding:0 0 0 2px;
border-bottom: solid 1px #776655;
}
2. アクティブなタブ #tabs #current 
#tabs #current {
border-width: 0;
}

#tabs #current {
background-image:url("../../icons/tabs/left_on.gif");
margin-left: -3px;
}
#tabs #current a {
background-image:url("../../icons/tabs/right_on.gif");
padding:3px 9px 7px 6px;
vertical-align: baseline;
}
3. 最後のタブ #tabs last 
#tabs .last a {
background-image:url("../../icons/tabs/right_last.gif");
}
4. タブパネル

#screenTabs, #tabs, #tabs ul

 
#screenTabs {
float:left;
width: 100%;
min-height: 1px;
height: 1px;
background:#ffffff url("../../icons/tabs/bg.gif") repeat-x bottom;
}

td > #screenTabs { 
height: auto;
}

#tabs {
float:left;
width:600px;
line-height:normal;
white-space: nowrap;
background:#ffffff url("../../icons/tabs/bg.gif") repeat-x bottom;
}

#tabs ul {
margin:0;
padding: 0px 10px 10px 10px;
list-style:none;
}

ヘルプ

カスタマイズ可能なヘルプページの属性は以下の通りです：

表 2.9. ヘルプの属性

ユーザーインターフェースの要素 セレクタ CSSコード例
Header level 1 h1 
h1 {
  font-size: 16px;
}
Header level 2 h2 
h2 {
  font-size: 14px;
}

スキンに関する記述

CSSと画像ファイルの準備ができたら、それに関して記述されたファイルを作成します。標準的なPleskのスキンからファイルをコピーして編集す る、または新しいinfo.xmlファイルを作成する、という２つの方法があります。

スキンに関する記述ファイル作成の際、下記のソースコードを使用できます。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE PLESKSKIN SYSTEM "pleskskin.dtd">
<PLESKSKIN>
 <INFO>
  <PLESKVERSION>7.1.x</PLESKVERSION>
   <VERSION>1.0.0</VERSION>
	<DATE>2004-08-05</DATE>
	 <NAME>
	  <LOCALESTRING language="en">Your skin name</LOCALESTRING>
	 </NAME>
	 <DESCRIPTION>
	  <LOCALESTRING language="en">Your skin description here</LOCALESTRING>
	 </DESCRIPTION>
    <AUTHOR>Your name here</AUTHOR>
 </INFO>
   <SCREENSHOTS>
	<SCREENSHOT>
	  <NAME>
	    <LOCALESTRING language="en"> Screen title, e.g. Server Administration page </LOCALESTRING>
	  </NAME>
	  <DESCRIPTION>
	   <LOCALESTRING language="en">This is how the control panel's server management
section looks like with my skin</LOCALESTRING>
	  </DESCRIPTION>
	    <SRC>screenshots/screenshot1.gif</SRC>
	    <THUMB>screenshots/screenshot1_thumb.gif</THUMB>
	</SCREENSHOT>
   </SCREENSHOTS>
</PLESKSKIN>

スクリーンショットとサムネイルは、必ずスキンのscreenshots/　ディレクトリに入れるようにして下さい。スクリーン ショットはお好きなだけ入れることができます。

補足

それぞれの名前と記述の要素の中で、異なる言語で複数のエントリーをすることができます。例えば、管理者のコントロールパネルの言語がドイツ語に設 定された場合、予め設定しておけば、対応するドイツ語のエントリーが表示され、非常に便利です。

ドイツ語でのエントリーを入力する際、 language="de"の属性の< LOCALESTRING> タグを使用して下さい。

<DESCRIPTION>
	<LOCALESTRING language="en">Your control panel skin description here</LOCALESTRING>
	<LOCALESTRING language="de">Dies ist die Beschreibung Ihres Control Panel Skins</LOCALESTRING>
</DESCRIPTION>

他の言語では、それぞれの２文字の言語コードをお使い下さい。


トップへ