Title: スタイルシートでスキンのデザインを変更するには

Proteus や Mexico などのスキンは、スタイルシート (CSS : Cascading Style Sheets) を追加して、既存のデザインを変更できるように設計されています。ブラウザの画面から設定を追加するだけで、CSS ファイルを直接編集する必要はありません。

スタイルシートとは?



下図は、スタイルシートが有効の画面(左)とスタイルシートを無効にした画面(右)の比較図です。スタイルシートの有無によって、ページの見栄えがまったく違うことがわかります。スタイルシートを無効にした右図ではすっぴんの HTML ページが表示されています。つまり、スタイルシートは HTML ページの化粧であり、設定次第でページのデザインを大きく好きなように変更できます。

スタイルシートの有効/無効の比較

ページの構成や定義を調べるには



ページのデザインを変更したり装飾を新しく加えたりするには、まず、どこのデザインを変更したり装飾を加えたりするか、その対象となる場所を指定する必要があります。

ページの「どの部分?」を調べるには、Firefox の Firebug アドオンや Google Chrome や Internet Explorer のデベロッパーツールを使うのが便利です。画面上のあらゆるエレメントのコンテキストやクラスの定義を簡単に調べられます。



Chromeのデベロッパー ツール

既存のデザインを変更するには



既存のスタイルシートの変更は比較的簡単です。上図で調べた「どの部分」と「どう装飾するか」の定義を、スキン設定の [カスタム] タブに入力します。ここで定義された内容は、既存の定義を上書きして動作します。

参照 : FAQ1764: Proteus スキンのカスタマイズ

カスタマイズ内容の記入欄

ページデザインの変更例



カスタマイズ例

上図には次のようなカスタマイズを加えています。



このカスタマイズを加えるためのスタイルシートは次のとおりです。下記をコピーし、上図の [上級者向けの上書き設定] 欄にペーストしてください。

body {
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ゴシックM-PRO","HGMaruGothicMPRO";
}
#main {
  font-size: 125%;
}
#main{
box-shadow: none;
}
ul#primary-tabs li.current a{
margin-top: 0;
border-radius: 0;
}
.avatar * img, .avatar img {
border-radius: 50%;
}
#comments {
  margin-top: 0;
}
.ii table {
  width: 100%;
  border-collapse: collapse;
}
.ii table tr th {
  font-weight: bold;
  padding: 4px;
  background-color: #f0f0f0;
  border-top: 1px #ccc solid;
  border-bottom: 1px #ccc solid;
}
.ii table tr td {
  padding: 4px;
}
.ii table tr:nth-child(2n-1) td {
  background-color: #f8f8f8;
}
.notifications-count {
  background-color: crimson;
}




Attachments:
chrome_developertools.png
compare_css_onoff.png
design_custom_textarea.png
example.png
関連記事
Article: FAQ1784 (permalink)
Categories: :FAQ:スキン:Mexico, :FAQ:スキン:Proteus, :FAQ:カスタマイズ, :FAQ:表示, :DocJp:FAQ, :FAQ:CSS, :FAQ:デザイン
Date: 2011/09/20; 14時32分00秒 JST
Author Name: TeamPage サポート
Author ID: jpbo